Cloudflare

Adapter for building SvelteKit applications on Cloudflare Pages with Workers integration.

If you're using adapter-auto, you don't need to install this — it's already included.

Comparisons

• adapter-cloudflare – supports all SvelteKit features; builds for Cloudflare Pages
• adapter-cloudflare-workers – supports all SvelteKit features; builds for Cloudflare Workers
• adapter-static – only produces client-side static assets; compatible with Cloudflare Pages

Note: Cloudflare Pages' new Workers integration is currently in beta.
Compared to adapter-cloudflare-workers, this adapter will be 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.

Installationpermalink

$ npm i --save-dev @sveltejs/adapter-cloudflare

Usagepermalink

You can include these changes in your svelte.config.js configuration file:

ts
import adapter from '@sveltejs/adapter-cloudflare';
Cannot find module '@sveltejs/adapter-cloudflare' or its corresponding type declarations.2307Cannot find module '@sveltejs/adapter-cloudflare' or its corresponding type declarations.
 
export default {
  kit: {
  adapter: adapter()
  }
};

Deploymentpermalink

Please follow the Get Started Guide for Cloudflare Pages to begin.

When configuring your project settings, you must use the following settings:

• Framework preset – None
• Build command – npm run build or svelte-kit build
• Build output directory – .svelte-kit/cloudflare
• Environment variables
  • NODE_VERSION: 16

Important: You need to add a NODE_VERSION environment variable to both the "production" and "preview" environments. You can add this during project setup or later in the Pages project settings. SvelteKit requires Node 16.14 or later, so you should use 16 as the NODE_VERSION value.

Environment variablespermalink

The env object, containing KV/DO namespaces etc, is passed to SvelteKit via the platform property along with context and caches, meaning you can access it in hooks and endpoints:

ts
export async function POST({ request, platform }) {
Binding element 'request' implicitly has an 'any' type.
Binding element 'platform' implicitly has an 'any' type.7031
7031Binding element 'request' implicitly has an 'any' type.
Binding element 'platform' implicitly has an 'any' type.
  const x = platform.env.YOUR_DURABLE_OBJECT_NAMESPACE.idFromName('x');
}

To make these types available to your app, reference them in your src/app.d.ts:

/// <reference types="@sveltejs/kit" />
/// <reference types="@sveltejs/adapter-cloudflare" />

declare namespace App {
  interface Platform {
		env?: {
			YOUR_KV_NAMESPACE: KVNamespace;
			YOUR_DURABLE_OBJECT_NAMESPACE: DurableObjectNamespace;
		};
  }
}

platform.env is only available in the production build. Use wrangler to test it locally

Notespermalink

Functions contained in the /functions directory at the project's root will not be included in the deployment, which is compiled to a single _worker.js file. Functions should be implemented as server endpoints in your SvelteKit app.

The _headers and _redirects files specific to Cloudflare Pages can be used for static asset responses (like images) by putting them into the /static folder.

However, they will have no effect on responses dynamically rendered by SvelteKit, which should return custom headers or redirect responses from server endpoints or with the handle hook.

Troubleshootingpermalink

Accessing the file systempermalink

You can't access the file system through methods like fs.readFileSync in Serverless/Edge environments. If you need to access files that way, do that during building the app through prerendering. If you have a blog for example and don't want to manage your content through a CMS, then you need to prerender the content (or prerender the endpoint from which you get it) and redeploy your blog everytime you add new content.

Changelogpermalink

The Changelog for this package is available on GitHub.