SvelteKitBuild and deploy

Cloudflare

To deploy to Cloudflare Workers, use adapter-cloudflare.

This adapter will be installed by default when you use adapter-auto. If you plan on staying with Cloudflare, you can switch from adapter-auto to using this adapter directly so that event.platform is emulated during local development, type declarations are automatically applied, and the ability to set Cloudflare-specific options is provided.

Comparisons

adapter-cloudflare – supports all SvelteKit features; builds for Cloudflare Workers Static Assets
adapter-cloudflare-workers – deprecated. Supports all SvelteKit features; builds for Cloudflare Workers Sites
adapter-static – only produces client-side static assets; compatible with Cloudflare Workers Static Assets and Cloudflare Pages

Usage

Install with npm i -D @sveltejs/adapter-cloudflare, then add the adapter to your vite.config.js:

vite.config

import import adapteradapter from '@sveltejs/adapter-cloudflare';
import { function sveltekit(config?: KitConfig & Omit<Options, "onwarn"> & Pick<SvelteConfig, "vitePlugin">): Promise<Plugin[]>Returns the SvelteKit Vite plugins.
Any options that don't belong to SvelteKit are passed through to vite-plugin-svelte.
Since version 3.0.0 you must pass configuration directly.
Since version 2.62.0 you can pass configuration directly, in which case svelte.config.js is ignored.
referencesveltekit } from '@sveltejs/kit/vite';
import { function defineConfig(config: UserConfig): UserConfig (+5 overloads)Type helper to make it easier to use vite.config.ts
accepts a direct 
{@link 
UserConfig
}
 object, or a function that returns it.
The function receives a 
{@link 
ConfigEnv
}
 object.
defineConfig } from 'vite';

export default function defineConfig(config: UserConfig): UserConfig (+5 overloads)Type helper to make it easier to use vite.config.ts
accepts a direct 
{@link 
UserConfig
}
 object, or a function that returns it.
The function receives a 
{@link 
ConfigEnv
}
 object.
defineConfig({
	UserConfig.plugins?: PluginOption[] | undefinedArray of vite plugins to use.
plugins: [
		function sveltekit(config?: KitConfig & Omit<Options, "onwarn"> & Pick<SvelteConfig, "vitePlugin">): Promise<Plugin[]>Returns the SvelteKit Vite plugins.
Any options that don't belong to SvelteKit are passed through to vite-plugin-svelte.
Since version 3.0.0 you must pass configuration directly.
Since version 2.62.0 you can pass configuration directly, in which case svelte.config.js is ignored.
referencesveltekit({
			KitConfig.adapter?: Adapter | undefinedYour adapter is run when executing vite build. It determines how the output is converted for different platforms.
@default
undefinedadapter: import adapteradapter({
				// See below for an explanation of these options
				config: undefinedconfig: var undefinedundefined,
				platformProxy: {
    configPath: undefined;
    environment: undefined;
    persist: undefined;
}platformProxy: {
					configPath: undefinedconfigPath: var undefinedundefined,
					environment: undefinedenvironment: var undefinedundefined,
					persist: undefinedpersist: var undefinedundefined
				},
				fallback: stringfallback: 'plaintext'
			})
		})
	]
});

Options

config

Path to your Wrangler configuration file. If you would like to use a Wrangler configuration filename other than wrangler.jsonc, wrangler.json, or wrangler.toml you can specify it using this option.

platformProxy

Preferences for the emulated platform.env local bindings. See the getPlatformProxy Wrangler API documentation for a full list of options.

fallback

Whether to render a plaintext 404.html page or a rendered SPA fallback page for non-matching asset requests.

The default behaviour is to return a null-body 404-status response for non-matching assets requests. However, if the assets.not_found_handling Wrangler configuration setting is set to "404-page", this page will be served if a request fails to match an asset. If assets.not_found_handling is set to "single-page-application", the adapter will render a SPA fallback index.html page regardless of the fallback option specified.

Basic configuration

When building for Cloudflare Workers, this adapter expects to find a Wrangler configuration file in the project root. It should look something like this:

wrangler

{
	"name": "<any-name-you-want>",
	"main": ".svelte-kit/cloudflare/_worker.js",
	"compatibility_flags": ["nodejs_als"],
	"compatibility_date": "<YYYY-MM-DD>",
	"assets": {
		"binding": "ASSETS",
		"directory": ".svelte-kit/cloudflare",
	}
}

Deployment

You can use Wrangler to deploy your application by running npx wrangler deploy or use the Cloudflare Git integration to enable automatic builds and deployments on push.

Runtime APIs

The env object contains your project's bindings, which consist of KV/DO namespaces, etc. It is passed to SvelteKit via the platform property, along with ctx, caches, and cf, meaning that you can access it in hooks and endpoints:

+server

/** @type {import('./$types').RequestHandler} */
export async function POST({ request, platform }) {
	const x = platform?.env.YOUR_DURABLE_OBJECT_NAMESPACE.idFromName('x');
}

import type { RequestHandler } from './$types';
export const POST: RequestHandler = async ({ request, platform }) => {
	const x = platform?.env.YOUR_DURABLE_OBJECT_NAMESPACE.idFromName('x');
};

