Skip to content

Commit bac5c2b

Browse files
committed
Initial PR feedback
1 parent cf4ac5b commit bac5c2b

File tree

9 files changed

+57
-28
lines changed

9 files changed

+57
-28
lines changed

src/content/docs/workers/vite-plugin/api.mdx

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ sidebar:
77
description: Vite plugin API
88
---
99

10-
### `cloudflare`
10+
### `cloudflare()`
1111

1212
The `cloudflare` plugin should be included in the Vite `plugins` array:
1313

@@ -29,38 +29,41 @@ It accepts an optional `PluginConfig` parameter.
2929
- `configPath?: string`
3030

3131
An optional path to your Worker config file.
32-
By default, a `wrangler.toml`, `wrangler.json`, or `wrangler.jsonc` file in the root of your application will be used as the Worker config.
32+
By default, a `wrangler.jsonc`, `wrangler.json`, or `wrangler.toml` file in the root of your application will be used as the Worker config.
3333

3434
- `viteEnvironment?: { name?: string }`
3535

3636
Optional Vite environment options.
3737
By default, the environment name is the Worker name with `-` characters replaced with `_`.
3838
Setting the name here will override this.
3939
A typical use case is setting `viteEnvironment: { name: "ssr" }` to apply the Worker to the SSR environment.
40+
See [Vite Environments](/workers/vite-plugin/vite-environments/) for more information.
4041

4142
- `persistState?: boolean | { path: string }`
4243

4344
An optional override for state persistence.
44-
By default, state is persisted to `.wrangler/state` in a `v3` subdirectory.
45+
By default, state is persisted to `.wrangler/state`.
4546
A custom `path` can be provided or, alternatively, persistence can be disabled by setting the value to `false`.
4647

4748
- `inspectorPort?: number | false`
4849

49-
An optional inspector port to use for debugging your Workers.
50-
The default value is `9229`.
51-
Setting this to `false` will disable the debugging inspector.
50+
An optional override for debugging your Workers.
51+
By default, the debugging inspector is enabled and listens on port `9229`.
52+
A custom port can be provided or, alternatively, setting this to `false` will disable the debugging inspector.
53+
See [Debugging](/workers/vite-plugin/debugging/) for more information.
5254

5355
- `auxiliaryWorkers?: Array<AuxiliaryWorkerConfig>`
5456

5557
An optional array of auxiliary Workers.
58+
Auxiliary Workers are additional Workers that are used as part of your application.
5659
You can use [service bindings](/workers/runtime-apis/bindings/service-bindings/) to call auxiliary Workers from your main (entry) Worker.
5760
All requests are routed through your entry Worker.
5861
During the build, each Worker is output to a separate subdirectory of `dist`.
5962

6063
:::note
6164
When running `wrangler deploy`, only your main (entry) Worker will be deployed.
62-
If using multiple Workers, each must be deployed individually.
63-
You can inspect the `dist` directory and then run `wrangler deploy -c path-to-worker-output-config` for each.
65+
If using multiple Workers, each auxiliary Worker must be deployed individually.
66+
You can inspect the `dist` directory and then run `wrangler deploy -c dist/<auxiliary-worker>/wrangler.json` for each.
6467
:::
6568

6669
### `interface AuxiliaryWorkerConfig`
@@ -74,3 +77,4 @@ You can inspect the `dist` directory and then run `wrangler deploy -c path-to-wo
7477
Optional Vite environment options.
7578
By default, the environment name is the Worker name with `-` characters replaced with `_`.
7679
Setting the name here will override this.
80+
See [Vite Environments](/workers/vite-plugin/vite-environments/) for more information.

src/content/docs/workers/vite-plugin/cloudflare-environments.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ pcx_content_type: reference
33
title: Cloudflare Environments
44
head: []
55
sidebar:
6-
order: 6
6+
order: 9
77
description: Using Cloudflare environments with the Vite plugin
88
---
99

src/content/docs/workers/vite-plugin/debugging.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ pcx_content_type: reference
33
title: Debugging
44
head: []
55
sidebar:
6-
order: 8
6+
order: 5
77
description: Debugging with the Vite plugin
88
---
99

src/content/docs/workers/vite-plugin/get-started.mdx

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,10 @@ export default defineConfig({
5252
});
5353
```
5454

