Je website online zetten met Vercel

Je hebt een project gebouwd en het werkt lokaal op je computer. Nu wil je het delen met de wereld. In dit hoofdstuk leer je hoe je je website online zet met Vercel.

Wat is Vercel?

Vercel is een hostingplatform dat speciaal is gebouwd voor frontend-projecten. Je verbindt je GitHub-repository eenmalig, en Vercel zorgt daarna automatisch voor het online zetten van nieuwe versies. De gratis laag is ruim genoeg voor persoonlijke projecten en portfolio's.

Gratis starten

Je hebt geen creditcard nodig voor de gratis Vercel-laag. Je kunt direct beginnen met een GitHub-account.

Wat heb je nodig?

Voordat je begint, heb je twee dingen nodig:

• Een GitHub-account en je project op GitHub
• Een gratis Vercel-account (die maak je in de volgende stap aan)

Zorg dat je project in een GitHub-repository staat. Vercel leest je code direct uit die repository.

Je project verbinden met Vercel

Stap 1: Account aanmaken

Ga naar vercel.com en klik op Sign Up. Kies Continue with GitHub en geef Vercel toegang tot je account.

Stap 2: Repository importeren

Na het inloggen zie je een overzicht van je projecten. Klik op Add New en daarna op Project. Je krijgt een lijst van je GitHub-repositories.

Klik op Import naast het project dat je wilt deployen.

Stap 3: Framework detectie

Vercel herkent automatisch welk framework je gebruikt. Gebruik je React, Next.js of een andere bekende tool, dan stelt Vercel de buildcommando's al voor je in.

Voorbeeld: detecteerde instellingen

{
    "buildCommand": "npm run build",
    "outputDirectory": "dist",
    "installCommand": "npm install"
}

Klik op Deploy. Na een minuut of twee is je website live.

Je eerste deployment

Na de deployment geeft Vercel je een unieke URL, zoals mijn-project-xyz.vercel.app. Deel die link direct met vrienden of stuur hem mee in je portfolio.

Automatisch deployen

Elke keer dat je een wijziging naar je main-branch pusht, detecteert Vercel dat automatisch en start een nieuwe deployment. Je hoeft nooit handmatig op een knopje te drukken.

Terminal

git add .
git commit -m "Nieuwe sectie toegevoegd"
git push

Binnen twee minuten staat de nieuwe versie online.

Preview-deployments

Maak je een nieuwe branch of open je een pull request, dan maakt Vercel automatisch een preview-deployment aan. Elke branch krijgt een eigen tijdelijke URL. Dit is handig om wijzigingen te testen voordat je ze samenvoegt in main.

Feedback vragen

Deel de preview-URL met iemand anders om feedback te vragen op een nieuwe feature. De live website blijft gewoon ongewijzigd totdat je merget.

Een eigen domeinnaam koppelen

Wil je niet mijn-project.vercel.app maar www.mijnwebsite.nl? Dat kan. Koop een domeinnaam bij een registrar zoals Hostnet of TransIP, en koppel hem vervolgens in Vercel.

Ga naar je project in het Vercel-dashboard, klik op Settings en daarna op Domains. Voeg je domeinnaam toe. Vercel laat je precies zien welke DNS-instellingen je bij je registrar moet invoeren.

Type   Naam   Waarde
A      @      76.76.21.21
CNAME  www    cname.vercel-dns.com

Na het aanpassen van je DNS kan het tot 24 uur duren voordat de domeinnaam overal werkt. Gewoonlijk gaat het binnen een uur.

Omgevingsvariabelen instellen

Sommige waarden, zoals API-sleutels, mag je niet in je code bewaren. Je bewaart ze als omgevingsvariabelen. Lokaal gebruik je daarvoor een .env-bestand. In Vercel stel je die variabelen in via het dashboard.

Ga naar Settings en daarna Environment Variables in je project. Voeg elke variabele toe met een naam en een waarde.

.env (lokaal, nooit committen)

DATABASE_URL=postgresql://user:password@localhost/mydb
API_KEY=my-secret-key

In Vercel vul je dezelfde namen in, maar dan met de productiewaarden. Je kunt aparte waarden opgeven voor Production, Preview en Development.

Vergeet de productiewaarden niet

Een veelgemaakte fout is om een variabele alleen lokaal in te stellen en te vergeten hem in Vercel toe te voegen. De build slaagt dan wel, maar de app crasht of doet niets in productie.

Veelgemaakte fouten

Buildfout: de logs geven een foutmelding

Open je project in Vercel, klik op de mislukte deployment en bekijk de Build Logs. Vercel laat precies zien welk commando is mislukt en wat de foutmelding is. Kopieer de foutmelding en zoek ernaar: de meeste fouten zijn al eerder opgelost door iemand anders.

Verkeerde Node.js-versie

Vercel gebruikt standaard een bepaalde versie van Node.js. Jouw project werkt misschien alleen met een specifieke versie. Geef de gewenste versie op in je package.json:

package.json

{
    "engines": {
        "node": "20.x"
    }
}

Of maak een vercel.json aan in de root van je project:

vercel.json

{
    "build": {
        "env": {
            "NODE_VERSION": "20"
        }
    }
}

Omgevingsvariabelen ontbreken in productie

Krijg je een fout over een ontbrekende variabele die lokaal wel werkt? Controleer dan of je de variabele ook in Vercel hebt toegevoegd via Settings en Environment Variables. Een .env-bestand in je repository helpt niet: dat staat (terecht) in je .gitignore.

Commit nooit je .env-bestand

Staat je .env-bestand per ongeluk in je repository, dan zijn je sleutels openbaar. Voeg .env toe aan je .gitignore en verander direct al je sleutels.