2.5: Live gaan

De laatste stap. Je quiz is gebouwd, gepolijst en bewaard op GitHub. Nu zet je hem op het internet, zodat iedereen hem kan bezoeken. Ontwikkelaars noemen dit deployen.

• Tijd: 20 min

Interactieve les: draai /start-2-5 in Claude Code

Wat is Vercel?

Vercel is een gratis dienst die je code op het internet zet, zo’n beetje het thuishonk van vibe coding. Je geeft het je GitHub-project, en het maakt er een echte website met een echte URL van. Het is gemaakt door dezelfde mensen achter Next.js, dus ze werken perfect samen.

Wat je nodig hebt

1. Een Vercel-account, meld je aan met je GitHub-account, dan koppelt alles vanzelf.
2. De Vercel CLI, de tool waarmee Claude rechtstreeks deployt.

De Vercel CLI opzetten

Claude checkt met vercel --version of de CLI al staat. Zo niet: npm i -g vercel. Daarna authenticeer je met vercel login: Claude opent de autorisatiepagina in je browser, jij klikt op Authorize, en Claude bevestigt met vercel whoami.

Deployen

Eén commando zet je quiz live:

vercel --prod --yes

De --yes-vlag aanvaardt alle standaardinstellingen (geen vragen), --prod zet hem meteen live. De deploy duurt ongeveer een minuut. In de uitvoer verschijnt je URL, ongeveer zo: stroom-quiz-abc123.vercel.app.

Dat is jouw website. Op het echte internet. Open hem op je telefoon, hij werkt op elk toestel, en stuur de link naar iemand. Voel hoe het is om iets écht op te leveren.

Bijwerken: auto-deploy

Wil je je quiz later aanpassen? Maak je wijzigingen, vraag Claude om “naar GitHub te pushen”, en Vercel werkt je live website automatisch bij. Vercel houdt je GitHub-repo in de gaten en deployt vanzelf bij elke push.

De lus, compleet

Met deze lus kan je zowat alles bouwen.

Wat hierna kan

• E-mailadressen verzamelen? Dan heb je een database nodig, iets voor een latere module.
• Het type-resultaat koppelen aan de Stroom Pas? Dan heb je een API-koppeling nodig.
• Een eigen domein zoals stroom-type.be? Helemaal mogelijk, Vercel maakt dat makkelijk.

Je hebt nu het fundament. Al de rest bouwt hierop voort.

Wat nu

Probeer eens iets voor jezelf te bouwen: start een nieuwe projectmap en volg precies dezelfde lus. Benieuwd naar gevorderde begrippen? Lees Begrippen uitgelegd of ontdek de 25 AI-Specialisten.