Vibe-coding · Les

Deployen naar Vercel of Netlify

Hosting met één klik, met hulp van AI.

Les 2 van 413 stappen

Deployen naar Vercel of Netlify is een gratis Vibe-coding-les op CoddyKit. Dit is les 2 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Vibe-coding. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Vibe-coding bevat in totaal 4 lessen.

Tijd om live te gaan

Je begrijpt wat implementeren betekent. Nu gaan we het daadwerkelijk doen. Aan het einde van deze les kan je app een echte openbare link hebben.

We gebruiken Vercel en Netlify — twee van de meest beginnersvriendelijke hostingdiensten. Beide kunnen je project aannemen en je binnen enkele minuten een live-URL geven, vaak met één klik.

En het beste is: AI kan je in gewoon Nederlands door elke stap leiden.

Twee manieren om te implementeren

Er zijn twee gebruikelijke manieren om je app bij een hostingdienst te krijgen:

Vanuit Git: je koppelt je coderepository (op GitHub) en de hostingdienst implementeert automatisch elke keer dat je pusht. Dit is de moderne, aanbevolen manier.
Slepen en neerzetten: voor eenvoudige statische websites kun je bij Netlify je projectmap letterlijk naar de browser slepen.

Een op Git gebaseerde aanpak is de standaard, omdat je daarmee automatische updates krijgt. Maak je geen zorgen als Git nieuw voor je is — AI kan het voor je instellen.

Stap 1: zet je code op GitHub

Hostingdiensten implementeren vanuit GitHub, een plek waar je code online wordt opgeslagen. Staat je project daar nog niet, vraag dan hulp aan AI.

In Cursor of Claude Code kan je AI-assistent de opdrachten voor je uitvoeren. Beschrijf gewoon wat je wilt.

My project is a folder on my laptop called "my-portfolio". It's not on GitHub yet.

Walk me through getting it onto GitHub:
1. The exact commands to create a Git repo and push it.
2. How to make a new GitHub repository.
3. Explain each command in one short sentence.

I'm a beginner — assume I've never used Git.

Stap 2: maak verbinding met Vercel

Staat je code eenmaal op GitHub, dan is implementeren naar Vercel bijna te eenvoudig:

Meld je bij Vercel aan met je GitHub-account.
Klik op Nieuw project toevoegen en kies je repository.
Vercel detecteert automatisch je framework en instellingen.
Klik op Implementeren.

Na ongeveer een minuut krijg je een live-URL zoals my-portfolio.vercel.app. Dat is alles — je app staat op internet.

Stap 2 (alternatief): maak verbinding met Netlify

Gebruik je liever Netlify? De werkwijze is bijna hetzelfde:

Meld je bij Netlify aan met GitHub.
Klik op Nieuwe site toevoegen → Een bestaand project importeren.
Kies je repository.
Bevestig de bouwinstellingen en klik op Implementeren.

Voor een eenvoudige statische website (alleen HTML/CSS/JS) kun je GitHub zelfs overslaan en je map naar het dashboard van Netlify slepen. Beide routes eindigen hetzelfde: met een live-link.

Bouwinstellingen uitgelegd

Tijdens het instellen zie je mogelijk velden zoals bouwopdracht en uitvoermap. Hiermee geef je de hostingdienst aan hoe je app moet worden voorbereid.

Bouwopdracht: wat er moet worden uitgevoerd, vaak npm run build.
Uitvoermap: waar de voltooide bestanden terechtkomen, vaak dist of build.

Voor populaire frameworks vult de hostingdienst deze automatisch in. Laat bij twijfel de standaardwaarden staan — of vraag AI wat je project nodig heeft.

Laat AI je bouwinstellingen vaststellen

Kan de hostingdienst je project niet automatisch detecteren? Plak je configuratie dan in AI en laat AI precies vertellen wat je moet invullen. Zo hoef je veel minder te gokken.

Vercel is asking me for a Build Command and Output Directory, but I don't know what to put.

