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 haalt je code van GitHub en publiceert deze als een live website. Elke keer dat je een update naar GitHub pusht, wordt je site automatisch opnieuw gedeployed door Vercel. Je hoeft na de eerste installatie niets meer handmatig te doen.

Definitie

Je code staat op GitHub. In dit hoofdstuk wordt deze live gezet op het internet met een echte URL die je met iedereen kunt delen.

### De stappen

Ga naar [vercel.com](https://vercel.com) en meld je aan. Koppel je GitHub-account wanneer hierom wordt gevraagd. Hierdoor kan Vercel je repositories zien.

1. Maak een Vercel-account aan

Zodra je op het Vercel-dashboard bent, klik je op **Add New** en selecteer je **Project**. Je zou je GitHub-repository moeten zien staan. Klik op **Import**.

2. Importeer je project

Dit is de belangrijkste stap. Je API-sleutel staat niet op GitHub omdat deze is uitgesloten door `.gitignore`. Dat betekent dat Vercel deze ook niet heeft. Je moet de sleutel direct aan Vercel geven.

Op de projectinstellingenpagina open je de sectie **Environment Variables**. Je moet hier je API-sleutel toevoegen voordat je gaat deployen.

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

Je kunt ook op **Import .env** klikken en direct je `.env.local`-bestand selecteren. Vercel leest dan automatisch de sleutel en waarde uit dit bestand. Dit is de eenvoudigste optie.

3. Voeg je omgevingsvariabelen toe

Zodra de omgevingsvariabele is toegevoegd, klik je op **Deploy**. Vercel haalt al je codebestanden van GitHub en publiceert ze. Dit duurt twee tot vijf minuten.

4. Klik op Deploy

Wanneer je het felicitatiescherm ziet, is je app live! Vercel geeft je een URL die je in elke browser kunt openen en met iedereen kunt delen.

5. Klaar

### Waarom de stap met de omgevingsvariabele belangrijk is

Je app zal bouwen en lijkt te werken zonder de API-sleutel. Maar zodra iemand een idee indient, zal het mislukken omdat de app geen manier heeft om de AI aan te roepen. Het toevoegen van de sleutel aan Vercel zorgt ervoor dat de kernfunctionaliteit daadwerkelijk werkt in productie.

Het lokale `.env.local`-bestand blijft op je computer. Vercel-omgevingsvariabelen zijn jouw `.env.local` voor de live webversie.


Opmerking

Wat moet je doen om ervoor te zorgen dat je gedeployde app toegang heeft tot de AI API?

Bouw en lanceer een echte app in slechts één weekend met behulp van moderne AI-tools en een eenvoudige, praktische workflow. Gebruik Claude Code om je code te plannen, genereren en verfijnen, beheer je project met GitHub en zet je voltooide app online met Vercel. Je begint met een idee en zet dit snel om in een duidelijk projectplan, waarna je stap voor stap een werkende applicatie bouwt. De focus ligt op kernfunctionaliteiten, eenvoudige architectuur en snelle iteratie in plaats van onnodige complexiteit. Je leert effectief samenwerken met AI door betere prompts te schrijven, fouten op te lossen en functies te verbeteren. Je eindigt met een live app, een overzichtelijk GitHub-project en een herhaalbaar systeem om toekomstige ideeën sneller om te zetten in echte producten.

Begrijp de basisprincipes van AI-ondersteunde ontwikkeling, stel je omgeving in en maak kennis met Claude Code voordat je aan je eerste app begint.

Zet uw idee om in een duidelijk, eenvoudig plan en definieer de kleinste versie van uw app die echte waarde levert.

Ga van nul naar een werkende app door code te genereren met AI, het project op te zetten en te begrijpen wat er is gemaakt.

Verbeter uw app door functies toe te voegen, het ontwerp te verfijnen en te leren hoe u problemen effectief oplost.

Publiceer uw project, maak het online toegankelijk en zorg ervoor dat alles werkt met behulp van GitHub en Vercel.

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

Deployen met Vercel

De stappen

Waarom de stap met de omgevingsvariabele belangrijk is