Home›Svelte in 5 Days›Day 5
Day 5 of 5
⏱ ~60 minutes
Svelte in 5 Days — Day 5

Deploy to Production

SvelteKit can deploy as a Node server, serverless functions, or static files depending on the adapter. This lesson covers adapters, environment variables, and deploying to Vercel and Cloudflare Pages.

SvelteKit Adapters

Adapters transform your SvelteKit build for a specific deployment target. Choose based on where you're hosting.

Install and configure an adapter
# Vercel (auto-detected)
npm install -D @sveltejs/adapter-vercel

# Netlify
npm install -D @sveltejs/adapter-netlify

# Cloudflare Pages
npm install -D @sveltejs/adapter-cloudflare

# Static (no server — SSG only)
npm install -D @sveltejs/adapter-static
svelte.config.js
import adapter from '@sveltejs/adapter-vercel';

export default {
  kit: {
    adapter: adapter({
      runtime: 'nodejs20.x'
    })
  }
};

Environment Variables

.env
# Variables starting with PUBLIC_ are exposed to the browser
PUBLIC_API_URL=https://api.example.com

# Private: server-only
DATABASE_URL=postgres://...
SECRET_KEY=abc123
Using env vars
// In server-side code (+page.server.js, +server.js)
import { DATABASE_URL, SECRET_KEY } from '$env/static/private';

// In both server and client code
import { PUBLIC_API_URL } from '$env/static/public';

Deploy to Vercel

Terminal
# Option 1: Vercel CLI
npm i -g vercel
vercel

# Option 2: Connect GitHub repo at vercel.com
# Vercel auto-detects SvelteKit and configures everything

Deploy to Cloudflare Pages

Terminal
# Connect your GitHub repo at pages.cloudflare.com
# Build command: npm run build
# Output directory: .svelte-kit/cloudflare
# Add environment variables in the Pages dashboard
💡
Cloudflare Pages with adapter-cloudflare runs your SvelteKit app on Cloudflare Workers — globally distributed, sub-millisecond cold starts, and a generous free tier. It's my top pick for SvelteKit production deployments.
📝 Day 5 Exercise
Deploy Your SvelteKit App Live
  1. Install @sveltejs/adapter-vercel and update svelte.config.js.
  2. Add at least one public environment variable and use it in your app.
  3. Run npm run build locally and confirm no errors.
  4. Push to GitHub and connect the repo to Vercel or Cloudflare Pages.
  5. Verify SSR works by viewing source — you should see HTML content before JavaScript loads.

Day 5 Summary

  • Adapters transform your SvelteKit app for the target platform — pick the one matching your host.
  • $env/static/private for server-only secrets. $env/static/public for browser-safe vars.
  • Vercel auto-detects SvelteKit — zero config needed with adapter-vercel.
  • Cloudflare Pages + adapter-cloudflare = globally distributed, fast, generous free tier.
→
← Previous
Day 4: Server-Side Rendering
Course Complete
Back to Svelte in 5 Days
→
Finished this lesson?