Here's my project:
- It's a Vite + React app
- My package.json has a "build" script
- There's a "dist" folder after building

Tell me exactly what to type in each field, and explain why.

Je eerste geslaagde implementatie

Wanneer het bouwen klaar is, zie je een groene melding dat het gelukt is en een aanklikbare link. Open die — daar staat je app, live voor de hele wereld.

Deel die link met een vriend op diens telefoon. Je project op het apparaat van iemand anders zien werken is een mijlpaal die het vieren waard is.

Hier is een leuk stukje code: een kleine banner die je kunt toevoegen om bezoekers eraan te herinneren dat je app zojuist is gepubliceerd.

function shipBanner(appName, liveUrl) {
  return "\uD83D\uDE80 " + appName + " is now live at " + liveUrl + "!";
}

console.log(shipBanner("My Portfolio", "my-portfolio.vercel.app"));

Wanneer een implementatie mislukt

Soms mislukt een implementatie — dat is normaal en geen ramp. De hostingdienst toont een bouwlogboek: een lang bericht waarin wordt uitgelegd wat er misging.

Je hoeft het niet regel voor regel te lezen. Kopieer de fout en geef die aan AI. Fouten in implementaties opsporen is een van de dingen waar AI erg goed in is.

Zoek de rode fout in het bouwlogboek.
Kopieer die.
Vraag AI om de fout uit te leggen en te herstellen.

Plak de bouwfout in AI

Zo verander je een angstaanjagende bouwfout in een snelle oplossing. Geef AI voor het beste resultaat de fout en context over je project.

My Vercel deploy failed. Here's the error from the build log:

  Error: Cannot find module 'react'
  npm ERR! code ELIFECYCLE

Context:
- It's a React app that runs fine on my laptop
- I pushed it to GitHub and connected Vercel

Explain in plain English what's wrong and give me the exact steps to fix it so the deploy succeeds.

Automatische updates

Dit is het mooie van op Git gebaseerde hosting: zodra alles is gekoppeld, hoef je deze configuratie nooit opnieuw uit te voeren. Elke keer dat je nieuwe code naar GitHub pusht, bouwt de hostingdienst automatisch opnieuw en implementeert hij opnieuw.

Breng een wijziging aan, sla die op in Git en push — enkele seconden later is je live-app bijgewerkt. Dit is continue implementatie en daarom zijn bouwers dol op Vercel en Netlify.

In een latere les gaan we veilige updates verkennen. Voor nu geldt: één keer implementeren, voor altijd bijwerken.

Korte controle

Je hebt je eerste app gepubliceerd. Laten we vastleggen hoe het werkt.

Beantwoord dit in de interactieve les

Samenvatting: je bent live

Je hebt zojuist geleerd hoe je daadwerkelijk een app publiceert:

Zet je code op GitHub (AI kan de Git-stappen uitvoeren).
Koppel de repository aan Vercel of Netlify en klik op Implementeren.
Bouwinstellingen worden meestal automatisch gedetecteerd — vraag AI bij twijfel.
Een mislukte implementatie is te herstellen: plak de bouwfout in AI.
Na de configuratie leidt elke push tot een automatische nieuwe implementatie.

Hierna: je app een professionele uitstraling geven met een aangepast domein en veilige omgevingsinstellingen.

Gratis beginnen

Leer JavaScript met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 25
Lessen: 100

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Deployen naar Vercel of Netlify” gratis?

Ja — je kunt hier op het web alle 3 lessen van het leerpad Vibe-coding, waaronder “Deployen naar Vercel of Netlify”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus Vibe-coding bevat in totaal 4 lessen.

Wat leer ik in “Deployen naar Vercel of Netlify”?

Hosting met één klik, met hulp van AI. Je oefent met Vibe-coding door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met Vibe-coding te beginnen?

Ervaring vooraf is niet nodig. Vibe-coding op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 2 van 4.

Hoe lang duurt de les “Deployen naar Vercel of Netlify”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over Vibe-coding?

Ja. Elke les over Vibe-coding bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

← Terug naar Vibe-coding