Frontend Academy · Les

Deployen naar Vercel, Netlify en Cloudflare Pages

Verbind uw repository met elk platform, configureer buildopdrachten en outputmappen en begrijp preview-deployments voor branches.

Les 2 van 416 stappen

Deployen naar Vercel, Netlify en Cloudflare Pages is een gratis Frontend Academy-les op CoddyKit. Dit is les 2 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Frontend Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Frontend Academy bevat in totaal 4 lessen.

De moderne drie-eenheid voor frontendhosting

Vercel, Netlify en Cloudflare Pages zijn de toonaangevende platforms voor het uitrollen van frontendapps. Ze bieden allemaal: Git-gebaseerde uitrol, previewvertakkingen, aangepaste domeinen, edge-CDN en serverloze functies. Kies er één en blijf die gebruiken.

Vercel — gebouwd voor Next.js

Gemaakt door het Next.js-team. Integratie met Next.js van topklasse: Image Optimization zonder configuratie, ISR, Edge Functions en Speed Insights. Ondersteunt ook Vite, Nuxt, Astro en de meeste statische frameworks.

Uitrollen naar Vercel

Verbind een GitHub-, GitLab- of Bitbucket-repository. Vercel detecteert het framework automatisch, voert build uit en rolt de app uit.

# Manual deploy (any project):
npm install -g vercel
vercel login
vercel       # preview deploy
vercel --prod  # production deploy

# Or push to main — auto-deploys via Git integration.

Configuratie van vercel.json

Overschrijf standaardinstellingen, zoals bouwopdrachten, omleidingen, kopteksten en herschrijvingen.

{
  "buildCommand": "npm run build",
  "outputDirectory": "dist",
  "framework": "vite",
  "headers": [{
    "source": "/(.*)",
    "headers": [{ "key": "X-Frame-Options", "value": "DENY" }]
  }],
  "redirects": [{ "source": "/old", "destination": "/new", "permanent": true }]
}

Netlify — de pionier

Was een pionier op het gebied van moderne uitrol van statische sites. Sterke ondersteuning voor formulieren, identiteitsbeheer en analyses. Netlify Functions en Edge Functions voor serverloze toepassingen. Uitstekende ondersteuning voor Vite, Hugo en Eleventy.

Uitrollen naar Netlify

Verbind een repository of sleep een gebouwde map naar het venster. Configureer via het dashboard of netlify.toml.

# netlify.toml
[build]
  command = "npm run build"
  publish = "dist"

[build.environment]
  NODE_VERSION = "20"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200   # SPA fallback

[[headers]]
  for = "/*"
  [headers.values]
    X-Frame-Options = "DENY"

Netlify CLI

Lokaal ontwikkelen met serverloze functies.

npm install -g netlify-cli
netlify login
netlify init
netlify dev       # local server with functions
netlify deploy    # preview
netlify deploy --prod

Cloudflare Pages

Rolt apps uit naar het wereldwijde edge-netwerk van Cloudflare. Pages Functions biedt serverloze functies op de Workers-runtime. Ruim gratis aanbod. Uitstekend voor Astro, Hono en Remix.

Uitrollen naar Cloudflare Pages

Verbind een repository via het Cloudflare-dashboard. Of gebruik de wrangler-CLI.

# Direct upload via wrangler:
npm install -g wrangler
wrangler login
wrangler pages deploy ./dist --project-name=my-site

# Or push to GitHub — auto-deploys.

wrangler.toml voor Pages

Cloudflare Pages gebruikt wrangler.toml voor de configuratie van Workers en Functions.

# wrangler.toml
name = "my-site"
compatibility_date = "2024-01-01"
pages_build_output_dir = "dist"

[vars]
API_URL = "https://api.example.com"

[[d1_databases]]
binding = "DB"
database_name = "my-db"
database_id = "..."

Preview-uitrol

Alle drie de platforms maken een unieke URL voor elke PR-vertakking. Beoordelaars kunnen erop klikken en wijzigingen geïsoleerd testen. Dit is inmiddels een standaardwerkwijze voor teams.

Omgevingsvariabelen

Alle drie bieden variabelen per omgeving (productie, preview en ontwikkeling) via het dashboard of de CLI. Frontendvariabelen moeten een voorvoegsel hebben (Vite: VITE_, Next: NEXT_PUBLIC_) om naar de browser te worden doorgestuurd.

# Vercel:
vercel env add API_URL production

# Netlify:
netlify env:set API_URL https://api.example.com

# Cloudflare Pages:
wrangler pages secret put API_URL

Aangepaste domeinen en SSL

Alle drie regelen SSL-certificaten automatisch (via Let's Encrypt). Verwijs je DNS A- of CNAME-record naar hun doel — zij geven certificaten uit en vernieuwen ze. Aangepaste domeinen zijn gratis bij alle betaalde abonnementen.

Kiezen uit de drie

Vercel: beste voor Next.js, verfijnde ontwikkelervaring, iets duurder. Netlify: beste voor formulieren en identiteitsbeheer, volwassen ecosysteem van plug-ins. Cloudflare Pages: beste edgeprestaties, laagste kosten op schaal, uitstekende integratie met Workers. Alle drie zijn uitstekend.

Korte controle

Wat is de standaardmanier om een uitrolbare preview-URL voor een pullrequest op Vercel, Netlify of Cloudflare Pages te maken?

Beantwoord dit in de interactieve les

Samenvatting: frontendhosting

Vercel: beste Next.js-integratie. Netlify: formulieren, identiteitsbeheer en plug-ins. Cloudflare Pages: edgeprestaties, laagste kosten. Alle drie: automatische Git-gebaseerde uitrol, preview-URL's per PR, omgevingsvariabelen per omgeving, automatische SSL en aangepaste domeinen. Configureer via het dashboard of een platformspecifiek configuratiebestand (vercel.json, netlify.toml, wrangler.toml).

Gratis beginnen

Leer HTML 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: 41
Lessen: 163

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Deployen naar Vercel, Netlify en Cloudflare Pages” gratis?

Ja — de volledige tekst van “Deployen naar Vercel, Netlify en Cloudflare Pages” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus Frontend Academy wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus Frontend Academy bevat in totaal 4 lessen.

Wat leer ik in “Deployen naar Vercel, Netlify en Cloudflare Pages”?

Verbind uw repository met elk platform, configureer buildopdrachten en outputmappen en begrijp preview-deployments voor branches. Je oefent met Frontend Academy 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 Frontend Academy te beginnen?

Ervaring vooraf is niet nodig. Frontend Academy 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, Netlify en Cloudflare Pages”?

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 Frontend Academy?

Ja. Elke les over Frontend Academy 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

GitHub Actions voor frontend: lint, test en build
Deployen naar Vercel, Netlify en Cloudflare Pages
Omgevingsvariabelen in CI
Geautomatiseerde Lighthouse-controles

← Terug naar Frontend Academy