Deploying SvelteKit — Svelte & SvelteKit | Sabaoon Academy

SvelteKit uses adapters to transform your app for different deployment targets. You pick an adapter, run npm run build, and get output tailored for that platform.

How Adapters Work

The build process has two steps:

Svelte compiles components to JavaScript
The adapter transforms the output for the target platform

npm run build
          ↓
  SvelteKit build
          ↓
   Adapter transform
          ↓
  Platform-specific output

Vercel (Recommended for Most Projects)

npm install -D @sveltejs/adapter-vercel

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

export default {
  kit: {
    adapter: adapter({
      runtime: 'nodejs22.x',   // or 'edge' for Edge Functions
    }),
  },
};

Push to GitHub and connect the repo on vercel.com. Zero additional configuration needed — Vercel detects SvelteKit automatically.

Node.js Server

For self-hosted deployments:

npm install -D @sveltejs/adapter-node

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

export default {
  kit: {
    adapter: adapter({ out: 'build' }),
  },
};

Build and run:

npm run build
node build/index.js  # starts an Express-like server on PORT (default 3000)

Set the PORT environment variable to change the port.

Cloudflare Pages / Workers

npm install -D @sveltejs/adapter-cloudflare

import adapter from '@sveltejs/adapter-cloudflare';

export default {
  kit: { adapter: adapter() },
};

Your app runs at the edge in Cloudflare's global network. Use platform.env to access KV, D1, R2, and other Cloudflare bindings from your load functions and API routes.

Static Site (No Server)

For fully static sites (no server-side rendering):

npm install -D @sveltejs/adapter-static

import adapter from '@sveltejs/adapter-static';

export default {
  kit: {
    adapter: adapter({
      pages:    'build',
      assets:   'build',
      fallback: '200.html',   // for SPA mode
    }),
  },
};

Every page must be prerenderable — no server-only code, no +page.server.js with dynamic logic.

Mark pages for prerendering:

// +page.js or +layout.js
export const prerender = true;

Or enable it globally in svelte.config.js:

export default {
  kit: {
    adapter: adapter(),
    prerender: { default: true },
  },
};

Environment Variables

SvelteKit splits env vars into public and private:

# .env
SECRET_DB_URL=postgres://...      # server only
PUBLIC_API_URL=https://api.mysite.com  # safe to expose

// Server-side (load functions, actions, API routes)
import { SECRET_DB_URL } from '$env/static/private';

// Client-side (components, client-only +page.js)
import { PUBLIC_API_URL } from '$env/static/public';

Using $env/static/* gives you build-time type checking — typos in env var names are caught before deployment.

Deployment Checklist

Ctrl+Enter

HTML

CSS

var items = [
'Install and configure the correct adapter',
'Set all required environment variables on the host',
'Run npm run build locally and check for errors',
'Test the production build with node build/index.js',
'Set up a custom domain and SSL certificate',
'Add health check endpoint for uptime monitoring',
'Enable error logging (Sentry, Logtail, etc.)',
'Review Content Security Policy headers',
];

var ul = document.getElementById('items');
var checked = [];

function render() {
ul.innerHTML = '';
items.forEach(function(text, i) {
  var li = document.createElement('li');
  li.className = 'item' + (checked.includes(i) ? ' done' : '');
  li.innerHTML = '<div class="check"></div><span class="label">' + text + '</span>';
  li.onclick = function() {
    var idx = checked.indexOf(i);
    if (idx === -1) checked.push(i);
    else            checked.splice(idx, 1);
    render();
  };
  ul.appendChild(li);
});

var status = document.getElementById('status');
if (checked.length === items.length) {
  status.textContent = '✓ Ready to deploy!';
  status.className = 'status complete';
} else {
  status.textContent = checked.length + ' / ' + items.length + ' complete';
  status.className = 'status';
}
console.log(checked.length + '/' + items.length + ' checks done');
}

render();

Preview

Adapter Comparison

Adapter	Best for	Runtime
`adapter-vercel`	Most projects	Node or Edge
`adapter-cloudflare`	Global edge, low latency	Cloudflare Workers
`adapter-node`	Self-hosted, Docker	Node.js
`adapter-static`	Blogs, docs, no SSR	CDN / static host
`adapter-netlify`	Netlify teams	Node or Edge