Skip to content
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
38 commits
Select commit Hold shift + click to select a range
7e7f416
Initial Vite plugin docs
jamesopstad Mar 3, 2025
3d72d85
Update src/content/docs/workers/vite-plugin/api.mdx
jamesopstad Mar 3, 2025
faa371a
Update src/content/docs/workers/vite-plugin/api.mdx
jamesopstad Mar 3, 2025
73499b9
adds a directory structure for local development docs, and adds a Vi…
korinne Mar 6, 2025
c8d8ead
Update src/content/docs/workers/local-development/vite.mdx
korinne Mar 7, 2025
c2d590d
Update src/content/docs/workers/local-development/wrangler.mdx
korinne Mar 7, 2025
87e01b5
fix some broken links
korinne Mar 7, 2025
086a3cc
Merge branch 'korinne-vite-plugin-docs' of github.com:cloudflare/clou…
korinne Mar 7, 2025
f6cf8a0
consolidates current local dev docs under new directory, and includes
korinne Mar 11, 2025
22dd07e
Uses new PackageManager component in local-development/wrangler.mdx
korinne Mar 11, 2025
66508f7
adds bindings_per_env.mdx under src/content/partials/workers
korinne Mar 11, 2025
0c9b53d
Adds guidance for when to use Wrangler vs Vite, adds Vite to the bind…
korinne Mar 17, 2025
547e15b
updates Wrangler local development guide, and partial for local vs re…
korinne Mar 17, 2025
69b09ff
updates overview page to make more concise
korinne Mar 17, 2025
b09d283
merge production
korinne Mar 18, 2025
4caed42
Merge branch 'production' of github.com:cloudflare/cloudflare-docs in…
korinne Mar 18, 2025
1556028
fixes broken links
korinne Mar 18, 2025
ac90adc
Update src/content/docs/workers/local-development/vite.mdx
korinne Mar 19, 2025
2dfae73
Update src/content/docs/workers/local-development/vite.mdx
korinne Mar 19, 2025
df19876
Update src/content/docs/workers/local-development/vite.mdx
korinne Mar 19, 2025
9d5202c
Update src/content/docs/workers/local-development/index.mdx
korinne Mar 19, 2025
64875a9
moves local development section nearer to testing section
korinne Mar 28, 2025
57de775
cleans up text in choosing between wrangler and vite
korinne Apr 2, 2025
9aaeb9c
updates overview page for local development
korinne Apr 2, 2025
7b3f858
update overview page, add working with data page
korinne Apr 4, 2025
7255613
updates local development docs
korinne Apr 5, 2025
f888bee
Merge branch 'production' of github.com:cloudflare/cloudflare-docs in…
korinne Apr 5, 2025
9af5af8
Update src/content/docs/workers/local-development/local-data.mdx
korinne Apr 7, 2025
b2766b8
Update src/content/docs/workers/local-development/local-data.mdx
korinne Apr 7, 2025
54bbee8
Update src/content/docs/workers/local-development/wrangler-vs-vite.mdx
korinne Apr 7, 2025
3a6d19a
Update src/content/docs/workers/local-development/remote-data.mdx
korinne Apr 7, 2025
32273fb
Update src/content/docs/workers/local-development/local-data.mdx
korinne Apr 7, 2025
a64d2ca
Update src/content/docs/workers/local-development/local-data.mdx
korinne Apr 7, 2025
d325a33
Update src/content/docs/workers/local-development/local-data.mdx
korinne Apr 7, 2025
9e0b348
Update src/content/docs/workers/local-development/index.mdx
korinne Apr 7, 2025
f302af4
adds updates to remove separate vite vs wrangler docs, small changes
korinne Apr 7, 2025
d2ae2db
updates local-data.mdx
korinne Apr 7, 2025
72c19ca
adds changelog entry for full-stack frameworks GA support
korinne Apr 7, 2025
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
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
---
title: Full-stack frameworks now generally available on Cloudflare Workers
description: Cloudflare Workers now provides production ready, generally available (GA) support for React Router v7 (Remix), Astro, Hono, Vue.js, Nuxt, Svelte (SvelteKit), and more.
products:
- workers
- workers-for-platforms
date: 2025-04-08T18:00:00Z
hidden: true
---

import { Image } from "astro:assets";
import fullstackWorkers from "~/assets/images/changelog/workers/fullstack-on-workers.png";

<Image src={fullstackWorkers} alt="Fullstack on Cloudflare Workers" />

We're excited to announce that the following frameworks are now fully supported and **generally available** on Cloudlfare Workers:

