Deploying SvelteKit Apps
Svelte meta-framework with adapters for Vercel, Netlify, Cloudflare, Node, and static SSG.
PlatformsIntermediate
Why
SvelteKit combines Svelte's compiled output with file-based routing, SSR, and adapters. The adapter system lets the same codebase deploy to edge, serverless, or Node with one config change.
Platform-as-a-Service adoption grew 24% in 2024 as teams shift from VM management to git-push deploys. the cloud infrastructure market reached $330B in 2024, growing 22% year-over-year (Synergy Research), and PaaS layers capture the majority of new workloads.
When
Use SvelteKit for full-stack Svelte apps needing routing, SSR, or form actions. Choose adapter-static for pure SSG blogs/docs.
How
1. Build — npm run build produces .svelte-kit/output/ (adapter-specific)
2. Vercel — @sveltejs/adapter-vercel, git push auto-deploys
3. Netlify — @sveltejs/adapter-netlify
4. Cloudflare — @sveltejs/adapter-cloudflare, runs on Workers
5. Node — @sveltejs/adapter-node, node build/index.js
6. Static — @sveltejs/adapter-static for SSG, configure pages/fallback
7. Form actions — +page.server.ts default action handles form POST
Example
// svelte.config.js — Vercel adapter
import adapter from "@sveltejs/adapter-vercel";
import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
export default {
preprocess: vitePreprocess(),
kit: { adapter: adapter() },
};
// src/routes/+page.server.ts — form action
import type { Actions } from "./$types";
export const actions: Actions = {
default: async ({ request }) => {
const data = await request.formData();
return { success: true, name: data.get("name") };
},
};
// Dockerfile — Node adapter
FROM node:20-alpine AS build
WORKDIR /app
COPY . .
RUN npm ci && npm run build
FROM node:20-alpine
WORKDIR /app
COPY --from=build /app/build ./build
COPY --from=build /app/package*.json ./
RUN npm ci --omit=dev
EXPOSE 3000
CMD ["node", "build/index.js"]
Common Problems
- ⚠Adapter not installed — defaults to auto, fails on platform, install and set explicitly
- ⚠Form action CSRF fails — origin check, set csrf.checkOrigin or configure allowed origins
- ⚠Static adapter 404 on dynamic routes — forgot prerender entries in +page.ts
Best Practices
- ✓Pin adapter version matching @sveltejs/kit — version mismatch causes build failures
- ✓Use load functions for data fetching — runs on server for SSR, hydrates on client for navigation
- ✓Set up health checks and graceful shutdown — handle SIGTERM to drain in-flight requests before exit