Cloudflare Pages
Edit this page on GitHubTo deploy to Cloudflare Pages, use adapter-cloudflare
.
This adapter will be installed by default when you use adapter-auto
, but adding it to your project is recommended so that event.platform
is automatically typed.
Comparisonspermalink
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
Unless you have a specific reason to use
adapter-cloudflare-workers
, it's recommended that you use this adapter instead. Both adapters have equivalent functionality, but Cloudflare Pages offers features like GitHub integration with automatic builds and deploys, preview deployments, instant rollback and so on.
Usagepermalink
Install with npm i -D @sveltejs/adapter-cloudflare
, then add the adapter to your svelte.config.js
:
ts
importCannot find module '@sveltejs/adapter-cloudflare' or its corresponding type declarations.2307Cannot find module '@sveltejs/adapter-cloudflare' or its corresponding type declarations.adapter from'@sveltejs/adapter-cloudflare' ;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
orsvelte-kit build
- Build output directory –
.svelte-kit/cloudflare
- Environment variables
NODE_VERSION
:16
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 Node16.14
or later, so you should use16
as theNODE_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 functionBinding element 'request' implicitly has an 'any' type.POST ({, request }) { platform
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.constx =platform .env .YOUR_DURABLE_OBJECT_NAMESPACE .idFromName ('x');}
To make these types available to your app, reference them in your src/app.d.ts
:
declare global {
namespace App {
interface Platform {
env?: {
YOUR_KV_NAMESPACE: KVNamespace;
YOUR_DURABLE_OBJECT_NAMESPACE: DurableObjectNamespace;
};
}
}
}
export {};
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.