DEV Community

Cover image for Deploying SvelteKit using Cloudflare Workers
Ashley Connor
Ashley Connor

Posted on • Originally published at

Deploying SvelteKit using Cloudflare Workers


Recently I've been using SvelteKit as the frontend for a project I've been working on and after some local development I wanted to get it up and
running on the cloud.

I chose Cloudflare Workers as I already have an account with them (this blog is hosted on Cloudflare Pages) however, the documentation on using the adapter-cloudflare-workers is pretty sparse so I'll cover how I got it deployed here.

SvelteKit adapter configuration

If you don't have an existing SvelteKit project you can follow allowing by generating the demo project:

$ npm init svelte@next my-cloudflare-workers-demo
? Which Svelte app template? › - Use arrow-keys. Return to submit.
❯   SvelteKit demo app # select this
    Skeleton project
✔ Use TypeScript? … No / Yes
✔ Add ESLint for code linting? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
✔ Copied project files

$ cd my-cloudflare-workers-demo
$ npm install
Enter fullscreen mode Exit fullscreen mode

Once you're at the root of your project we can install the adapter:

$ npm i @sveltejs/adapter-cloudflare-workers@next
Enter fullscreen mode Exit fullscreen mode

Next, let's configure the adapter in our svelte.config.js:

// first import the adapter
import adapter from '@sveltejs/adapter-cloudflare-workers';

// then in the config object, add an adapter key under kit, and call the imported library
const config = {
    kit: {
        // hydrate the <div id="svelte"> element in src/app.html
        target: '#svelte',
        adapter: adapter()
Enter fullscreen mode Exit fullscreen mode

That's all that's required from SvelteKit. Now onto the Cloudflare Workers configuration.



To deploy to Cloudflare we will install the Wrangler CLI tool and generating an empty configuration:

$ npm i @cloudflare/wrangler -g
$ wrangler init --site my-cloudflare-workers-demo
🕵️  You can find your zone_id in the right sidebar of a zone's overview tab at
🕵️  You can find your account_id in the right sidebar of your account's Workers page
🕵️  You will need to update the following fields in the created wrangler.toml file before continuing:
- account_id
✨  Successfully scaffolded workers site
✨  Successfully created a `wrangler.toml`
Enter fullscreen mode Exit fullscreen mode

Now let's follow the instructions given and login to our Cloudflare dashboard to find our account_id.

Login and then click on the "Workers" menu item on the right-hand side of the page:

Cloudflare Workers menu item

Copy your Account ID from the sidebar:

Account ID

Optionally if you have a domain setup with Cloudflare that you wish to use with your Cloudflare Workers, grab the zone_id from your domain's dashboard.

Now edit your wrangler.toml configuration file with those values:

account_id = '4b05422c8548d995a6132421d4c31bba'
zone_id    = '2ea755fa5c01136f1d07a2013c2d1c6f' # optional, if you don't specify this a subdomain will be used.
Enter fullscreen mode Exit fullscreen mode

Finally, we also need to make some adjustments to the site key pointing it to the directories that will be generated by running build stage later on.

site = {bucket = "./build", entry-point = "./workers-site"}
Enter fullscreen mode Exit fullscreen mode


Next, let's authorize our Wrangler client so we can deploy our project:

$ wrangler login
Allow Wrangler to open a page in your browser? [y/n]
💁  Opened a link in your default browser:
💁  Validating credentials...
✨  Successfully configured. You can find your configuration file at: /Users/ashleyconnor/.wrangler/config/default.toml
Enter fullscreen mode Exit fullscreen mode

Build our project and deploy

First, we need to build our project which we can do using npm run build:

$ npm run build

> my-cloudflare-workers-demo@0.0.1 build
> svelte-kit build

vite v2.3.7 building for production...
✓ 34 modules transformed.
✓ 27 modules transformed.
.svelte-kit/output/server/app.js   64.33kb
> Using @sveltejs/adapter-cloudflare-workers
  ✔ done
Enter fullscreen mode Exit fullscreen mode

Then run the wrangler publish command:

$ wrangler publish
up to date in 0.729s
found 0 vulnerabilities

✨  Built successfully, built project size is 33 KiB.
🌀  Created namespace for Workers Site "__my-cloudflare-workers-demo-workers_sites_assets"
✨  Success
🌀  Uploading site files
✨  Successfully published your script to
Enter fullscreen mode Exit fullscreen mode

Your Server Side Rendered SvelteKit application should be up and running on the URL above.

You can visit the demo SvelteKit application running on Cloudflare Workers here.

Top comments (1)

neorejalist profile image

Hi! Stumbled across this page looking to see if it's a viable solution. On your example page, the Todo's aren't working. Not sure if you're dedicated to fixing it, just wanted to let you know.