SvelteKit's built-in $app/env/* modules should be preferred for environment variables.

After configuring the bindings in your Wrangler configuration file, you can add type-safety by running npx wrangler types and adding the generated types to your tsconfig.json.

tsconfig

{
	"compilerOptions": {
		"types": ["worker-configuration.d.ts"]
	}
}

Finally, add Env to the platform.env property in src/app.d.ts:

src/app.d

declare global {
	namespace App {
		interface interface App.PlatformIf your adapter provides platform-specific context via event.platform, you can specify it here.
Platform {
			App.Platform.env: Envenv: Env;
		}
	}
}

export {};

Testing locally

Cloudflare specific values in the platform property are emulated during dev and preview modes. Local bindings are created based on your Wrangler configuration file and are used to populate platform.env during development and preview. Use the adapter config platformProxy option to change your preferences for the bindings.

For testing the build, you should use Wrangler version 4. Once you have built your site, run wrangler dev .svelte-kit/cloudflare/_worker.js.

Headers and redirects

The _headers and _redirects files, specific to Cloudflare, can be used for static asset responses (like images) by putting them into the project root folder.

However, they will have no effect on responses dynamically rendered by SvelteKit, which should return custom headers or redirect responses from server endpoints or with the handle hook.

Troubleshooting

Node.js compatibility

If you would like to enable Node.js compatibility, you can add the nodejs_compat compatibility flag to your Wrangler configuration file:

wrangler

{
	"compatibility_flags": ["nodejs_compat"]
}

Worker size limits

When deploying your application, the server generated by SvelteKit is bundled into a single file. Wrangler will fail to publish your worker if it exceeds the size limits after minification. You're unlikely to hit this limit usually, but some large libraries can cause this to happen. In that case, you can try to reduce the size of your worker by only importing such libraries on the client side. See the FAQ for more information.

Accessing the file system

You can't use fs in Cloudflare Workers.

Instead, use the read function from $app/server to access your files. It works by fetching the file from the deployed public assets location.

Alternatively, you can prerender the routes in question.

Migrating from Pages

Cloudflare Workers is now preferred over Pages because of its broader feature set. You should follow the official migration guide to redeploy your project to Workers before deleting your Pages project.

Migrating from Workers Sites

Cloudflare no longer recommends using Workers Sites and instead recommends using Workers Static Assets. To migrate, replace @sveltejs/adapter-cloudflare-workers with @sveltejs/adapter-cloudflare and remove all site configuration settings from your Wrangler configuration file, then add the assets.directory and assets.binding configuration settings:

vite.config

import import adapteradapter from '@sveltejs/adapter-cloudflare';
import { function sveltekit(config?: KitConfig & Omit<Options, "onwarn"> & Pick<SvelteConfig, "vitePlugin">): Promise<Plugin[]>Returns the SvelteKit Vite plugins.
Any options that don't belong to SvelteKit are passed through to vite-plugin-svelte.
Since version 3.0.0 you must pass configuration directly.
Since version 2.62.0 you can pass configuration directly, in which case svelte.config.js is ignored.
referencesveltekit } from '@sveltejs/kit/vite';
import { function defineConfig(config: UserConfig): UserConfig (+5 overloads)Type helper to make it easier to use vite.config.ts
accepts a direct 
{@link 
UserConfig
}
 object, or a function that returns it.
The function receives a 
{@link 
ConfigEnv
}
 object.
defineConfig } from 'vite';

export default function defineConfig(config: UserConfig): UserConfig (+5 overloads)Type helper to make it easier to use vite.config.ts
accepts a direct 
{@link 
UserConfig
}
 object, or a function that returns it.
The function receives a 
{@link 
ConfigEnv
}
 object.
defineConfig({
	UserConfig.plugins?: PluginOption[] | undefinedArray of vite plugins to use.
plugins: [
		function sveltekit(config?: KitConfig & Omit<Options, "onwarn"> & Pick<SvelteConfig, "vitePlugin">): Promise<Plugin[]>Returns the SvelteKit Vite plugins.
Any options that don't belong to SvelteKit are passed through to vite-plugin-svelte.
Since version 3.0.0 you must pass configuration directly.
Since version 2.62.0 you can pass configuration directly, in which case svelte.config.js is ignored.
referencesveltekit({
			KitConfig.adapter?: Adapter | undefinedYour adapter is run when executing vite build. It determines how the output is converted for different platforms.
@default
undefinedadapter: import adapteradapter()
		})
	]
});

wrangler.toml

wrangler

site.bucket = ".cloudflare/public"
assets.directory = ".cloudflare/public"
assets.binding = "ASSETS" # Exclude this if you don't have a `main` key configured.

wrangler.jsonc

wrangler

{
	"site": {
		"bucket": ".cloudflare/public"
	},
	"assets": {
		"directory": ".cloudflare/public",
		"binding": "ASSETS" // Exclude this if you don't have a `main` key configured.
	}
}

Edit this page on GitHub llms.txt

previous next

Single-page apps Cloudflare Workers