"Step-by-step guide to deploying your SvelteKit frontend to Vercel. Free SSL, automatic deployments, and global CDN included."

12 min read

Deploying SvelteKit to Vercel

Vercel is the optimal platform for deploying SvelteKit applications. Created by the same team behind Svelte, Vercel offers first-class support with automatic deployments, global CDN, and serverless functions.

Why Vercel?

  • Native SvelteKit support: Zero configuration required
  • Automatic deployments: Deploy on every git push
  • Preview deployments: Test changes with unique URLs
  • Global edge network: Fast loading worldwide
  • Serverless functions: API routes work out of the box
  • Free SSL: Automatic HTTPS certificates

Prerequisites

Before starting:

  • Git repository with your SvelteKit code
  • Vercel account (free tier available)
  • Node.js 20+ installed locally

Install Development Tools

We recommend using mise (version manager) and pnpm (package manager) instead of npm:

Install mise (version manager for Node.js):

# macOS/Linux
curl https://mise.run | sh
# Add to your shell (follow the post-install instructions)
echo 'eval "$(mise activate)"' >> ~/.bashrc
# or for zsh
echo 'eval "$(mise activate zsh)"' >> ~/.zshrc

Install Node.js via mise:

mise use node@20

Install pnpm:

curl -fsSL https://get.pnpm.io/install.sh | sh -

Why pnpm instead of npm?

  • Faster: Uses content-addressable storage, shared across projects
  • Disk efficient: Packages are stored once, hard-linked into projects
  • Strict: Prevents accidental access to undeclared dependencies
  • Reliable: Lockfile format is more deterministic than npm

Step 1: Prepare Your Project

Configure Adapter

Ensure your svelte.config.js uses the Vercel adapter:

import adapter from '@sveltejs/adapter-vercel';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

const config = {
  preprocess: vitePreprocess(),
  kit: {
    adapter: adapter({
      // Optional: specify runtime
      runtime: 'nodejs18.x'
    })
  }
};

export default config;

Install the adapter if needed:

cd frontend
pnpm install -D @sveltejs/adapter-vercel

Environment Variables

Create frontend/.env.production:

PUBLIC_API_URL=https://tcs-svc-9k2m.yourdomain.com
PUBLIC_GRAPHQL_ENDPOINT=https://tcs-svc-9k2m.yourdomain.com/graphql
PUBLIC_APP_URL=https://your-app.vercel.app

Important: Do not commit secrets. Use Vercel's dashboard for sensitive values.

Security Note: The backend URL uses an obscure subdomain (tcs-svc-9k2m) instead of predictable names like api or backend. This hides your API from automated subdomain scanners and reduces attack surface. Always choose unguessable subdomain names for your backend services.

Build Configuration

Ensure your vite.config.ts is compatible:

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [sveltekit()],
  build: {
    // Ensure source maps for debugging
    sourcemap: true
  }
});

Step 2: Install Vercel CLI

pnpm add -g vercel

Step 3: Deploy

First Deployment

  1. Login to Vercel:
vercel login
  1. Deploy from your project directory:
cd frontend
vercel

  1. Answer the prompts:

    • "Set up and deploy?" → Yes
    • "Which scope?" → Your account
    • "Link to existing project?" → No (first time)
    • "What's your project name?" → your-app-name

  2. Wait for deployment to complete:

🔍  Inspect: https://vercel.com/yourname/your-app/abc123
✅  Production: https://your-app.vercel.app

Subsequent Deployments

After initial setup, just push to git:

git push origin main

Vercel automatically deploys from your connected git repository.

Step 4: Connect Git Repository

For automatic deployments:

  1. Go to vercel.com/dashboard
  2. Select your project
  3. Click "Settings" → "Git"
  4. Ensure your repository is connected
  5. Configure production branch (usually main)

Step 5: Configure Environment Variables

Via Dashboard

  1. Go to Project Settings → Environment Variables
  2. Add variables:
Name Value Environment
PUBLIC_API_URL https://tcs-svc-9k2m.yourapp.com Production
PUBLIC_API_URL https://tcs-stg-4m7k.yourapp.com Preview

Via CLI

vercel env add PUBLIC_API_URL
# Enter value when prompted
# Select environment (Production, Preview, Development)

Step 6: Custom Domain

Add Domain

  1. Project Settings → Domains
  2. Enter your domain: yourapp.com
  3. Follow DNS configuration instructions

Configure DNS

Vercel provides DNS records to add:

Option A: A Record

Type: A
Name: @
Value: 76.76.21.21

Option B: CNAME (for www)

Type: CNAME
Name: www
Value: cname.vercel-dns.com

Verify DNS

DNS propagation takes time. Check status in Vercel dashboard.

Step 7: Configure Build Settings

Build Command

Usually auto-detected, but can be customized:

Project Settings → Build & Development Settings:

  • Framework Preset: SvelteKit
  • Build Command: pnpm run build
  • Output Directory: .svelte-kit/output (auto-detected)
  • Install Command: pnpm install

Root Directory

If your frontend is in a subdirectory:

Project Settings → General → Root Directory:

frontend

Advanced Configuration

vercel.json

Create frontend/vercel.json for advanced options:

{
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        {
          "key": "X-Content-Type-Options",
          "value": "nosniff"
        },
        {
          "key": "X-Frame-Options",
          "value": "DENY"
        }
      ]
    }
  ],
  "redirects": [
    {
      "source": "/old-path",
      "destination": "/new-path",
      "permanent": true
    }
  ]
}

Serverless Function Configuration

For API routes, configure function size:

{
  "functions": {
    "src/routes/api/**/*.ts": {
      "maxDuration": 30
    }
  }
}

Troubleshooting

Build Failures

Error: "Cannot find module"

Solution:

# Delete node_modules and lock file
rm -rf node_modules pnpm-lock.yaml
pnpm install

# Commit lock file
git add pnpm-lock.yaml
git commit -m "fix: regenerate lock file"
git push

Environment Variables Not Available

Ensure variables:

  • Are prefixed with PUBLIC_ if used in browser
  • Are added to correct environment (Production/Preview)
  • Are redeployed after adding

API Routes Not Working

Check adapter configuration:

// svelte.config.js
import adapter from '@sveltejs/adapter-vercel';

export default {
  kit: {
    adapter: adapter({
      // Ensure this is set
      runtime: 'nodejs18.x'
    })
  }
};

404 on Dynamic Routes

Add vercel.json:

{
  "rewrites": [
    {
      "source": "/(.*)",
      "destination": "/"
    }
  ]
}

Production Checklist

Before announcing your deployment:

  • Environment variables set for production
  • Custom domain configured (if applicable)
  • SSL certificate active
  • Build succeeds without warnings
  • API endpoints connect to backend
  • Authentication flows work
  • Error tracking configured
  • Analytics configured (optional)

Next Steps

Your frontend is deployed. Now deploy your backend:

Or learn about: