patternjavascriptsvelteMajor
SvelteKit adapter configuration for deployment targets
Viewed 0 times
SvelteKit 1.x+
sveltekit adapteradapter-nodeadapter-verceladapter-staticdeploymentsvelte.config.js
Error Messages
Problem
SvelteKit apps fail to deploy because the wrong adapter is used, or the adapter is not configured for the target environment. Default adapter-auto doesn't always detect the platform correctly.
Solution
Install and configure the correct adapter in svelte.config.js:
// For Node.js (self-hosted)
import adapter from '@sveltejs/adapter-node';
export default {
kit: {
adapter: adapter({ out: 'build', precompress: true })
}
};
// For Vercel
import adapter from '@sveltejs/adapter-vercel';
export default {
kit: {
adapter: adapter({ runtime: 'nodejs20.x' })
}
};
// For Cloudflare Pages
import adapter from '@sveltejs/adapter-cloudflare';
export default { kit: { adapter: adapter() } };
// For static sites (no SSR)
import adapter from '@sveltejs/adapter-static';
export default {
kit: {
adapter: adapter({ fallback: '200.html' })
}
};
// Also set in each page that needs static:
// export const prerender = true;
// OR globally:
// export const prerender = true; in +layout.ts
// For Node.js (self-hosted)
import adapter from '@sveltejs/adapter-node';
export default {
kit: {
adapter: adapter({ out: 'build', precompress: true })
}
};
// For Vercel
import adapter from '@sveltejs/adapter-vercel';
export default {
kit: {
adapter: adapter({ runtime: 'nodejs20.x' })
}
};
// For Cloudflare Pages
import adapter from '@sveltejs/adapter-cloudflare';
export default { kit: { adapter: adapter() } };
// For static sites (no SSR)
import adapter from '@sveltejs/adapter-static';
export default {
kit: {
adapter: adapter({ fallback: '200.html' })
}
};
// Also set in each page that needs static:
// export const prerender = true;
// OR globally:
// export const prerender = true; in +layout.ts
Why
SvelteKit is platform-agnostic — adapters transform the build output to match the target runtime. Without the correct adapter, the server entrypoint, asset handling, and edge function configuration will be wrong for the deployment platform.
Gotchas
- adapter-auto detects Vercel/Netlify/Cloudflare but falls back to adapter-node in ambiguous environments
- adapter-static requires all pages to be prerenderable — dynamic routes that depend on request data cannot be static
- Cloudflare Workers have no Node.js APIs — use platform-specific APIs or compatibility flags
- ORIGIN environment variable must be set for non-static deployments to prevent CSRF issues
Code Snippets
Hybrid static/SSR rendering in SvelteKit
// Hybrid: most pages static, some server-rendered
// +layout.ts
export const prerender = true; // default all pages to static
// +page.server.ts (dynamic page — overrides layout)
export const prerender = false;
export const ssr = true;Context
When deploying a SvelteKit application to a hosting platform
Revisions (0)
No revisions yet.