adapter-cloudflare-workers

adapter-cloudflare-workers

SvelteKit adapter that creates a Cloudflare Workers site using a function for dynamic server rendering.

This is very experimental; the adapter API isn't at all fleshed out, and things will definitely change.

Basic Configuration

You will need Wrangler installed on your system

This adapter expects to find a wrangler.toml file in the project root. It will determine where to write static assets and the worker based on the site.bucket and site.entry-point settings.

Generate this file using wrangler from your project directory

wrangler init --site my-site-name

Add the adapter to your svelte.config.js:

import adapter from '@sveltejs/adapter-cloudflare-workers';
export default {
	kit: {
		target: '#svelte',
		adapter: adapter()
	}
};

Now you should get some details from Cloudflare. You should get your:

1. Account ID
2. And your Zone-ID (Optional)

Get them by visiting your Cloudflare-Dashboard and click on any domain. There, you can scroll down and on the left, you can see your details under API.

Then configure your sites build directory and your account-details in the config file:

account_id = 'YOUR ACCOUNT_ID'
zone_id    = 'YOUR ZONE_ID' # optional, if you don't specify this a workers.dev subdomain will be used.
site = {bucket = "./build", entry-point = "./workers-site"}

It's recommended that you add the build and workers-site folders (or whichever other folders you specify) to your .gitignore.

Now, log in with wrangler:

wrangler login

Build your project and publish it:

npm run build && wrangler publish

You are done!

More info on configuring a cloudflare worker site can be found here

Advanced Configuration

esbuild

As an escape hatch, you may optionally specify a function which will receive the final esbuild options generated by this adapter and returns a modified esbuild configuration. The result of this function will be passed as-is to esbuild. The function can be async.

For example, you may wish to add a plugin:

adapterCfw({
	esbuild(options) {
		return {
			...options,
			plugins: []
		};
	}
});

The default options for this version are as follows:

const options = {
	entryPoints: ['.svelte-kit/cloudflare-workers/entry.js'],
	outfile: `${entrypoint}/index.js`,
	bundle: true,
	target: 'es2020',
	platform: 'browser'
};

Changelog

The Changelog for this package is available on GitHub.