SvelteKit adapter that creates a Cloudflare Workers site using a function for dynamic server rendering.
Comparisons
adapter-cloudflare
– supports all SvelteKit features; builds for Cloudflare Pagesadapter-cloudflare-workers
– supports all SvelteKit features; builds for Cloudflare Workersadapter-static
– only produces client-side static assets; compatible with Cloudflare Pages
Note: Cloudflare Pages' new Workers integration is currently in beta.
Compared toadapter-cloudflare-workers
,adapter-cloudflare
is the preferred approach for most users since building on top of Pages unlocks automatic builds and deploys, preview deployments, instant rollbacks, etc.
From SvelteKit's perspective, there is no difference and no functionality loss when migrating to/from the Workers and the Pages adapters.
Install with npm i -D @sveltejs/adapter-cloudflare-workers@next
, then add the adapter to your svelte.config.js
:
import adapter from '@sveltejs/adapter-cloudflare-workers';
export default {
kit: {
adapter: adapter()
}
};
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
Now you should get some details from Cloudflare. You should get your:
- Account ID
- 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"}
type = "javascript"
[build]
# Assume it's already been built. You can make this "npm run build" to ensure a build before publishing
command = ""
[build.upload]
format = "service-worker"
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