0Pricing
Frontend Academy · Lesson

Deploying to Vercel Netlify and Cloudflare Pages

Connect your repo to each platform, configure build commands and output directories, and understand preview deployments for branches.

Deploying to Vercel Netlify and Cloudflare Pages is a free Frontend Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Frontend Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

The Modern Frontend Hosting Trio

Vercel, Netlify, and Cloudflare Pages are the leading platforms for deploying frontend apps. All offer: Git-based deploys, preview branches, custom domains, edge CDN, serverless functions. Pick one and stick with it.

Vercel — Built for Next.js

Created by the Next.js team. Best-in-class Next.js integration: zero-config Image Optimization, ISR, Edge Functions, Speed Insights. Also supports Vite, Nuxt, Astro, and most static frameworks.

Deploying to Vercel

Connect a GitHub/GitLab/Bitbucket repo. Vercel auto-detects the framework, runs build, and deploys.

# 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.

vercel.json Configuration

Override defaults (build commands, redirects, headers, rewrites).

{
  "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 — The Original

Pioneered modern static deploys. Strong form handling, identity, analytics. Netlify Functions and Edge Functions for serverless. Great Vite/Hugo/Eleventy support.

Deploying to Netlify

Connect a repo or drag-and-drop a built folder. Configure via dashboard or 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

Local dev with serverless functions.

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

Cloudflare Pages

Deploys to Cloudflare's global edge network. Pages Functions for serverless on Workers runtime. Generous free tier. Excellent for Astro, Hono, Remix.

Deploying to Cloudflare Pages

Connect a repo via the Cloudflare dashboard. Or use 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 for Pages

Cloudflare Pages uses wrangler.toml for Workers/Functions config.

# 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 Deployments

All three platforms create a unique URL for every PR branch. Reviewers can click and test changes in isolation. Standard team workflow now.

Environment Variables

All three offer per-environment variables (production, preview, development) via dashboard or CLI. Frontend vars must be prefixed (Vite: VITE_, Next: NEXT_PUBLIC_) to ship to the browser.

# 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

Custom Domains and SSL

All three handle SSL certificates automatically (Let's Encrypt). Point your DNS A/CNAME record at their target — they issue and renew certs. Custom domains free on all paid tiers.

Choosing Among the Three

Vercel: best for Next.js, polished DX, slightly pricier. Netlify: best forms/identity, mature plugin ecosystem. Cloudflare Pages: best edge performance, lowest cost at scale, great Workers integration. All three are excellent.

Quick Check

What's the standard way to create a deployable preview URL for a pull request on Vercel/Netlify/Cloudflare Pages?

Recap: Frontend Hosting

Vercel: best Next.js integration. Netlify: forms/identity/plugins. Cloudflare Pages: edge performance, lowest cost. All three: Git-based auto-deploys, preview URLs per PR, env vars per environment, automatic SSL, custom domains. Configure via dashboard or per-platform config file (vercel.json, netlify.toml, wrangler.toml).

Frequently asked questions

Is the “Deploying to Vercel Netlify and Cloudflare Pages” lesson free?

Yes — the full text of “Deploying to Vercel Netlify and Cloudflare Pages” is free to read here on the web, and the Frontend Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Frontend Academy course, upgrade to CoddyKit PRO.

What will I learn in “Deploying to Vercel Netlify and Cloudflare Pages”?

Connect your repo to each platform, configure build commands and output directories, and understand preview deployments for branches. You practise Frontend Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Frontend Academy?

No prior experience is required. Frontend Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Deploying to Vercel Netlify and Cloudflare Pages” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Frontend Academy lesson?

Yes. Every Frontend Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. GitHub Actions for Frontend: lint test build
  2. Deploying to Vercel Netlify and Cloudflare Pages
  3. Environment Variables in CI
  4. Automated Lighthouse Checks
← Back to Frontend Academy