I’ve spent the last few months migrating several client projects to the edge, and if there is one combination that consistently wins on developer experience and latency, it’s SvelteKit and Cloudflare Pages. This deploying sveltekit to cloudflare pages guide is designed to take you from a local development environment to a globally distributed production site in under ten minutes.

When I first started with SvelteKit, I tried using standard Node.js hosting, but the cold starts were frustrating. Moving to Cloudflare Pages shifted my logic to the edge, meaning my users in Tokyo and New York get nearly identical response times. If you’re also looking for a way to manage content for these sites, you might want to explore the best headless CMS for SvelteKit to keep your deployment lean.

Fundamentals of SvelteKit on the Edge

Before we dive into the clicks and code, it’s important to understand how this works. SvelteKit uses a concept called “Adapters.” By default, a SvelteKit project is agnostic about where it will be hosted. The adapter transforms the output of the build process into a format that a specific platform understands.

For Cloudflare Pages, we use @sveltejs/adapter-cloudflare. Unlike the adapter-auto, which tries to guess your environment, explicitly using the Cloudflare adapter gives you access to Cloudflare-specific features like KV namespaces, D1 databases, and Durable Objects.

Deep Dive: Configuring the Adapter

Step 1: Installing the Adapter

First, you need to swap out the default adapter. In my experience, explicitly defining your adapter prevents “deployment surprises” when your CI/CD pipeline runs.

npm install -D @sveltejs/adapter-cloudflare

Step 2: Updating svelte.config.js

Now, you must tell SvelteKit to use the Cloudflare adapter. Update your svelte.config.js file as follows:

import adapter from '@sveltejs/adapter-cloudflare';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	preprocess: vitePreprocess(),
	kit: {
		adapter: adapter() 
	}
};

export default config;

Step 3: Handling Environment Variables

One common pitfall I’ve encountered is the difference between $env/static/private and $env/dynamic/private. On Cloudflare Pages, static variables are baked in at build time. If you change a variable in the Cloudflare dashboard, you must redeploy the site for static variables to update. For values that change without a redeploy, use dynamic imports.

Implementation: The Deployment Process

Now that the code is ready, let’s get it live. I recommend the Git-integrated workflow for its seamless preview deployments.

  1. Push your code: Commit your changes and push them to GitHub or GitLab.
  2. Connect to Cloudflare: Log into your Cloudflare dashboard, navigate to Workers & Pages → Create application → Pages → Connect to Git.
  3. Build Settings: Select your repository. Cloudflare should automatically detect SvelteKit, but if it doesn’t, use these settings:
    • Framework preset: SvelteKit
    • Build command: npm run build
    • Build output directory: .svelte-kit/cloudflare
  4. Deploy: Click “Save and Deploy.”

As shown in the image below, you can verify the build logs to ensure the adapter successfully generated the worker script.

Cloudflare Pages build logs showing a successful SvelteKit deployment process
Cloudflare Pages build logs showing a successful SvelteKit deployment process

Principles for High-Performance Edge Sites

Deploying is the easy part; optimizing is where the real work begins. When I build for the edge, I follow three main principles:

If you are coming from a Next.js background, you’ll find the performance profile similar to the Edge Runtime. For those interested in further optimization, check out my guide on optimizing lighthouse scores, as many of the Core Web Vital principles apply directly to SvelteKit.

Recommended Tools for SvelteKit Developers

Tool Purpose Why I Use It
Wrangler Cloudflare CLI Essential for testing KV and D1 locally.
SvelteCheck Type Checking Prevents runtime errors before the build reaches Cloudflare.
Better-Auth Authentication Works flawlessly with edge runtimes and SvelteKit.

Final Checklist for Production