Skip to content
Open
Show file tree
Hide file tree
Changes from 8 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions .changeset/quiet-workers-build.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
'@sveltejs/adapter-cloudflare': major
'@sveltejs/adapter-auto': major
---

breaking: remove Cloudflare Pages support. `adapter-auto` now detects Workers Builds rather than Pages.
2 changes: 1 addition & 1 deletion documentation/docs/25-build-and-deploy/20-adapters.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ Before you can deploy your SvelteKit app, you need to _adapt_ it for your deploy

Official adapters exist for a variety of platforms — these are documented on the following pages:

- [`@sveltejs/adapter-cloudflare`](adapter-cloudflare) for Cloudflare Workers and Cloudflare Pages
- [`@sveltejs/adapter-cloudflare`](adapter-cloudflare) for Cloudflare Workers
- [`@sveltejs/adapter-netlify`](adapter-netlify) for Netlify
- [`@sveltejs/adapter-node`](adapter-node) for Node servers
- [`@sveltejs/adapter-bun`](adapter-bun) for Bun servers
Expand Down
2 changes: 1 addition & 1 deletion documentation/docs/25-build-and-deploy/30-adapter-auto.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ title: Zero-config deployments

When you create a new SvelteKit project with `npx sv create`, it installs [`adapter-auto`](https://github.com/sveltejs/kit/tree/main/packages/adapter-auto) by default. This adapter automatically installs and uses the correct adapter for supported environments when you deploy:

- [`@sveltejs/adapter-cloudflare`](adapter-cloudflare) for [Cloudflare Workers](https://www.cloudflare.com/products/workers/) and [Pages](https://developers.cloudflare.com/pages/)
- [`@sveltejs/adapter-cloudflare`](adapter-cloudflare) for [Cloudflare Workers](https://www.cloudflare.com/products/workers/)
- [`@sveltejs/adapter-netlify`](adapter-netlify) for [Netlify](https://netlify.com/)
- [`@sveltejs/adapter-vercel`](adapter-vercel) for [Vercel](https://vercel.com/)
- [`svelte-adapter-azure-swa`](https://github.com/geoffrich/svelte-adapter-azure-swa) for [Azure Static Web Apps](https://docs.microsoft.com/en-us/azure/static-web-apps/)
Expand Down
74 changes: 18 additions & 56 deletions documentation/docs/25-build-and-deploy/60-adapter-cloudflare.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,13 @@
title: Cloudflare
---

To deploy to [Cloudflare Workers](https://workers.cloudflare.com/) or [Cloudflare Pages](https://pages.cloudflare.com/), use [`adapter-cloudflare`](https://github.com/sveltejs/kit/tree/main/packages/adapter-cloudflare).
To deploy to [Cloudflare Workers](https://workers.cloudflare.com/), use [`adapter-cloudflare`](https://github.com/sveltejs/kit/tree/main/packages/adapter-cloudflare).

This adapter will be installed by default when you use [`adapter-auto`](adapter-auto). If you plan on staying with Cloudflare, you can switch from [`adapter-auto`](adapter-auto) to using this adapter directly so that `cloudflare:workers` is emulated during local development, type declarations are automatically applied, and the ability to set Cloudflare-specific options is provided.

## Comparisons

- `adapter-cloudflare` – supports all SvelteKit features; builds for Cloudflare Workers Static Assets and Cloudflare Pages
- `adapter-cloudflare` – supports all SvelteKit features; builds for Cloudflare Workers Static Assets
- `adapter-cloudflare-workers` – deprecated. Supports all SvelteKit features; builds for Cloudflare Workers Sites
- `adapter-static` – only produces client-side static assets; compatible with Cloudflare Workers Static Assets and Cloudflare Pages

Expand All @@ -34,11 +34,7 @@ export default defineConfig({
environment: undefined,
persist: undefined
},
fallback: 'plaintext',
routes: {
include: ['/*'],
exclude: ['<all>']
}
fallback: 'plaintext'
})
})
]
Expand All @@ -61,31 +57,9 @@ Whether to render a plaintext 404.html page or a rendered SPA fallback page for

For Cloudflare Workers, the default behaviour is to return a null-body 404-status response for non-matching assets requests. However, if the [`assets.not_found_handling`](https://developers.cloudflare.com/workers/static-assets/routing/#2-not_found_handling) Wrangler configuration setting is set to `"404-page"`, this page will be served if a request fails to match an asset. If `assets.not_found_handling` is set to `"single-page-application"`, the adapter will render a SPA fallback `index.html` page regardless of the `fallback` option specified.

For Cloudflare Pages, this page will only be served when a request that matches an entry in `routes.exclude` fails to match an asset.
## Basic configuration

Most of the time `plaintext` is sufficient, but if you are using `routes.exclude` to manually exclude a set of prerendered pages without exceeding the 100 route limit, you may wish to use `spa` instead to avoid showing an unstyled 404 page to users.

See Cloudflare Pages' [Not Found behaviour](https://developers.cloudflare.com/pages/configuration/serving-pages/#not-found-behavior) for more info.

### routes

Only for Cloudflare Pages. Allows you to customise the [`_routes.json`](https://developers.cloudflare.com/pages/functions/routing/#create-a-_routesjson-file) file generated by `adapter-cloudflare`.

- `include` defines routes that will invoke a function, and defaults to `['/*']`
- `exclude` defines routes that will _not_ invoke a function — this is a faster and cheaper way to serve your app's static assets. This array can include the following special values:
- `<build>` contains your app's build artifacts (the files generated by Vite)
- `<files>` contains the contents of your `static` directory
- `<redirects>` contains a list of pathnames from your [`_redirects` file](https://developers.cloudflare.com/pages/configuration/redirects/) at the root
- `<prerendered>` contains a list of prerendered pages
- `<all>` (the default) contains all of the above

You can have up to 100 `include` and `exclude` rules combined. Generally you can omit the `routes` options, but if (for example) your `<prerendered>` paths exceed that limit, you may find it helpful to manually create an `exclude` list that includes `'/articles/*'` instead of the auto-generated `['/articles/foo', '/articles/bar', '/articles/baz', ...]`.

## Cloudflare Workers

### Basic configuration

When building for Cloudflare Workers, this adapter expects to find a [Wrangler configuration file](https://developers.cloudflare.com/workers/configuration/sites/configuration/) in the project root. It should look something like this:
The adapter expects to find a [Wrangler configuration file](https://developers.cloudflare.com/workers/wrangler/configuration/) in the project root. It should look something like this:

```jsonc
/// file: wrangler.jsonc
Expand All @@ -101,32 +75,10 @@ When building for Cloudflare Workers, this adapter expects to find a [Wrangler c
}
```

### Deployment
## Deployment

You can use the Wrangler CLI to deploy your application by running `npx wrangler deploy` or use the [Cloudflare Git integration](https://developers.cloudflare.com/workers/ci-cd/builds/) to enable automatic builds and deployments on push.

## Cloudflare Pages

### Deployment

Please follow the [Get Started Guide](https://developers.cloudflare.com/pages/get-started/) for Cloudflare Pages to begin.

If you're using the [Git integration](https://developers.cloudflare.com/pages/get-started/git-integration/), your build settings should look like this:

- Framework preset – SvelteKit
- Build command – `npm run build` or `vite build`
- Build output directory – `.svelte-kit/cloudflare`

To enable only the [Node.js AsyncLocalStorage](https://developers.cloudflare.com/workers/configuration/compatibility-flags/#nodejs-asynclocalstorage) API, add the `nodejs_als` compatibility flag in your wrangler config using the `compatibility_flags` array.

### Further reading

You may wish to refer to [Cloudflare's documentation for deploying a SvelteKit site on Cloudflare Pages](https://developers.cloudflare.com/pages/framework-guides/deploy-a-svelte-kit-site/).

### Notes

Functions contained in the [`/functions` directory](https://developers.cloudflare.com/pages/functions/routing/) at the project's root will _not_ be included in the deployment. Instead, functions should be implemented as [server endpoints](routing#server) in your SvelteKit app, which is compiled to a [single `_worker.js` file](https://developers.cloudflare.com/pages/functions/advanced-mode/).

## Runtime APIs

The [`env`](https://developers.cloudflare.com/workers/runtime-apis/fetch-event#parameters) object contains your project's [bindings](https://developers.cloudflare.com/workers/runtime-apis/bindings/), which consist of KV/DO namespaces, etc. It is available on the [`cloudflare:workers`](https://developers.cloudflare.com/workers/runtime-apis/bindings/#importing-env-as-a-global) module.
Expand Down Expand Up @@ -160,11 +112,11 @@ Cloudflare specific values are emulated during dev and preview modes. Local [bin

> [!NOTE] [Durable Objects](https://developers.cloudflare.com/durable-objects/) and [Workflows](https://developers.cloudflare.com/workflows/), which require custom classes to be exported from your worker, are not currently supported.

For testing the build, you should use [Wrangler](https://developers.cloudflare.com/workers/wrangler/) version 4. Once you have built your site, run `wrangler dev .svelte-kit/cloudflare/_worker.js` if you're testing for Cloudflare Workers or `wrangler pages dev .svelte-kit/cloudflare` for Cloudflare Pages.
For testing the build, you should use [Wrangler](https://developers.cloudflare.com/workers/wrangler/) version 4. Once you have built your site, run `wrangler dev`.

## Headers and redirects

The [`_headers`](https://developers.cloudflare.com/pages/configuration/headers/) and [`_redirects`](https://developers.cloudflare.com/pages/configuration/redirects/) files, specific to Cloudflare, can be used for static asset responses (like images) by putting them into the project root folder.
The [`_headers`](https://developers.cloudflare.com/workers/static-assets/headers/) and [`_redirects`](https://developers.cloudflare.com/workers/static-assets/redirects/) files, specific to Cloudflare, can be used for static asset responses (like images) by putting them into the project root folder.

However, they will have no effect on responses dynamically rendered by SvelteKit, which should return custom headers or redirect responses from [server endpoints](routing#server) or with the [`handle`](hooks#handle) hook.

Expand Down Expand Up @@ -236,3 +188,13 @@ assets.binding = "ASSETS" # Exclude this if you don't have a `main` key configur
}+++
}
```

## Migrating from Cloudflare Pages

To migrate to Cloudflare Workers:

1. Remove `pages_build_output_dir` from your Wrangler configuration and [add the `main` and `assets` settings](#Basic-configuration).
2. Remove the adapter's `routes` option and any `_routes.json` files.
3. Replace `wrangler pages dev` and `wrangler pages deploy` with `wrangler dev` and `wrangler deploy`. For automatic deployments, use [Workers Builds](https://developers.cloudflare.com/workers/ci-cd/builds/) instead of the Pages Git integration.

See Cloudflare's [Workers and Pages compatibility matrix](https://developers.cloudflare.com/workers/static-assets/migration-guides/migrate-from-pages/#compatibility-matrix) for a comparison of supported features.
4 changes: 2 additions & 2 deletions packages/adapter-auto/adapters.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,8 @@ export const adapters = [
version: '7'
},
{
name: 'Cloudflare Pages',
test: () => !!process.env.CF_PAGES,
name: 'Cloudflare Workers',
test: () => !!process.env.WORKERS_CI,
module: '@sveltejs/adapter-cloudflare',
version: '8'
},
Expand Down
2 changes: 1 addition & 1 deletion packages/adapter-cloudflare/README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# adapter-cloudflare

[Adapter](https://svelte.dev/docs/kit/building-your-app) for building SvelteKit applications on [Cloudflare Workers](https://developers.cloudflare.com/workers/) with [static assets](https://developers.cloudflare.com/workers/static-assets/) or [Cloudflare Pages](https://developers.cloudflare.com/pages/) with [Workers integration](https://developers.cloudflare.com/pages/functions/).
[Adapter](https://svelte.dev/docs/kit/building-your-app) for building SvelteKit applications on [Cloudflare Workers](https://developers.cloudflare.com/workers/) with [static assets](https://developers.cloudflare.com/workers/static-assets/).

## Docs

Expand Down
46 changes: 0 additions & 46 deletions packages/adapter-cloudflare/index.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -20,59 +20,13 @@ export interface AdapterOptions {
* is set to `"single-page-application"`, the adapter will render a SPA fallback
* `index.html` page regardless of the `fallback` option specified.
*
* For Cloudflare Pages, this page will only be served when a request that
* matches an entry in `routes.exclude` fails to match an asset.
*
* Most of the time `plaintext` is sufficient, but if you are using `routes.exclude` to manually
* exclude a set of prerendered pages without exceeding the 100 route limit, you may wish to
* use `spa` instead to avoid showing an unstyled 404 page to users.
*
* See [Cloudflare Pages' Not Found behavior](https://developers.cloudflare.com/pages/configuration/serving-pages/#not-found-behavior) for more info.
*
* @default 'plaintext'
*/
fallback?: 'plaintext' | 'spa';

/**
* Only for Cloudflare Pages. Customize the automatically-generated [`_routes.json`](https://developers.cloudflare.com/pages/platform/functions/routing/#create-a-_routesjson-file) file.
*/
routes?: {
/**
* Routes that will be invoked by functions. Accepts wildcards.
* @default ["/*"]
*/
include?: string[];

/**
* Routes that will not be invoked by functions. Accepts wildcards.
* `exclude` takes priority over `include`.
*
* To have the adapter automatically exclude certain things, you can use these placeholders:
*
* - `<build>` to exclude build artifacts (files generated by Vite)
* - `<files>` for the contents of your `static` directory
* - `<prerendered>` for prerendered routes
* - `<all>` to exclude all of the above
*
* @default ["<all>"]
*/
exclude?: string[];
};

/**
* Config object passed to [`getPlatformProxy`](https://developers.cloudflare.com/workers/wrangler/api/#getplatformproxy)
* during development and preview.
*/
platformProxy?: GetPlatformProxyOptions;
}

/**
* The JSON format of the {@link https://developers.cloudflare.com/pages/functions/routing/#create-a-_routesjson-file | `_routes.json`}
* file that controls when the Cloudflare Pages Function is invoked.
*/
export interface RoutesJSONSpec {
version: 1;
description: string;
include: string[];
exclude: string[];
}
Loading
Loading