Träff 5 · Publicera

Ut i världen

Publicera på Vercel. Varje push blir en ny version på en riktig webbadress.

Går du kursen på egen hand? Hoppa över rundan och demon. Läs genomgången, gör övningen och hemuppgiften – och visa någon vad du byggt. Fastnar du: klistra in felet till Claude, eller se om en ledd cirkel passar dig eller din arbetsplats.

Mål för träffen

  • Ha din app live på en riktig webbadress.
  • Förstå flödet push → bygg → publicera som sker automatiskt.
  • Kunna läsa ett byggfel och få Claude att rätta det.

Agenda (60 min)

Tid Vad
0–10 Runda: hur många commits blev det?
10–20 Genomgång: vad Vercel gör, och gratisnivåns villkor
20–45 Publicera ditt cirkelprojekt
45–60 Öppna varandras appar i mobilen! Hemuppgift

Genomgång

Vad händer när man "deployar"?

Din app körs i dag på localhost – bara du kan se den, och bara när datorn är igång. Vercel tar koden från ditt GitHub-repo, bygger den och lägger den på servrar som alltid är igång, med en adress som ditt-projekt.vercel.app.

Det fina: när kopplingen väl är gjord publiceras varje push automatiskt. Du committar och pushar som vanligt (träff 4) – en minut senare är ändringen live.

Du → Claude Code → commit → push → GitHub → Vercel bygger → live

Pushar du till en branch skapar Vercel dessutom en förhandsversion med en egen adress – perfekt för att visa en ändring innan den går live.

Gratisnivån (Hobby)

  • Gratis för personliga, icke-kommersiella projekt. Cirkelprojekt = ok. Något organisationen ska driva och använda i verksamheten = inte på Hobby.
  • Adressen blir något.vercel.app. Egen domän går, men behövs inte nu.
  • Appen är publik – vem som helst med länken kan se den. Lägg inte in riktiga uppgifter om personer, kunder eller invånare.

Övning

  1. Säkerställ att allt är pushat (prompt E3).
  2. Gå till vercel.com → Add New… → Project → välj ditt repo → Deploy. Standardinställningarna funkar för Next.js.
  3. Vänta någon minut. Klicka på adressen. Det är live!
  4. Gör en liten ändring via Claude, push – och se den dyka upp på Vercel.
  5. Öppna appen i mobilen. Ser den bra ut? Annars: prompt B4.

Alternativ: Claude kan också göra kopplingen åt dig via Vercels kommandoradsverktyg (prompt F2). Webbgränssnittet är dock enklast första gången.

Om bygget misslyckas

Det är vanligt första gången – appen fungerade lokalt men Vercel säger "Build failed".

  1. Klicka på den misslyckade versionen i Vercel → Build Logs.
  2. Kopiera de röda raderna.
  3. Kör prompt F3 och klistra in felet.
  4. Push igen.

Du är klar när

  • Din app har en .vercel.app-adress som fungerar i mobilen.
  • Du har sett minst en ändring gå från prompt till live.

Hemuppgift

  • Skicka länken till någon utanför cirkeln och be om en förbättring. Bygg den.