Cloudflare Workers

To deploy to Cloudflare Workers, use adapter-cloudflare-workers.

Unless you have a specific reason to use this adapter, we recommend using adapter-cloudflare instead.

Requires Wrangler v2.

Usage permalink

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

ts
import adapter from '@sveltejs/adapter-cloudflare-workers';
Cannot find module '@sveltejs/adapter-cloudflare-workers' or its corresponding type declarations.2307Cannot find module '@sveltejs/adapter-cloudflare-workers' or its corresponding type declarations.

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

Basic Configuration permalink

This adapter expects to find a wrangler.toml file in the project root. It should look something like this:

name = "<your-service-name>"
account_id = "<your-account-id>"

main = "./.cloudflare/worker.js"
site.bucket = "./.cloudflare/public"

build.command = "npm run build"

compatibility_date = "2021-11-12"
workers_dev = true

<your-service-name> can be anything. <your-account-id> can be found by logging into your Cloudflare dashboard and grabbing it from the end of the URL:

https://dash.cloudflare.com/<your-account-id>

You should add the .cloudflare directory (or whichever directories you specified for main and site.bucket) to your .gitignore.

You will need to install wrangler and log in, if you haven't already:

npm i -g wrangler
wrangler login

Then, you can build your app and deploy it:

wrangler publish

Custom config permalink

If you would like to use a config file other than wrangler.toml, you can do like so:

ts
import adapter from '@sveltejs/adapter-cloudflare-workers';
Cannot find module '@sveltejs/adapter-cloudflare-workers' or its corresponding type declarations.2307Cannot find module '@sveltejs/adapter-cloudflare-workers' or its corresponding type declarations.

export default {
    kit: {
        adapter: adapter({ config: '<your-wrangler-name>.toml' })
    }
};

Environment variables permalink

The env object, containing KV/DO namespaces etc, is passed to SvelteKit via the platform property along with context and caches, meaning you can access it in hooks and endpoints:

ts
export async function POST({ request, platform }) {
Binding element 'request' implicitly has an 'any' type.
Binding element 'platform' implicitly has an 'any' type.7031
7031Binding element 'request' implicitly has an 'any' type.
Binding element 'platform' implicitly has an 'any' type.
    const x = platform.env.YOUR_DURABLE_OBJECT_NAMESPACE.idFromName('x');
}

To make these types available to your app, reference them in your src/app.d.ts:

declare global {
    namespace App {
        interface Platform {
			env?: {
				YOUR_KV_NAMESPACE: KVNamespace;
				YOUR_DURABLE_OBJECT_NAMESPACE: DurableObjectNamespace;
			};
        }
    }
}

export {};

platform.env is only available in the production build. Use wrangler to test it locally

Troubleshooting permalink

Worker size limits permalink

When deploying to workers, 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 permalink

You can't access the file system through methods like fs.readFileSync in Serverless/Edge environments. If you need to access files that way, do that during building the app through prerendering. If you have a blog for example and don't want to manage your content through a CMS, then you need to prerender the content (or prerender the endpoint from which you get it) and redeploy your blog everytime you add new content.