Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: docs and changeset for #11732 #11974

Merged
merged 4 commits into from
Mar 13, 2024
Merged
Show file tree
Hide file tree
Changes from 2 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/lucky-chefs-sleep.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
"@sveltejs/adapter-cloudflare-workers": minor
"@sveltejs/adapter-cloudflare": minor
---

feat: emulate Cloudflare Workers bindings and incoming request properties in `event.platform` for `dev` and `preview`
12 changes: 7 additions & 5 deletions documentation/docs/25-build-and-deploy/60-adapter-cloudflare.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ title: Cloudflare Pages

To deploy to [Cloudflare Pages](https://developers.cloudflare.com/pages/), 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 Pages you can switch from [`adapter-auto`](adapter-auto) to using this adapter directly so that type declarations will be automatically applied and you can set Cloudflare-specific options.
This adapter will be installed by default when you use [`adapter-auto`](adapter-auto). If you plan on staying with Cloudflare Pages, you can switch from [`adapter-auto`](adapter-auto) to using this adapter directly so that Cloudflare Workers specific values will be emulated during local development, type declarations will be automatically applied, and you can set Cloudflare-specific options.
eltigerchino marked this conversation as resolved.
Show resolved Hide resolved

## Comparisons

Expand Down Expand Up @@ -57,9 +57,9 @@ When configuring your project settings, you must use the following settings:
- **Build command** – `npm run build` or `vite build`
- **Build output directory** – `.svelte-kit/cloudflare`

## Bindings
## Runtime APIs

The [`env`](https://developers.cloudflare.com/workers/runtime-apis/fetch-event#parameters) object contains your project's [bindings](https://developers.cloudflare.com/pages/platform/functions/bindings/), which consist of KV/DO namespaces, etc. It is passed to SvelteKit via the `platform` property, along with `context` and `caches`, meaning that you can access it in hooks and endpoints:
The [`env`](https://developers.cloudflare.com/workers/runtime-apis/fetch-event#parameters) object contains your project's [bindings](https://developers.cloudflare.com/pages/platform/functions/bindings/), which consist of KV/DO namespaces, etc. It is passed to SvelteKit via the `platform` property, along with [`context`](https://developers.cloudflare.com/workers/runtime-apis/handlers/fetch/#contextwaituntil), [`caches`](https://developers.cloudflare.com/workers/runtime-apis/cache/), and [`cf`](https://developers.cloudflare.com/workers/runtime-apis/request/#the-cf-property-requestinitcfproperties), meaning that you can access it in hooks and endpoints:
benmccann marked this conversation as resolved.
Show resolved Hide resolved

```js
// @errors: 7031
Expand All @@ -70,7 +70,7 @@ export async function POST({ request, platform }) {

> SvelteKit's built-in `$env` module should be preferred for environment variables.

To make these types available to your app, reference them in your `src/app.d.ts`:
To include type declarations for your bindings, reference them in your `src/app.d.ts`:

```diff
/// file: src/app.d.ts
Expand All @@ -90,7 +90,9 @@ export {};

### Testing Locally

`platform.env` is only available in the final build and not in dev mode. For testing the build, you can use [wrangler](https://developers.cloudflare.com/workers/cli-wrangler) **version 3**. Once you have built your site, run `wrangler pages dev .svelte-kit/cloudflare`. Ensure you have your [bindings](https://developers.cloudflare.com/workers/wrangler/configuration/#bindings) in your `wrangler.toml`.
Cloudflare Workers specific values in the `platform` property are emulated during dev and preview modes. The [bindings](https://developers.cloudflare.com/workers/wrangler/configuration/#bindings) in your `wrangler.toml` will be used to populate `platform.env` during local development.

For testing the build, you should use [wrangler](https://developers.cloudflare.com/workers/cli-wrangler) **version 3**. Once you have built your site, run `wrangler pages dev .svelte-kit/cloudflare`.

## Notes

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -84,9 +84,9 @@ If you would like to enable [Node.js compatibility](https://developers.cloudflar
compatibility_flags = [ "nodejs_compat" ]
```

## Bindings
## 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/platform/environment-variables/), which consist of KV/DO namespaces, etc. It is passed to SvelteKit via the `platform` property, along with `context` and `caches`, meaning that you can access it in hooks and endpoints:
The [`env`](https://developers.cloudflare.com/workers/runtime-apis/fetch-event#parameters) object contains your project's [bindings](https://developers.cloudflare.com/pages/platform/functions/bindings/), which consist of KV/DO namespaces, etc. It is passed to SvelteKit via the `platform` property, along with [`context`](https://developers.cloudflare.com/workers/runtime-apis/handlers/fetch/#contextwaituntil), [`caches`](https://developers.cloudflare.com/workers/runtime-apis/cache/), and [`cf`](https://developers.cloudflare.com/workers/runtime-apis/request/#the-cf-property-requestinitcfproperties), meaning that you can access it in hooks and endpoints:
benmccann marked this conversation as resolved.
Show resolved Hide resolved

```js
// @errors: 7031
Expand All @@ -97,7 +97,7 @@ export async function POST({ request, platform }) {

> SvelteKit's built-in `$env` module should be preferred for environment variables.

To make these types available to your app, reference them in your `src/app.d.ts`:
To include type declarations for your bindings, reference them in your `src/app.d.ts`:

```diff
/// file: src/app.d.ts
Expand All @@ -117,7 +117,9 @@ export {};

### Testing Locally

`platform.env` is only available in the final build and not in dev mode. For testing the build, you can use [wrangler](https://developers.cloudflare.com/workers/cli-wrangler). Once you have built your site, run `wrangler dev`. Ensure you have your [bindings](https://developers.cloudflare.com/workers/wrangler/configuration/#bindings) in your `wrangler.toml`. Wrangler version 3 is recommended.
Cloudflare Workers specific values in the `platform` property are emulated during dev and preview modes. The [bindings](https://developers.cloudflare.com/workers/wrangler/configuration/#bindings) in your `wrangler.toml` will be used to populate `platform.env` during local development.

For testing the build, you should use [wrangler](https://developers.cloudflare.com/workers/cli-wrangler) **version 3**. Once you have built your site, run `wrangler pages dev .svelte-kit/cloudflare`.
eltigerchino marked this conversation as resolved.
Show resolved Hide resolved

## Troubleshooting

Expand Down
Loading