- [React Router v7 (Remix)](/workers/frameworks/framework-guides/remix/)
- [Astro](/workers/frameworks/framework-guides/astro/)
- [Hono](/workers/frameworks/framework-guides/hono/)
- [Vue.js](/workers/frameworks/framework-guides/vue/)
- [Nuxt](/workers/frameworks/framework-guides/nuxt/)
- [Svelte (SvelteKit)](/workers/frameworks/framework-guides/svelte/)
- And [more](/workers/frameworks/).

The following frameworks are still in **beta**, but will be fully supported and GA in the next few months:

- [Next.js](/workers/frameworks/framework-guides/nextjs/), supported through [@opennextjs/cloudflare](/https://opennext.js.org/cloudflare) is now `v1.0-beta`. Those using the OpenNext adapter will also be able to easily upgrade to the [recently announced Next.js Deployments API](https://github.com/vercel/next.js/discussions/77740).
- [Angular](/workers/frameworks/framework-guides/angular/)
- [SolidJS (SolidStart)](/workers/frameworks/framework-guides/solid/)

You can also build complete full-stack apps on Workers **without a framework**:

- You can [“just use Vite"](https://blog.cloudflare.com/introducing-the-cloudflare-vite-plugin) and React together, and build a backend API in the same Worker. Follow our [React SPA with an API tutorial](/workers/vite-plugin/tutorial/) to learn how.

All together, these new additions allow you to build and host projects ranging from simple static sites to full-stack applications, all on Cloudflare Workers.

**Get started building today with our [Framework guides](/workers/frameworks/)**. Or, read more about our updates to building full-stack applications on Workers in our [Dev Week 2025 blog](https://blog.cloudflare.com/full-stack-development-on-cloudflare-workers).
2 changes: 1 addition & 1 deletion src/content/docs/workers/local-development.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
title: Local development
pcx_content_type: concept
sidebar:
order: 5
order: 14
head: []
description: Develop your Workers locally via Wrangler.
---
Expand Down
12 changes: 12 additions & 0 deletions src/content/docs/workers/local-development/bindings-per-env.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
---
pcx_content_type: navigation
title: Supported bindings in local and remote dev
sidebar:
order: 4
head: []
description: Supported bindings in local and remote development
---

import { Render } from "~/components";

<Render file="bindings_per_env" />
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
---
pcx_content_type: navigation
title: Environment variables and secrets
sidebar:
order: 1
head: []
description: Configuring environment variables and secrets for local development
---

import { Aside, PackageManagers, Steps } from "~/components";

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.

<Aside type="caution">
Be sure to add `.dev.vars` to your `.gitignore` so it never gets committed.
</Aside>

### Why use a `.dev.vars` file?

Use `.dev.vars` to set local overrides for environment variables that should not be checked into your repository.

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.

## Basic setup

<Steps>

1. Create a `.dev.vars` file in your project root.

2. Add key-value pairs:

```ini title=".dev.vars"
API_HOST="localhost:3000"
DEBUG="true"
SECRET_TOKEN="my-local-secret-token"
```

3. Run your `dev` command

**Wrangler**
<PackageManagers type="exec" pkg="wrangler" args="dev" />


**Vite plugin**
<PackageManagers type="exec" pkg="vite" args="dev" />

</Steps>

## Multiple local environments with `.dev.vars`

To simulate different local environments, you can:

<Steps>

1. Create a file named `.dev.vars.<environment-name>` . For example, we'll use `.dev.vars.staging`.

2. Add key-value pairs:
```ini title=".dev.vars.staging"
API_HOST="staging.localhost:3000"
DEBUG="false"
SECRET_TOKEN="staging-token"
```
3. Specify the environment when running the `dev` command:

**Wrangler**

<PackageManagers type="exec" pkg="wrangler" args="dev --env staging" />

**Vite plugin**

<PackageManagers type="exec" pkg="vite" args="dev" prefix="CLOUDFLARE_ENV=staging" />

Only the values from `.dev.vars.staging` will be applied instead of `.dev.vars`.

</Steps>

## Learn more

- To learn how to configure multiple environments in Wrangler configuration, [read the documenation](/workers/wrangler/environments/#_top).
- To learn how to use Wrangler environments and Vite environments together, [read the Vite plugin documentation](/workers/vite-plugin/reference/cloudflare-environments/)
51 changes: 51 additions & 0 deletions src/content/docs/workers/local-development/index.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
---
pcx_content_type: navigation
title: Local development
sidebar:
order: 6
head: []
description: Develop your Workers locally.
---

import { Details, LinkCard, Render, PackageManagers } from "~/components";

When building projects on Cloudflare Workers, you have two options for local development:

- [**Wrangler**](/workers/wrangler/), using the built-in [`wrangler dev`](/workers/wrangler/commands/#dev) command.
- [Vite](https://vite.dev/), using the [**Cloudflare Vite plugin**](/workers/vite-plugin/).

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.

## Choosing between Wrangler or Vite

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:

### When to use Wrangler

- **Backend & Workers-focused:**
If you're primarily building APIs, serverless functions, or background tasks, use Wrangler.

- **Remote development:**
If your project needs the ability to develop and test using production resources and data on Cloudflare's network, use Wrangler's `--remote` flag.

- **Simple frontends:**
If you have minimal frontend requirements and don’t need hot reloading or advanced bundling, Wrangler may be sufficient.

### When to use the Cloudflare Vite Plugin

Use the [Vite plugin](/workers/vite-plugin/) for:

- **Frontend-centric development:**
If you already use Vite with modern frontend frameworks like React, Vue, Svelte, or Solid, the Vite plugin integrates into your development workflow.

- **React Router v7:**
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.

- **Rapid iteration (HMR):**
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.

- **Advanced optimizations:**
If you require more advanced optimizations (code splitting, efficient bundling, CSS handling, build time transformations, etc.), Vite is a strong fit.

- **Greater flexibility:**
Due to Vite's advanced configuration options and large ecosystem of plugins, there is more flexibility to customize your development experience and build output.
153 changes: 153 additions & 0 deletions src/content/docs/workers/local-development/local-data.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,153 @@
---
pcx_content_type: navigation
title: Local data
sidebar:
order: 2
head: []
description: Working with data during local development
---

import {
Details,
LinkCard,
Render,
PackageManagers,
FileTree,
Aside,
} from "~/components";

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.

### How it works

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.

## Populating local resources with data

When you first start developing, your local resources will be empty. You'll need to populate them with data using the Wrangler CLI.

### KV namespaces

<Aside type="caution" title="Syntax note">

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/).

</Aside>

#### [Add a single key-value pair](/workers/wrangler/commands/#kv-key)

<PackageManagers
type="exec"
pkg="wrangler"
args="kv key put <KEY> <VALUE> --binding=<BINDING> --local "
/>

#### [Buld upload](/workers/wrangler/commands/#kv-bulk)

<PackageManagers
type="exec"
pkg="wrangler"
args="kv bulk put <FILENAME.json> --binding=<BINDING> --local"
/>

### R2 buckets

#### [Upload a file](/workers/wrangler/commands/#r2-object)

<PackageManagers
type="exec"
pkg="wrangler"
args="r2 object put <BUCKET>/<KEY> --file=<PATH_TO_FILE> --local"
/>

You may also include [other metadata](/workers/wrangler/commands/#r2-object-put).

### D1 databases

#### [Execute a SQL statement](/workers/wrangler/commands/#d1-execute)

<PackageManagers
type="exec"
pkg="wrangler"
args='d1 execute <DATABASE_NAME> --command="<SQL_QUERY>" --local'
/>

#### [Execute a SQL file](/workers/wrangler/commands/#d1-execute)

<PackageManagers
type="exec"
pkg="wrangler"
args="wrangler d1 execute <DATABASE_NAME> --file=./schema.sql --local"
/>

### Durable Objects

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.

## Where local data gets stored

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.

### Clearing local storage

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.

### Changing the local data directory

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.

#### Using Wrangler

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:

<PackageManagers
type="exec"
pkg="wrangler"
args="dev --persist-to <DIRECTORY>"
/>

:::note
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.
:::

<Details header="Using `--local` with `--persist-to`">
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).

For example, to create a KV key named `test` with a value of `12345` in a local KV namespace, run:

<PackageManagers
type="exec"
pkg="wrangler"
args="kv key put test 12345 --binding MY_KV_NAMESPACE --local --persist-to worker-local"
/>

This command:

- Sets the KV key `test` to `12345` in the binding `MY_KV_NAMESPACE` (defined in your [Wrangler configuration file](/workers/wrangler/configuration/)).
- Uses `--persist-to worker-local` to ensure the data is created in the **worker-local** directory instead of the default `.wrangler/state`.
- Adds the `--local` flag, indicating you want to modify local data.

If `--persist-to` is not specified, Wrangler defaults to using `.wrangler/state` for local data.

</Details>

#### Using the Cloudflare Vite plugin

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:

```js title="vite.config.js"
import { defineConfig } from "vite";
import { cloudflare } from "@cloudflare/vite-plugin";

export default defineConfig({
plugins: [
cloudflare({
persistState: "./my-custom-directory",
}),
],
});
```

#### Sharing state between tools

If you want Wrangler and the Vite plugin to share the same state, configure them to use the same persistence path.
Loading
Loading