55+
The Cloudflare Vite plugin doesn't require any configuration by default and will look for a `wrangler.jsonc`, `wrangler.json` or `wrangler.toml` in the root of your application.
56+
57+
Refer to the [API reference](/workers/vite-plugin/api/) for configuration options.
58+
5559
### Create your Worker config file
5660

5761
<WranglerConfig>
@@ -64,6 +68,12 @@ main = "./src/index.ts"
6468

6569
</WranglerConfig>
6670

71+
The `name` field specifies the name of your Worker.
72+
By default, this is also used as the name of the Worker's Vite Environment (see [Vite Environments](/workers/vite-plugin/vite-environments/) for more information).
73+
The `main` field specifies the entry file for your Worker code.
74+
75+
For more information about the Worker configuration, see [Configuration](/workers/wrangler/configuration/).
76+
6777
### Create your Worker entry file
6878

6979
```ts
@@ -76,4 +86,8 @@ export default {
7686
};
7787
```
7888

79-
You can now develop (`npm run dev`), build (`npm run build`), preview (`npm run preview`), and deploy (`npm run deploy`) your application.
89+
A request to this Worker will return 'Running in Cloudflare-Workers!', demonstrating that the code is running inside the Workers runtime.
90+
91+
### Dev, build, preview and deploy
92+
93+
You can now start the Vite development server (`npm run dev`), build the application (`npm run build`), preview the built application (`npm run preview`), and deploy to Cloudflare (`npm run deploy`).

