-
Notifications
You must be signed in to change notification settings - Fork 10.6k
[Vite plugin]: add programmatic worker config #26819
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
Open
ascorbic
wants to merge
7
commits into
production
Choose a base branch
from
mk/vite-programmatic-config
base: production
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
+334
−3
Open
Changes from all commits
Commits
Show all changes
7 commits
Select commit
Hold shift + click to select a range
ef2a042
[Vite plugin]: add programmatic worker config
ascorbic afa9d0f
Add changelog
ascorbic e23f955
Change name of option
ascorbic 6e798b0
Document config values unsupported by Vite
ascorbic 80298ed
FIxes
ascorbic dcf3b40
Changes from review
ascorbic 2724e6d
Re-order
ascorbic File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
11 changes: 11 additions & 0 deletions
11
src/content/changelog/workers/2025-12-02-vite-optional-config.mdx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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. |
106 changes: 106 additions & 0 deletions
106
src/content/changelog/workers/2025-12-02-vite-programmatic-config.mdx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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/). |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
168 changes: 168 additions & 0 deletions
168
src/content/docs/workers/vite-plugin/reference/programmatic-configuration.mdx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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. | ||
|
|
||
| :::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 | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think we need something to this effect to discourage users from defining configuration this way by default.
There was a problem hiding this comment.
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?
There was a problem hiding this comment.
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.