Skip to content

Commit 40e231b

Browse files
korinnejamesopstadhyperlint-ai[bot]kodster28irvinebroque
authored
New Vite plugin docs for local development (#20586)
* Initial Vite plugin docs * Update src/content/docs/workers/vite-plugin/api.mdx Co-authored-by: hyperlint-ai[bot] <154288675+hyperlint-ai[bot]@users.noreply.github.com> * Update src/content/docs/workers/vite-plugin/api.mdx Co-authored-by: hyperlint-ai[bot] <154288675+hyperlint-ai[bot]@users.noreply.github.com> * adds a directory structure for local development docs, and adds a Vite plugin section * Update src/content/docs/workers/local-development/vite.mdx Co-authored-by: hyperlint-ai[bot] <154288675+hyperlint-ai[bot]@users.noreply.github.com> * Update src/content/docs/workers/local-development/wrangler.mdx Co-authored-by: hyperlint-ai[bot] <154288675+hyperlint-ai[bot]@users.noreply.github.com> * fix some broken links * consolidates current local dev docs under new directory, and includes ⛅️ wrangler 3.95.0 (update available 3.114.1) ---------------------------------------------- in Overview page * Uses new PackageManager component in local-development/wrangler.mdx * adds bindings_per_env.mdx under src/content/partials/workers * Adds guidance for when to use Wrangler vs Vite, adds Vite to the binding comparison * updates Wrangler local development guide, and partial for local vs remote dev * updates overview page to make more concise * fixes broken links * Update src/content/docs/workers/local-development/vite.mdx Co-authored-by: James Opstad <[email protected]> * Update src/content/docs/workers/local-development/vite.mdx Co-authored-by: James Opstad <[email protected]> * Update src/content/docs/workers/local-development/vite.mdx Co-authored-by: James Opstad <[email protected]> * Update src/content/docs/workers/local-development/index.mdx Co-authored-by: James Opstad <[email protected]> * moves local development section nearer to testing section * cleans up text in choosing between wrangler and vite * updates overview page for local development * update overview page, add working with data page * updates local development docs * Update src/content/docs/workers/local-development/local-data.mdx Co-authored-by: James Opstad <[email protected]> * Update src/content/docs/workers/local-development/local-data.mdx Co-authored-by: James Opstad <[email protected]> * Update src/content/docs/workers/local-development/wrangler-vs-vite.mdx Co-authored-by: Kody Jackson <[email protected]> * Update src/content/docs/workers/local-development/remote-data.mdx Co-authored-by: Kody Jackson <[email protected]> * Update src/content/docs/workers/local-development/local-data.mdx Co-authored-by: Kody Jackson <[email protected]> * Update src/content/docs/workers/local-development/local-data.mdx Co-authored-by: Kody Jackson <[email protected]> * Update src/content/docs/workers/local-development/local-data.mdx Co-authored-by: Brendan Irvine-Broque <[email protected]> * Update src/content/docs/workers/local-development/index.mdx Co-authored-by: James Opstad <[email protected]> * adds updates to remove separate vite vs wrangler docs, small changes * updates local-data.mdx * Update src/content/docs/workers/local-development/remote-data.mdx --------- Co-authored-by: James Opstad <[email protected]> Co-authored-by: hyperlint-ai[bot] <154288675+hyperlint-ai[bot]@users.noreply.github.com> Co-authored-by: Kody Jackson <[email protected]> Co-authored-by: Brendan Irvine-Broque <[email protected]>
1 parent fffa3a3 commit 40e231b

File tree

7 files changed

+395
-1
lines changed

7 files changed

+395
-1
lines changed

src/content/docs/workers/local-development.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
title: Local development
33
pcx_content_type: concept
44
sidebar:
5-
order: 5
5+
order: 14
66
head: []
77
description: Develop your Workers locally via Wrangler.
88
---
Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
---
2+
pcx_content_type: navigation
3+
title: Supported bindings in local and remote dev
4+
sidebar:
5+
order: 4
6+
head: []
7+
description: Supported bindings in local and remote development
8+
---
9+
10+
import { Render } from "~/components";
11+
12+
<Render file="bindings_per_env" />
Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
---
2+
pcx_content_type: navigation
3+
title: Environment variables and secrets
4+
sidebar:
5+
order: 1
6+
head: []
7+
description: Configuring environment variables and secrets for local development
8+
---
9+
10+
import { Aside, PackageManagers, Steps } from "~/components";
11+
12+
During local development, you may need to configure **environment variables** (such as API URLs, feature flags) and **secrets** (API tokens, private keys). You can use a `.dev.vars` file in the root of your project to override environment variables for local development, and both [Wrangler](/workers/configuration/environment-variables/#compare-secrets-and-environment-variables) and the [Vite plugin](/workers/vite-plugin/reference/secrets/) will respect this override.
13+
14+
<Aside type="caution">
15+
Be sure to add `.dev.vars` to your `.gitignore` so it never gets committed.
16+
</Aside>
17+
18+
### Why use a `.dev.vars` file?
19+
20+
Use `.dev.vars` to set local overrides for environment variables that should not be checked into your repository.
21+
22+
If you want to manage environment-based configuration that you **want checked into your repository** (for example, non-sensitive or shared environment defaults), you can define [environment variables as `[vars]`](/workers/wrangler/environments/#_top) in your Wrangler configuration. Using a `.dev.vars` file is specifically for local-only secrets or configuration that you do not want in version control and only want to inject in local dev sessions.
23+
24+
## Basic setup
25+
26+
<Steps>
27+
28+
1. Create a `.dev.vars` file in your project root.
29+
30+
2. Add key-value pairs:
31+
32+
```ini title=".dev.vars"
33+
API_HOST="localhost:3000"
34+
DEBUG="true"
35+
SECRET_TOKEN="my-local-secret-token"
36+
```
37+
38+
3. Run your `dev` command
39+
40+
**Wrangler**
41+
<PackageManagers type="exec" pkg="wrangler" args="dev" />
42+
43+
44+
**Vite plugin**
45+
<PackageManagers type="exec" pkg="vite" args="dev" />
46+
47+
</Steps>
48+
49+
## Multiple local environments with `.dev.vars`
50+
51+
To simulate different local environments, you can:
52+
53+
<Steps>
54+
55+
1. Create a file named `.dev.vars.<environment-name>` . For example, we'll use `.dev.vars.staging`.
56+
57+
2. Add key-value pairs:
58+
```ini title=".dev.vars.staging"
59+
API_HOST="staging.localhost:3000"
60+
DEBUG="false"
61+
SECRET_TOKEN="staging-token"
62+
```
63+
3. Specify the environment when running the `dev` command:
64+
65+
**Wrangler**
66+
67+
<PackageManagers type="exec" pkg="wrangler" args="dev --env staging" />
68+
69+
**Vite plugin**
70+
71+
<PackageManagers type="exec" pkg="vite" args="dev" prefix="CLOUDFLARE_ENV=staging" />
72+
73+
Only the values from `.dev.vars.staging` will be applied instead of `.dev.vars`.
74+
75+
</Steps>
76+
77+
## Learn more
78+
79+
- To learn how to configure multiple environments in Wrangler configuration, [read the documenation](/workers/wrangler/environments/#_top).
80+
- To learn how to use Wrangler environments and Vite environments together, [read the Vite plugin documentation](/workers/vite-plugin/reference/cloudflare-environments/)
Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
---
2+
pcx_content_type: navigation
3+
title: Local development
4+
sidebar:
5+
order: 6
6+
head: []
7+
description: Develop your Workers locally.
8+
---
9+
10+
import { Details, LinkCard, Render, PackageManagers } from "~/components";
11+
12+
When building projects on Cloudflare Workers, you have two options for local development:
13+
14+
- [**Wrangler**](/workers/wrangler/), using the built-in [`wrangler dev`](/workers/wrangler/commands/#dev) command.
15+
- [Vite](https://vite.dev/), using the [**Cloudflare Vite plugin**](/workers/vite-plugin/).
16+
17+
Both Wrangler and the Vite plugin use [Miniflare](/workers/testing/miniflare/) to provide an accurate **local** simulation of the Cloudflare Workers runtime, ([`workerd`](https://github.com/cloudflare/workerd)). If you need to [develop with **remote resources**](/workers/local-development/remote-data/), Wrangler is the only option, and provides remote development via the `wrangler dev --remote` command.
18+
19+
## Choosing between Wrangler or Vite
20+
21+
Deciding between Wrangler and the Cloudflare Vite plugin depends on your project's focus and development workflow. Here are some quick guidelines to help you choose:
22+
23+
### When to use Wrangler
24+
25+
- **Backend & Workers-focused:**
26+
If you're primarily building APIs, serverless functions, or background tasks, use Wrangler.
27+
28+
- **Remote development:**
29+
If your project needs the ability to develop and test using production resources and data on Cloudflare's network, use Wrangler's `--remote` flag.
30+
31+
- **Simple frontends:**
32+
If you have minimal frontend requirements and don’t need hot reloading or advanced bundling, Wrangler may be sufficient.
33+
34+
### When to use the Cloudflare Vite Plugin
35+
36+
Use the [Vite plugin](/workers/vite-plugin/) for:
37+
38+
- **Frontend-centric development:**
39+
If you already use Vite with modern frontend frameworks like React, Vue, Svelte, or Solid, the Vite plugin integrates into your development workflow.
40+
41+
- **React Router v7:**
42+
If you are using [React Router v7](https://reactrouter.com/) (the successor to Remix), it is officially supported by the Vite plugin as a full-stack SSR framework.
43+
44+
- **Rapid iteration (HMR):**
45+
If you need near-instant updates in the browser, the Vite plugin provides [Hot Module Replacement (HMR)](https://vite.dev/guide/features.html#hot-module-replacement) during local development.
46+
47+
- **Advanced optimizations:**
48+
If you require more advanced optimizations (code splitting, efficient bundling, CSS handling, build time transformations, etc.), Vite is a strong fit.
49+
50+
- **Greater flexibility:**
51+
Due to Vite's advanced configuration options and large ecosystem of plugins, there is more flexibility to customize your development experience and build output.
Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
---
2+
pcx_content_type: navigation
3+
title: Local data
4+
sidebar:
5+
order: 2
6+
head: []
7+
description: Working with data during local development
8+
---
9+
10+
import {
11+
Details,
12+
LinkCard,
13+
Render,
14+
PackageManagers,
15+
FileTree,
16+
Aside,
17+
} from "~/components";
18+
19+
Whether you are using Wrangler or the [Cloudflare Vite plugin](https://developers.cloudflare.com/workers/vite-plugin/), your workflow for **accessing** data during local development remains the same. However, you can only [populate local resources with data](/workers/local-development/local-data/#populating-local-resources-with-data) via the Wrangler CLI.
20+
21+
### How it works
22+
23+
When you run either `wrangler dev` or [`vite`](https://vite.dev/guide/cli#dev-server), [Miniflare](/workers/testing/miniflare/) automatically creates **local versions** of your resources (like [KV](/kv), [D1](/d1/), or [R2](/r2)). This means you **don’t** need to manually set up separate local instances for each service. However, newly created local resources **won’t** contain any data — you'll need to use Wrangler commands with the `--local` flag to populate them. Changes made to local resources won’t affect production data.
24+
25+
## Populating local resources with data
26+
27+
When you first start developing, your local resources will be empty. You'll need to populate them with data using the Wrangler CLI.
28+
29+
### KV namespaces
30+
31+
<Aside type="caution" title="Syntax note">
32+
33+
Since version 3.60.0, Wrangler supports the `kv ...` syntax. If you are using versions below 3.60.0, the command follows the `kv:...` syntax. Learn more in the [Wrangler commands for KV page](/kv/reference/kv-commands/).
34+
35+
</Aside>
36+
37+
#### [Add a single key-value pair](/workers/wrangler/commands/#kv-key)
38+
39+
<PackageManagers
40+
type="exec"
41+
pkg="wrangler"
42+
args="kv key put <KEY> <VALUE> --binding=<BINDING> --local "
43+
/>
44+
45+
#### [Buld upload](/workers/wrangler/commands/#kv-bulk)
46+
47+
<PackageManagers
48+
type="exec"
49+
pkg="wrangler"
50+
args="kv bulk put <FILENAME.json> --binding=<BINDING> --local"
51+
/>
52+
53+
### R2 buckets
54+
55+
#### [Upload a file](/workers/wrangler/commands/#r2-object)
56+
57+
<PackageManagers
58+
type="exec"
59+
pkg="wrangler"
60+
args="r2 object put <BUCKET>/<KEY> --file=<PATH_TO_FILE> --local"
61+
/>
62+
63+
You may also include [other metadata](/workers/wrangler/commands/#r2-object-put).
64+
65+
### D1 databases
66+
67+
#### [Execute a SQL statement](/workers/wrangler/commands/#d1-execute)
68+
69+
<PackageManagers
70+
type="exec"
71+
pkg="wrangler"
72+
args='d1 execute <DATABASE_NAME> --command="<SQL_QUERY>" --local'
73+
/>
74+
75+
#### [Execute a SQL file](/workers/wrangler/commands/#d1-execute)
76+
77+
<PackageManagers
78+
type="exec"
79+
pkg="wrangler"
80+
args="wrangler d1 execute <DATABASE_NAME> --file=./schema.sql --local"
81+
/>
82+
83+
### Durable Objects
84+
85+
For Durable Objects, unlike KV, D1, and R2, there are no CLI commands to populate them with local data. To add data to Durable Objects during local development, you must write application code that creates Durable Object instances and [calls methods on them that store state](/durable-objects/best-practices/access-durable-objects-storage/). This typically involves creating development endpoints or test routes that initialize your Durable Objects with the desired data.
86+
87+
## Where local data gets stored
88+
89+
By default, both Wrangler and the Vite plugin store local binding data in the same location: the `.wrangler/state` folder in your project directory. This folder stores data in subdirectories for all local bindings: KV namespaces, R2 buckets, D1 databases, Durable Objects, etc.
90+
91+
### Clearing local storage
92+
93+
You can delete the `.wrangler/state` folder at any time to reset your local environment, and Miniflare will recreate it the next time you run your `dev` command. You can also delete specific sub-folders within `.wrangler/state` for more targeted clean-up.
94+
95+
### Changing the local data directory
96+
97+
If you prefer to specify a different directory for local storage, you can do so through the Wranlger CLI or in the Vite plugin's configuration.
98+
99+
#### Using Wrangler
100+
101+
Use the [`--persist-to`](/workers/wrangler/commands/#dev) flag with `wrangler dev`. You need to specify this flag every time you run the `dev` command:
102+
103+
<PackageManagers
104+
type="exec"
105+
pkg="wrangler"
106+
args="dev --persist-to <DIRECTORY>"
107+
/>
108+
109+
:::note
110+
The local persistence folder (like `.wrangler/state` or any custom folder you set) should be added to your `.gitignore` to avoid committing local development data to version control.
111+
:::
112+
113+
<Details header="Using `--local` with `--persist-to`">
114+
If you run `wrangler dev --persist-to <DIRECTORY>` to specify a custom location for local data, you must also include the same `--persist-to <DIRECTORY>` when running other Wrangler commands that modify local data (and be sure to include the `--local` flag).
115+
116+
For example, to create a KV key named `test` with a value of `12345` in a local KV namespace, run:
117+
118+
<PackageManagers
119+
type="exec"
120+
pkg="wrangler"
121+
args="kv key put test 12345 --binding MY_KV_NAMESPACE --local --persist-to worker-local"
122+
/>
123+
124+
This command:
125+
126+
- Sets the KV key `test` to `12345` in the binding `MY_KV_NAMESPACE` (defined in your [Wrangler configuration file](/workers/wrangler/configuration/)).
127+
- Uses `--persist-to worker-local` to ensure the data is created in the **worker-local** directory instead of the default `.wrangler/state`.
128+
- Adds the `--local` flag, indicating you want to modify local data.
129+
130+
If `--persist-to` is not specified, Wrangler defaults to using `.wrangler/state` for local data.
131+
132+
</Details>
133+
134+
#### Using the Cloudflare Vite plugin
135+
136+
To customize where the Vite plugin stores local data, configure the [`persistState` option](/workers/vite-plugin/reference/api/#interface-pluginconfig) in your Vite config file:
137+
138+
```js title="vite.config.js"
139+
import { defineConfig } from "vite";
140+
import { cloudflare } from "@cloudflare/vite-plugin";
141+
142+
export default defineConfig({
143+
plugins: [
144+
cloudflare({
145+
persistState: "./my-custom-directory",
146+
}),
147+
],
148+
});
149+
```
150+
151+
#### Sharing state between tools
152+
153+
If you want Wrangler and the Vite plugin to share the same state, configure them to use the same persistence path.
Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
---
2+
pcx_content_type: navigation
3+
title: Remote data
4+
sidebar:
5+
order: 3
6+
head: []
7+
description: Working with data during remote development
8+
---
9+
10+
import {
11+
Details,
12+
LinkCard,
13+
Render,
14+
PackageManagers,
15+
FileTree,
16+
} from "~/components";
17+
18+
When developing Workers applications, you can use Wrangler's remote development mode (via [`wrangler dev --remote`](/workers/wrangler/commands/#dev)) to test your code on Cloudflare's global network before
19+
deploying to production. Remote development is [**not** supported in the Vite plugin](/workers/local-development/#choosing-between-wrangler-or-vite).
20+
21+
<PackageManagers type="exec" pkg="wrangler" args="dev --remote" />
22+
23+
### How It Works
24+
25+
The `wrangler dev --remote` command creates a temporary preview deployment on Cloudflare's infrastructure, allowing you to test your Worker in an environment that closely mirrors production.
26+
27+
When you run `wrangler dev --remote`:
28+
29+
- Your code is uploaded to a temporary preview environment on Cloudflare's infrastructure.
30+
- Changes to your code are automatically uploaded as you save.
31+
- All requests and execution happen on Cloudflare's global network
32+
- The preview automatically terminates when you exit the command
33+
34+
## When to Use Remote Development
35+
36+
- You need to develop using [bindings that don't work locally](/workers/local-development/bindings-per-env/) (such as [Browser Rendering](/browser-rendering/)).
37+
- You need to verify behavior specifically on Cloudflare's infrastructure.
38+
- You want to work with preview resources that mirror production.
39+
40+
## Isolating from Production
41+
42+
To protect production data, you can specify preview resources in your [Wrangler configuration](/workers/wrangler/configuration/), such as:
43+
44+
- [Preview namespaces for KV stores](/workers/wrangler/configuration/#kv-namespaces):`preview_id`.
45+
- This option is **required** when using `wrangler dev --remote`.
46+
- [Preview buckets for R2 storage](/workers/wrangler/configuration/#r2-buckets): `preview_bucket_name`.
47+
- [Preview database IDs for D1](/workers/wrangler/configuration/#d1-databases): `preview_database_id`
48+
49+
This separation ensures your development activities don't impact production data while still providing a realistic testing environment.
50+
51+
## Limitations
52+
53+
- When you run a remote development session using the `--remote` flag, a limit of 50 [routes](/workers/configuration/routing/routes/) per zone is enforced. Learn more in[ Workers platform limits](/workers/platform/limits/#number-of-routes-per-zone-when-using-wrangler-dev---remote).

0 commit comments

Comments
 (0)