svelte-ssr-worker

A quick demo for rendering Svelte server-side (SSR), but within a Cloudflare Worker!

Live Demo

This is a demo meant to illustrate how to get Svelte SSR in a Cloudflare worker. It is intentionally very minimal – it extends the official svelte-template.

Install

$ git clone https://github.com/lukeed/svelte-ssr-worker
$ cd svelte-ssr-worker
$ npm install

Scripts

The following are npm scripts included in the project.
They are invoked via npm run <name> on the command line; for example: npm run build:dom.

build

This is an alias for sequentially running the build:dom and build:ssr scripts.

Note: These are sequential because build:ssr imports the public/index.html that build:dom produces.

build:dom

Builds the client for production, using the src/index.dom.js entry point.

All files within the /public directory comprise your front-end client application.

Important: These must be uploaded to a storage bucket and made available on a CDN location.
Alternatively, you may upload /public as a static Workers Site.

build:ssr

Builds your Cloudflare Worker code, using the src/index.ssr.js entry point.

The final worker file is saved to build/index.js, which can be deployed to your Cloudflare Worker directly.

Note: Deployment is not included in this template.

Important: This script must run after build:dom because it relies on its public/index.html output.

start

Starts a local development server.
This is used to preview/visit your front-end application only.

Note: This does not run your Worker code.

watch

This is an alias for running the start and watch:dom scripts simultaneously.

watch:dom

Watches your src/index.dom.js and its imports for changes.

watch:ssr

Watches your src/index.ssr.js and its imports for changes.

Deploy

You should have a storage bucket setup and attached to a CDN ahead of time.
Once the CDN address is known, you will need to update the {{CDN}} value within config/shared.js.

Then, after a successful build, you will need to:

• Upload public/* to your storage bucket (or similar)
• Upload build/index.js to Cloudflare Workers

Note: Cloudflare's wrangler can handle both of these steps!

You're done~! 🎉

License

MIT © Luke Edwards