Skip to content
Open
Show file tree
Hide file tree
Changes from all 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
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
---
title: Wrangler config is optional when using Vite plugin
description: When using the Cloudflare Vite plugin in an assets-only (static) site, a Wrangler configuration file is now optional.
products:
- workers
date: 2025-12-02
---

When using the [Cloudflare Vite plugin](/workers/vite-plugin/) to build and deploy Workers, a Wrangler configuration file is now optional for assets-only (static) sites. If no `wrangler.toml`, `wrangler.json`, or `wrangler.jsonc` file is found, the plugin generates sensible defaults for an assets-only site. The `name` is based on the `package.json` or the project directory name, and the `compatibility_date` uses the latest date supported by your installed Miniflare version.

This allows easier setup for static sites using Vite. Note that SPAs will still need to [set `assets.not_found_handling` to `single-page-application`](https://developers.cloudflare.com/workers/static-assets/routing/single-page-application/) in order to function correctly.
Original file line number Diff line number Diff line change
@@ -0,0 +1,106 @@
---
title: Configure Workers programmatically using the Vite plugin
description: The Cloudflare Vite plugin can now programmatically configure Workers without a Wrangler config file, or modify existing configuration.
products:
- workers
date: 2025-12-02
---

The [Cloudflare Vite plugin](/workers/vite-plugin/) now supports programmatic configuration of Workers without a Wrangler configuration file. You can use the `config` option to define Worker settings directly in your Vite configuration, or to modify existing configuration loaded from a Wrangler config file. This is particularly useful when integrating with other build tools or frameworks, as it allows them to control Worker configuration without needing users to manage a separate config file.

## The `config` option

The Vite plugin's new `config` option accepts either a partial configuration object or a function that receives the current configuration and returns overrides. This option is applied after any config file is loaded, allowing the plugin to override specific values or define Worker configuration entirely in code.

## Example usage

Setting `config` to an object to provide configuration values that merge with defaults and config file settings:

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

export default defineConfig({
plugins: [
cloudflare({
config: {
name: "my-worker",
compatibility_flags: ["nodejs_compat"],
send_email: [
{
name: "EMAIL",
},
],
},
}),
],
});
```

Use a function to modify the existing configuration:

```ts title="vite.config.ts"
import { defineConfig } from "vite";
import { cloudflare } from "@cloudflare/vite-plugin";
export default defineConfig({
plugins: [
cloudflare({
config: (userConfig) => {
delete userConfig.compatibility_flags;
},
}),
],
});
```

Return an object with values to merge:

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

export default defineConfig({
plugins: [
cloudflare({
config: (userConfig) => {
if (!userConfig.compatibility_flags.includes("no_nodejs_compat")) {
return { compatibility_flags: ["nodejs_compat"] };
}
},
}),
],
});
```

### Auxiliary Workers

Auxiliary Workers also support the `config` option, enabling multi-Worker architectures without config files.

Define auxiliary Workers without config files using `config` inside the `auxiliaryWorkers` array:

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

export default defineConfig({
plugins: [
cloudflare({
config: {
name: "entry-worker",
main: "./src/entry.ts",
services: [{ binding: "API", service: "api-worker" }],
},
auxiliaryWorkers: [
{
config: {
name: "api-worker",
main: "./src/api.ts",
},
},
],
}),
],
});
```

For more details and examples, see [Programmatic configuration](/workers/vite-plugin/reference/programmatic-configuration/).
23 changes: 21 additions & 2 deletions src/content/docs/workers/vite-plugin/reference/api.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,15 @@ It accepts an optional `PluginConfig` parameter.

For more information about the Worker configuration, see [Configuration](/workers/wrangler/configuration/).

- `config` <Type text='Partial<WorkerConfig> | ((config: WorkerConfig) => Partial<WorkerConfig> | void)' /> <MetaInfo text='optional' />

Customize or override Worker configuration programmatically.
Accepts a partial configuration object or a function that receives the current config.

Applied after any config file loads. Use it to override values, modify the existing config, or define Workers entirely in code.

See [Programmatic configuration](/workers/vite-plugin/reference/programmatic-configuration/) for details.

- `viteEnvironment` <Type text='{ name?: string }' /> <MetaInfo text='optional' />

Optional Vite environment options.
Expand Down Expand Up @@ -75,12 +84,22 @@ It accepts an optional `PluginConfig` parameter.

## `interface AuxiliaryWorkerConfig`

- `configPath` <Type text='string' />
Auxiliary Workers require a `configPath`, a `config` option, or both.

A required path to your Worker config file.
- `configPath` <Type text='string' /> <MetaInfo text='optional' />

The path to your Worker config file.
This field is required unless `config` is provided.

For more information about the Worker configuration, see [Configuration](/workers/wrangler/configuration/).

- `config` <Type text='Partial<WorkerConfig> | ((config: WorkerConfig) => Partial<WorkerConfig> | void)' /> <MetaInfo text='optional' />

Customize or override Worker configuration programmatically.
When used without `configPath`, this allows defining auxiliary Workers entirely in code.

See [Programmatic configuration](/workers/vite-plugin/reference/programmatic-configuration/) for usage examples.

- `viteEnvironment` <Type text='{ name?: string }' /> <MetaInfo text='optional' />

Optional Vite environment options.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -25,5 +25,32 @@ Running `wrangler deploy --env some-env` is therefore not applicable and the env

There are various options in the [Worker config file](/workers/wrangler/configuration/) that are ignored when using Vite, as they are either no longer applicable or are replaced by Vite equivalents.
If these options are provided, then warnings will be printed to the console with suggestions for how to proceed.
Examples where the Vite configuration should be used instead include `alias` and `define`.

### Not applicable

The following build-related options are handled by Vite and are not applicable when using the Cloudflare Vite plugin:

- `tsconfig`
- `rules`
- `build`
- `no_bundle`
- `find_additional_modules`
- `base_dir`
- `preserve_file_names`

### Not supported

- `site` — Use [Workers Assets](/workers/static-assets/) instead.

### Replaced by Vite equivalents

The following options have Vite equivalents that should be used instead:

| Wrangler option | Vite equivalent |
| --- | --- |
| `define` | [`define`](https://vite.dev/config/shared-options.html#define) |
| `alias` | [`resolve.alias`](https://vite.dev/config/shared-options.html#resolve-alias) |
| `minify` | [`build.minify`](https://vite.dev/config/build-options.html#build-minify) |
| Local dev settings (`ip`, `port`, `local_protocol`, etc.) | [Server options](https://vite.dev/config/server-options.html) |

See [Vite Environments](/workers/vite-plugin/reference/vite-environments/) for more information about configuring your Worker environments in Vite.
Original file line number Diff line number Diff line change
@@ -0,0 +1,168 @@
---
pcx_content_type: reference
title: Programmatic configuration
sidebar:
order: 10
description: Configure Workers programmatically using the Vite plugin
---

import { WranglerConfig } from "~/components";

The Wrangler configuration file is optional when using the Cloudflare Vite plugin. Without one, the plugin uses default values. You can customize Worker configuration programmatically with the `config` option. This is useful when the Cloudflare plugin runs inside another plugin or framework.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
:::note
Configuration provided via the `config` option will not be included when running `wrangler types` or when running resource based Wrangler CLI commands such as `wrangler kv`, `wrangler d1` etc.
:::

I think we need something to this effect to discourage users from defining configuration this way by default.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh I actually wrote something but never committed it! I was wondering if it was worth saying how to manually add types, but I don't think we document that anywhere do we?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As discussed in chat, I don't think this is documented but it can be done via declaration merging.

:::note
Programmatic configuration is primarily designed for use by frameworks and plugin developers. Users should normally use Wrangler config files instead. Configuration set via the `config` option will not be included when running `wrangler types` or resource based Wrangler CLI commands such as `wrangler kv` or `wrangler d1`.
:::

## Default configuration

Without a configuration file, the plugin generates sensible defaults for an assets-only Worker. The `name` comes from `package.json` or the project directory name. The `compatibility_date` uses the latest date supported by your installed Miniflare version.

## The `config` option

The `config` option offers three ways to programmatically configure your Worker. You can set any property from the [Wrangler configuration file](/workers/wrangler/configuration/), though some options are [ignored or replaced by Vite equivalents](/workers/vite-plugin/reference/migrating-from-wrangler-dev/#redundant-fields-in-the-wrangler-config-file).

:::note
You cannot define [Cloudflare environments](/workers/vite-plugin/reference/cloudflare-environments/) via `config`, as they are resolved before this option is applied.
:::

### Configuration object

Set `config` to an object to provide values that merge with defaults and Wrangler config file settings:

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

export default defineConfig({
plugins: [
cloudflare({
config: {
compatibility_date: "2025-01-01",
vars: {
API_URL: "https://api.example.com",
},
},
}),
],
});
```

These values merge with Wrangler config file values, with the `config` values taking precedence.

### Dynamic configuration function

Use a function when configuration depends on existing config values or external data, or if you need to compute or conditionally set values:

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

export default defineConfig({
plugins: [
cloudflare({
config: (userConfig) => ({
vars: {
WORKER_NAME: userConfig.name,
BUILD_TIME: new Date().toISOString(),
},
}),
}),
],
});
```

The function receives the current configuration (defaults or loaded config file). Return an object with values to merge.

### In-place editing

A `config` function can mutate the config object directly instead of returning overrides. This is useful for deleting properties or removing array items:

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

export default defineConfig({
plugins: [
cloudflare({
config: (userConfig) => {
// Replace all existing compatibility flags
userConfig.compatibility_flags = ["nodejs_compat"];
},
}),
],
});
```

:::note
When editing in place, do not return a value from the function.
:::

## Auxiliary Workers

Auxiliary Workers also support the `config` option, enabling multi-Worker architectures without config files.

Define auxiliary Workers without config files using `config` inside the `auxiliaryWorkers` array:

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

export default defineConfig({
plugins: [
cloudflare({
config: {
name: "entry-worker",
main: "./src/entry.ts",
compatibility_date: "2025-01-01",
services: [{ binding: "API", service: "api-worker" }],
},
auxiliaryWorkers: [
{
config: {
name: "api-worker",
main: "./src/api.ts",
compatibility_date: "2025-01-01",
},
},
],
}),
],
});
```

### Configuration overrides

Combine a config file with `config` to override specific values:

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

export default defineConfig({
plugins: [
cloudflare({
configPath: "./wrangler.jsonc",
auxiliaryWorkers: [
{
configPath: "./workers/api/wrangler.jsonc",
config: {
vars: {
ENDPOINT: "https://api.example.com/v2",
},
},
},
],
}),
],
});
```

## Configuration merging behavior

The `config` option uses [defu](https://github.com/unjs/defu) for merging configuration objects.

- Object properties are recursively merged
- Arrays are concatenated (`config` values first, then existing values)
- Primitive values from `config` override existing values
- `undefined` values in `config` do not override existing values
Loading