Summary  
This chapter shows how to import a code repository into a deployment service, configure environment variables for secure API key management, and trigger an automated build-and-publish process.

General domain of usage  
Web application hosting

Vercel hämtar din kod från GitHub och publicerar den som en live-webbplats. Varje gång du gör en uppdatering till GitHub, distribuerar Vercel automatiskt om den. Du behöver inte göra något manuellt efter den första installationen.

Definition

Din kod finns på GitHub. Detta kapitel gör den tillgänglig på internet med en riktig URL som du kan dela med vem som helst.

### Stegen

Gå till [vercel.com](https://vercel.com) och registrera dig. Anslut ditt GitHub-konto när du blir ombedd. Detta gör att Vercel kan se dina arkiv.

1. Skapa ett Vercel-konto

När du är på Vercel-instrumentpanelen, klicka på **Add New** och välj **Project**. Du bör se ditt GitHub-arkiv listat. Klicka på **Import**.

2. Importera ditt projekt

Detta är det viktigaste steget. Din API-nyckel finns inte på GitHub eftersom den har uteslutits av `.gitignore`. Det betyder att Vercel inte heller har den. Du måste ge den direkt till Vercel.

På projektets installationssida, öppna avsnittet **Environment Variables**. Du måste lägga till din API-nyckel här innan du distribuerar.

| Field | What to enter |
|-------|--------------|
| Key   | `ANTHROPIC_API_KEY` |
| Value | Your actual API key from `.env.local` |

Du kan också klicka på **Import .env** och välja din `.env.local`-fil direkt. Vercel läser automatiskt in nyckeln och värdet från den. Detta är det enklaste alternativet.

3. Lägg till dina miljövariabler

När miljövariabeln har lagts till, klicka på **Deploy**. Vercel hämtar alla dina kodfiler från GitHub och publicerar dem. Detta tar två till fem minuter.

4. Klicka på Deploy

När du ser gratulationsskärmen är din app live! Vercel ger dig en URL som du kan öppna i valfri webbläsare och dela med vem som helst.

5. Klart

### Varför steget med miljövariabel är viktigt

Din app kommer att byggas och verka fungera utan API-nyckeln. Men så snart någon skickar in en idé kommer det att misslyckas eftersom appen inte har något sätt att anropa AI:n. Att lägga till nyckeln i Vercel är det som gör att kärnfunktionen faktiskt fungerar i produktion.

Den lokala `.env.local`-filen stannar på din dator. Vercel-miljövariabler är din `.env.local` för den live webbversionen.


Notering

Vad måste du göra för att säkerställa att din distribuerade app kan komma åt AI API:et?

Bygg och lansera en riktig app på bara en helg med moderna AI-verktyg och ett enkelt, praktiskt arbetsflöde, genom att använda Claude Code för att planera, generera och förbättra din kod, hantera ditt projekt med GitHub och distribuera din färdiga app online med Vercel. Du börjar med en idé och omvandlar den snabbt till en tydlig projektplan, för att sedan steg för steg bygga en fungerande applikation med fokus på kärnfunktioner, enkel arkitektur och snabb iteration istället för onödig komplexitet, samtidigt som du lär dig arbeta effektivt med AI genom att skriva bättre prompts, åtgärda fel och förbättra funktioner, och avslutar med en live-app, ett välstrukturerat GitHub-projekt och ett repeterbart system för att snabbare omvandla framtida idéer till verkliga produkter.

Förstå grunderna i AI-assisterad utveckling, konfigurera din miljö och bli bekant med Claude Code innan du påbörjar din första app.

Förvandla din idé till en tydlig, enkel plan och definiera den minsta versionen av din app som levererar verkligt värde.

Gå från noll till en fungerande app genom att generera kod med AI, sätta upp projektet och förstå vad som skapats.

Förbättra din app genom att lägga till funktioner, förfina designen och lära dig att åtgärda problem effektivt.

Publicera ditt projekt, gör det tillgängligt online och säkerställ att allt fungerar med hjälp av GitHub och Vercel.

Field	What to enter
Key	`ANTHROPIC_API_KEY`
Value	Your actual API key from `.env.local`

Distribuera med Vercel

Stegen

Varför steget med miljövariabel är viktigt