src/content/docs/workers/vite-plugin/index.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ Your Worker code runs inside [workerd](https://github.com/cloudflare/workerd), m
2222
### Use cases
2323

2424
- React Router v7 (support for more full-stack frameworks is coming soon)
25-
- Single-page applications (SPAs), with or without an integrated backend API
25+
- Static sites, such as single-page applications, with or without an integrated backend API
2626
- Standalone Workers
2727
- Multi-Worker applications
2828

src/content/docs/workers/vite-plugin/migrating-from-wrangler-dev.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ pcx_content_type: reference
33
title: Migrating from wrangler dev
44
head: []
55
sidebar:
6-
order: 9
6+
order: 6
77
description: Migrating from wrangler dev to the Vite plugin
88
---
99

src/content/docs/workers/vite-plugin/static-assets.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ pcx_content_type: reference
33
title: Static Assets
44
head: []
55
sidebar:
6-
order: 5
6+
order: 4
77
description: Static assets and the Vite plugin
88
---
99

src/content/docs/workers/vite-plugin/tutorial.mdx

Lines changed: 24 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ Much of the content can also be applied to adapting existing Vite projects and t
1414

1515
:::note
1616
If you want to start a new app with a template already set up with Vite, React and the Cloudflare Vite plugin, refer to the [React framework guide](/workers/frameworks/framework-guides/react/).
17+
To create a standalone Worker, refer to [Get started](/workers/vite-plugin/get-started/).
1718
:::
1819

1920
### Introduction
@@ -69,10 +70,11 @@ assets = { not_found_handling = "single-page-application" }
6970
The [`not_found_handling`](/workers/static-assets/routing/#not_found_handling--404-page--single-page-application--none) value has been set to `single-page-application`.
7071
This means that all not found requests will serve the `index.html` file.
7172
With the Cloudflare plugin, the `assets` routing configuration is used in place of Vite's default behavior.
72-
This ensures that your application's routing works the same way while developing as it does when deployed to production.
73+
This ensures that your application's [routing configuration](/workers/static-assets/routing/#routing-configuration) works the same way while developing as it does when deployed to production.
7374

7475
Note that the [`directory`](/workers/static-assets/binding/#directory) field is not used when configuring assets with Vite.
7576
The `directory` in the output configuration will automatically point to the client build output.
77+
See [Static Assets](/workers/vite-plugin/static-assets/) for more information.
7678

7779
:::note
7880
When using the Cloudflare Vite plugin, the Worker config (for example, `wrangler.jsonc`) that you provide is the input configuration file.
@@ -93,10 +95,10 @@ Add the following lines to your `.gitignore` file:
9395

9496
#### Run the development server
9597

96-
Run `npm run dev` to verify that your application is working as expected.
98+
Run `npm run dev` to start the Vite development server and verify that your application is working as expected.
9799

98100
For a purely front-end application, you could now build (`npm run build`), preview (`npm run preview`), and deploy (`npm exec wrangler deploy`) your application.
99-
However, this tutorial will show you how to go a step further and add an API Worker.
101+
This tutorial, however, will show you how to go a step further and add an API Worker.
100102

101103
### Add an API Worker
102104

@@ -113,7 +115,7 @@ However, this tutorial will show you how to go a step further and add an API Wor
113115
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.worker.tsbuildinfo",
114116
"types": ["@cloudflare/workers-types/2023-07-01", "vite/client"],
115117
},
116-
"include": ["api"],
118+
"include": ["worker"],
117119
}
118120
```
119121

@@ -138,14 +140,17 @@ However, this tutorial will show you how to go a step further and add an API Wor
138140
name = "cloudflare-vite-tutorial"
139141
compatibility_date = "2024-12-30"
140142
assets = { not_found_handling = "single-page-application" }
141-
main = "./api/index.ts"
143+
main = "./worker/index.ts"
142144
```
143145

144146
</WranglerConfig>
147+
148+
Setting the `not_found_handling` to `single-page-application` means that navigation requests that do not match a static asset will always return the `index.html` file.
149+
145150
#### Add your API Worker
146151

147152
```ts
148-
// api/index.ts
153+
// worker/index.ts
149154

150155
interface Env {
151156
ASSETS: Fetcher;
@@ -169,8 +174,10 @@ export default {
169174
The Worker above will be invoked for any non-navigation request that does not match a static asset.
170175
It returns a JSON response if the `pathname` starts with `/api/` and otherwise return a `404` response.
171176

172-
Browser navigations will invoke the `not_found_handling` behavior defined in the Worker config.
173-
As we have set this to `single-page-application`, the `index.html` file is always returned.
177+
:::note
178+
For top-level navigation requests, browsers send a `Sec-Fetch-Mode: navigate` header.
179+
If this is present and the URL does not match a static asset, the `not_found_handling` behavior will be invoked rather than the Worker.
180+
:::
174181

175182
#### Call the API from the client
176183

@@ -247,8 +254,10 @@ With Vite and the Cloudflare plugin, you can iterate on the client and server pa
247254

248255
Run `npm run build` to build your application.
249256

250-
If you inspect the `dist` directory, you will see that it contains two subdirectories: `client` and `cloudflare-vite-tutorial`.
251-
The `cloudflare-vite-tutorial` directory contains your Worker code and the output `wrangler.json` configuration.
257+
If you inspect the `dist` directory, you will see that it contains two subdirectories:
258+
259+
- `client` - the client code that runs in the browser
260+
- `cloudflare-vite-tutorial` - the Worker code and the output `wrangler.json` Worker configuration
252261

253262
#### Preview your application
254263

@@ -262,10 +271,12 @@ This command will automatically use the output `wrangler.json` that was included
262271

263272
### Next steps
264273

265-
In this tutorial, we created an SPA that could be deployed as a Worker with Workers Assets.
266-
We then added an API Worker that could be accessed from the front-end code and deployed to Cloudflare.
274+
In this tutorial, we created an SPA that could be deployed as a Worker with static assets.
275+
We then added an API Worker that could be accessed from the front-end code.
276+
Finally, we deployed both the client and server-side parts of the application to Cloudflare.
277+
267278
Possible next steps include:
268279

269280
- Adding a binding to another Cloudflare service such as a [KV namespace](/kv/) or [D1 database](/d1/)
270281
- Expanding the API to include additional routes
271-
- Using a library, such as [tRPC](https://trpc.io/) or [Hono](https://hono.dev/), in your API Worker
282+
- Using a library, such as [Hono](https://hono.dev/) or [tRPC](https://trpc.io/), in your API Worker

src/content/docs/workers/vite-plugin/vite-environments.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ pcx_content_type: reference
33
title: Vite Environments
44
head: []
55
sidebar:
6-
order: 4
6+
order: 8
77
description: Vite environments and the Vite plugin
88
---
99

0 commit comments

Comments
 (0)