[Workers] Add existing project deployment guide for React + Vite by thomasgauvin · Pull Request #31275 · cloudflare/cloudflare-docs

thomasgauvin · 2026-06-06T22:09:40Z

Summary

Updates the React + Vite framework guide to include instructions for deploying an existing React + Vite project to Cloudflare Workers, not just creating a new one from scratch.

The guide now uses tabs to separate the two paths:

Create new project (existing C3 flow)
Deploy existing project (new - adapt an existing Vite app using the Cloudflare Vite plugin)

Reusable steps from the Vite plugin tutorial have been extracted into shared partials under src/content/partials/workers/vite-plugin/. Both the tutorial and the React framework guide now consume these partials, eliminating duplication and making the content easier to reuse for other framework guides in the future.

Partial files created:

add-dependencies.mdx
add-plugin-to-vite-config.mdx
create-wrangler-config.mdx
update-gitignore.mdx
run-dev-server.mdx
build-app.mdx
preview-app.mdx
deploy.mdx
add-tsconfig-worker.mdx
add-worker-config.mdx
add-api-worker.mdx

Screenshots (optional)

Documentation checklist

The change adheres to the documentation style guide.

github-actions · 2026-06-06T22:10:26Z

This pull request requires reviews from CODEOWNERS as it changes files that match the following patterns:

Pattern	Owners
`/src/content/docs/workers/`	`@cloudflare/workers-docs`, `@GregBrimble`, `@irvinebroque`, `@mikenomitch`, `@korinne`, `@WalshyDev`, `@cloudflare/deploy-config`, `@cloudflare/product-owners`, `@cloudflare/wrangler`, `@MattieTK`, `@cloudflare/dev-plat-leads`, `@vy-ton`
`/src/content/partials/workers/`	`@cloudflare/workers-docs`, `@GregBrimble`, `@irvinebroque`, `@mikenomitch`, `@WalshyDev`, `@cloudflare/deploy-config`, `@cloudflare/product-owners`, `@cloudflare/wrangler`, `@MattieTK`, `@vy-ton`

cloudflare-docs-bot · 2026-06-06T22:12:23Z

Review

⚠️ 59 warnings and 3 suggestions found in commit 7205f4f.

Warnings (59)

File	Issue
`workers/framework-guides/web-apps/react.mdx` line 55	Directional words — Line adds 'Below is a simplified file tree of the project.' Fix: Replace with a direct reference by name or link.
`workers/framework-guides/web-apps/react.mdx` line 107	Contractions — Line contains 'don't' Fix: Remove the contraction: 'If you do not have one yet'
`workers/framework-guides/web-apps/react.mdx` line 147	Heading levels must be sequential — Line adds '### Add an API Worker to an existing project' as a body H3 with no preceding H2 in the document structure Fix: Change to '## Add an API Worker to an existing project' or add an H2 parent heading before it.
`workers/framework-guides/web-apps/react.mdx` line 29	Escape angle brackets in MDX prose — Line adds unescaped `>` in prose: `<Tabs>` Fix: Replace `>` with `>` or wrap the text in backticks.
`workers/framework-guides/web-apps/react.mdx` line 30	Escape angle brackets in MDX prose — Line adds unescaped `>` in prose: `<TabItem label="Create new project">` Fix: Replace `>` with `>` or wrap the text in backticks.
`workers/framework-guides/web-apps/react.mdx` line 109	Escape angle brackets in MDX prose — Line adds unescaped `<` in prose: `<PackageManagers` Fix: Replace `<` with `<` or wrap the text in backticks.
`workers/framework-guides/web-apps/react.mdx` line 113	Escape angle brackets in MDX prose — Line adds unescaped `>` in prose: `/>` Fix: Replace `>` with `>` or wrap the text in backticks.
`workers/framework-guides/web-apps/react.mdx` line 56	Escape angle brackets in MDX prose — Line adds unescaped `>` in prose: `<FileTree>` Fix: Replace `>` with `>` or wrap the text in backticks.
`workers/framework-guides/web-apps/react.mdx` line 65	Escape angle brackets in MDX prose — Line adds unescaped `>` in prose: `</FileTree>` Fix: Replace `>` with `>` or wrap the text in backticks.
`workers/framework-guides/web-apps/react.mdx` line 87	Escape angle brackets in MDX prose — Line adds unescaped `>` in prose: `</Details>` Fix: Replace `>` with `>` or wrap the text in backticks.
`workers/framework-guides/web-apps/react.mdx` line 95	Escape angle brackets in MDX prose — Line adds unescaped `>` in prose: `<PackageManagers type="run" args={"deploy"} />` Fix: Replace `>` with `>` or wrap the text in backticks.
`workers/framework-guides/web-apps/react.mdx` line 192	Escape angle brackets in MDX prose — Line adds unescaped `>` in prose: `</Steps>` Fix: Replace `>` with `>` or wrap the text in backticks.
`workers/framework-guides/web-apps/react.mdx` line 194	Escape angle brackets in MDX prose — Line adds unescaped `>` in prose: `</TabItem>` Fix: Replace `>` with `>` or wrap the text in backticks.
`workers/framework-guides/web-apps/react.mdx` line 100	Escape angle brackets in MDX prose — Line adds unescaped `>` in prose: `<TabItem label="Deploy existing project">` Fix: Replace `>` with `>` or wrap the text in backticks.
`workers/framework-guides/web-apps/react.mdx` line 151	Escape angle brackets in MDX prose — Line adds unescaped `>` in prose: `<Steps>` Fix: Replace `>` with `>` or wrap the text in backticks.
`workers/framework-guides/web-apps/react.mdx` line 119	Escape angle brackets in MDX prose — Line adds unescaped `>` in prose: `<Render file="vite-plugin/add-dependencies" product="workers" />` Fix: Replace `>` with `>` or wrap the text in backticks.
`workers/framework-guides/web-apps/react.mdx` line 121	Escape angle brackets in MDX prose — Line adds unescaped `>` in prose: `<Render file="vite-plugin/add-plugin-to-vite-config" product="workers" />` Fix: Replace `>` with `>` or wrap the text in backticks.
`workers/framework-guides/web-apps/react.mdx` line 127	Escape angle brackets in MDX prose — Line adds unescaped `>` in prose: `<Render file="vite-plugin/create-wrangler-config" product="workers" />` Fix: Replace `>` with `>` or wrap the text in backticks.
`workers/framework-guides/web-apps/react.mdx` line 131	Escape angle brackets in MDX prose — Line adds unescaped `>` in prose: `<Render file="vite-plugin/update-gitignore" product="workers" />` Fix: Replace `>` with `>` or wrap the text in backticks.
`workers/framework-guides/web-apps/react.mdx` line 135	Escape angle brackets in MDX prose — Line adds unescaped `>` in prose: `<Render file="vite-plugin/run-dev-server" product="workers" />` Fix: Replace `>` with `>` or wrap the text in backticks.
`workers/framework-guides/web-apps/react.mdx` line 139	Escape angle brackets in MDX prose — Line adds unescaped `>` in prose: `<Render file="vite-plugin/build-app" product="workers" />` Fix: Replace `>` with `>` or wrap the text in backticks.
`workers/framework-guides/web-apps/react.mdx` line 141	Escape angle brackets in MDX prose — Line adds unescaped `>` in prose: `<Render file="vite-plugin/preview-app" product="workers" />` Fix: Replace `>` with `>` or wrap the text in backticks.
`workers/framework-guides/web-apps/react.mdx` line 143	Escape angle brackets in MDX prose — Line adds unescaped `>` in prose: `<Render file="vite-plugin/deploy" product="workers" />` Fix: Replace `>` with `>` or wrap the text in backticks.
`workers/framework-guides/web-apps/react.mdx` line 154	Escape angle brackets in MDX prose — Line adds unescaped `>` in prose: `<Render file="vite-plugin/add-tsconfig-worker" product="workers" />` Fix: Replace `>` with `>` or wrap the text in backticks.
`workers/framework-guides/web-apps/react.mdx` line 158	Escape angle brackets in MDX prose — Line adds unescaped `>` in prose: `<Render file="vite-plugin/add-worker-config" product="workers" />` Fix: Replace `>` with `>` or wrap the text in backticks.
`workers/framework-guides/web-apps/react.mdx` line 162	Escape angle brackets in MDX prose — Line adds unescaped `>` in prose: `<Render file="vite-plugin/add-api-worker" product="workers" />` Fix: Replace `>` with `>` or wrap the text in backticks.
`workers/framework-guides/web-apps/react.mdx` line 175	Escape angle brackets in MDX prose — Line adds unescaped `<` in prose: `<div className="card">` Fix: Replace `<` with `<` or wrap the text in backticks.
`workers/framework-guides/web-apps/react.mdx` line 176	Escape angle brackets in MDX prose — Line adds unescaped `<` in prose: `<button` Fix: Replace `<` with `<` or wrap the text in backticks.
`workers/framework-guides/web-apps/react.mdx` line 177	Escape angle brackets in MDX prose — Line adds unescaped `>` in prose: `onClick={() => {` Fix: Replace `>` with `>` or wrap the text in backticks.
`workers/framework-guides/web-apps/react.mdx` line 179	Escape angle brackets in MDX prose — Line adds unescaped `>` in prose: `.then((res) => res.json() as Promise<{ name: string }>)` Fix: Replace `>` with `>` or wrap the text in backticks.
`workers/framework-guides/web-apps/react.mdx` line 180	Escape angle brackets in MDX prose — Line adds unescaped `>` in prose: `.then((data) => setName(data.name));` Fix: Replace `>` with `>` or wrap the text in backticks.
`workers/framework-guides/web-apps/react.mdx` line 182	Escape angle brackets in MDX prose — Line adds unescaped `>` in prose: `>` Fix: Replace `>` with `>` or wrap the text in backticks.
`workers/framework-guides/web-apps/react.mdx` line 184	Escape angle brackets in MDX prose — Line adds unescaped `<` in prose: `</button>` Fix: Replace `<` with `<` or wrap the text in backticks.
`workers/framework-guides/web-apps/react.mdx` line 185	Escape angle brackets in MDX prose — Line adds unescaped `<` in prose: `</div>` Fix: Replace `<` with `<` or wrap the text in backticks.
`workers/framework-guides/web-apps/react.mdx` line 195	Escape angle brackets in MDX prose — Line adds unescaped `>` in prose: `</Tabs>` Fix: Replace `>` with `>` or wrap the text in backticks.
`partials/workers/vite-plugin/add-api-worker.mdx` line 27	No directional words (above/below) — Line contains 'The Worker above will be invoked' Fix: Replace 'above' with a direct reference by name or link.
`partials/workers/vite-plugin/add-api-worker.mdx` line 40	WranglerConfig must use TOML input — `jsonc fence inside <WranglerConfig> Fix: Use` toml for the WranglerConfig content; JSON is auto-generated.
`partials/workers/vite-plugin/add-api-worker.mdx` line 38	Escape angle brackets in MDX prose — Line adds unescaped `>` in prose: `<WranglerConfig>` Fix: Replace `>` with `>` or wrap the text in backticks.
`partials/workers/vite-plugin/add-api-worker.mdx` line 55	Escape angle brackets in MDX prose — Line adds unescaped `>` in prose: `</WranglerConfig>` Fix: Replace `>` with `>` or wrap the text in backticks.
`partials/workers/vite-plugin/create-wrangler-config.mdx` line 13	WranglerConfig requires TOML input — `<WranglerConfig>` contains a ```jsonc fence with JSON config fields Fix: Replace the JSONC block with a TOML block; JSON output is auto-generated by the component
`partials/workers/vite-plugin/create-wrangler-config.mdx` line 11	Escape angle brackets in MDX prose — Line adds unescaped `>` in prose: `<WranglerConfig>` Fix: Replace `>` with `>` or wrap the text in backticks.
`partials/workers/vite-plugin/create-wrangler-config.mdx` line 24	Escape angle brackets in MDX prose — Line adds unescaped `>` in prose: `</WranglerConfig>` Fix: Replace `>` with `>` or wrap the text in backticks.
`partials/workers/vite-plugin/add-tsconfig-worker.mdx` line 9	Escape angle brackets in MDX prose — Line adds unescaped `>` in prose: `<PackageManagers type="add" pkg="@cloudflare/workers-types" dev />` Fix: Replace `>` with `>` or wrap the text in backticks.
`partials/workers/vite-plugin/add-worker-config.mdx` line 13	WranglerConfig input must be TOML — Uses `jsonc inside <WranglerConfig> instead of` toml Fix: Replace the jsonc block with a toml block; JSON output is auto-generated by the component.
`partials/workers/vite-plugin/add-worker-config.mdx` line 11	Escape angle brackets in MDX prose — Line adds unescaped `>` in prose: `<WranglerConfig>` Fix: Replace `>` with `>` or wrap the text in backticks.
`partials/workers/vite-plugin/add-worker-config.mdx` line 25	Escape angle brackets in MDX prose — Line adds unescaped `>` in prose: `</WranglerConfig>` Fix: Replace `>` with `>` or wrap the text in backticks.
`partials/workers/vite-plugin/run-dev-server.mdx` line 11	Escape angle brackets in MDX prose — Line adds unescaped `>` in prose: `<PackageManagers type="run" args="dev" />` Fix: Replace `>` with `>` or wrap the text in backticks.
`workers/vite-plugin/tutorial.mdx` line 43	Escape angle brackets in MDX prose — Line adds unescaped `>` in prose: `<Render file="vite-plugin/add-dependencies" product="workers" />` Fix: Replace `>` with `>` or wrap the text in backticks.
`workers/vite-plugin/tutorial.mdx` line 45	Escape angle brackets in MDX prose — Line adds unescaped `>` in prose: `<Render file="vite-plugin/add-plugin-to-vite-config" product="workers" />` Fix: Replace `>` with `>` or wrap the text in backticks.
`workers/vite-plugin/tutorial.mdx` line 47	Escape angle brackets in MDX prose — Line adds unescaped `>` in prose: `<Render file="vite-plugin/create-wrangler-config" product="workers" />` Fix: Replace `>` with `>` or wrap the text in backticks.
`workers/vite-plugin/tutorial.mdx` line 49	Escape angle brackets in MDX prose — Line adds unescaped `>` in prose: `<Render file="vite-plugin/update-gitignore" product="workers" />` Fix: Replace `>` with `>` or wrap the text in backticks.
`workers/vite-plugin/tutorial.mdx` line 51	Escape angle brackets in MDX prose — Line adds unescaped `>` in prose: `<Render file="vite-plugin/run-dev-server" product="workers" />` Fix: Replace `>` with `>` or wrap the text in backticks.
`workers/vite-plugin/tutorial.mdx` line 55	Escape angle brackets in MDX prose — Line adds unescaped `>` in prose: `<Render file="vite-plugin/add-tsconfig-worker" product="workers" />` Fix: Replace `>` with `>` or wrap the text in backticks.
`workers/vite-plugin/tutorial.mdx` line 57	Escape angle brackets in MDX prose — Line adds unescaped `>` in prose: `<Render file="vite-plugin/add-worker-config" product="workers" />` Fix: Replace `>` with `>` or wrap the text in backticks.
`workers/vite-plugin/tutorial.mdx` line 59	Escape angle brackets in MDX prose — Line adds unescaped `>` in prose: `<Render file="vite-plugin/add-api-worker" product="workers" />` Fix: Replace `>` with `>` or wrap the text in backticks.
`workers/vite-plugin/tutorial.mdx` line 130	Escape angle brackets in MDX prose — Line adds unescaped `>` in prose: `<Render file="vite-plugin/build-app" product="workers" />` Fix: Replace `>` with `>` or wrap the text in backticks.
`workers/vite-plugin/tutorial.mdx` line 132	Escape angle brackets in MDX prose — Line adds unescaped `>` in prose: `<Render file="vite-plugin/preview-app" product="workers" />` Fix: Replace `>` with `>` or wrap the text in backticks.
`workers/vite-plugin/tutorial.mdx` line 134	Escape angle brackets in MDX prose — Line adds unescaped `>` in prose: `<Render file="vite-plugin/deploy" product="workers" />` Fix: Replace `>` with `>` or wrap the text in backticks.
`partials/workers/vite-plugin/add-dependencies.mdx` line 9	Escape angle brackets in MDX prose — Line adds unescaped `>` in prose: `<PackageManagers type="add" pkg="@cloudflare/vite-plugin wrangler" dev />` Fix: Replace `>` with `>` or wrap the text in backticks.

Suggestions (3)

File	Issue
`partials/workers/vite-plugin/create-wrangler-config.mdx` line 34	Avoid 'See [link]' phrasing — Line reads 'See Static Assets for more information.' Fix: Use 'refer to Static Assets' instead
`partials/workers/vite-plugin/create-wrangler-config.mdx` line 37	Avoid LLM-filler phrases — Line starts with 'Note that the `directory` field is not used...' Fix: Remove 'Note that' and state the fact directly
`partials/workers/vite-plugin/build-app.mdx` line 15	Lists – bullet list with fewer than three items — The patch adds a bulleted list with only two items describing the dist directory contents. Fix: Consider rewriting the two-item list as prose instead of using a bulleted list.

Commands

Only codeowners can run commands. Post a comment with the command to trigger it.

Command	Description
`/review`	Runs a review now. Incremental if a prior review exists, full if not.
`/full-review`	Re-reviews the entire PR diff from scratch, ignoring incremental history. Useful after a rebase, when you want a fresh review, or if the bot gets out of sync and reports issues that no longer exist.

thomasgauvin · 2026-06-06T22:12:45Z

This first PR is focused on extracting the Vite Plugin tutorial into partials that can be reused in the Framework Guides 'deploy your project' sections

ask-bonk

6 issues found. 3 inline suggestions posted for the partials; 3 additional issues noted below.

HIGH

src/content/docs/workers/framework-guides/web-apps/react.mdx line 7: The description frontmatter is outdated. It only mentions creating a new project, but the page now covers deploying existing projects too. Update it to reflect both paths.
src/content/docs/workers/framework-guides/web-apps/react.mdx lines 13–15: Badge, Description, and InlineBadge are imported but never used. Remove them from the import block.

MEDIUM

src/content/docs/workers/vite-plugin/tutorial.mdx line 8: The reviewed date is stale (2025-04-04) after this significant refactor. Consider updating it if the content was verified end-to-end.

Out of scope

src/content/docs/workers/framework-guides/web-apps/react.mdx line 208: ./worker/index.ts should be in backticks per the style guide, but this is a pre-existing issue.

ask-bonk · 2026-06-06T22:19:58Z

+---
+{}
+---
+
+### Build your application
+
+Run `npm run build` to build your application.
+
+```sh
+npm run build
+```


Use PackageManagers for package commands per the style guide:

Suggested change

---

{}

---

### Build your application

Run `npm run build` to build your application.

```sh

npm run build

```

---

{}

---

import { PackageManagers } from "~/components";

### Build your application

Run the build command to build your application.

<PackageManagers type="run" args="build" />

ChampionCombat380

k0979122726@gmail.com

ask-bonk · 2026-06-06T22:19:58Z

+---
+{}
+---
+
+### Preview your application
+
+Run `npm run preview` to validate that your application runs as expected.
+
+```sh
+npm run preview
+```


Use PackageManagers for package commands per the style guide:

Suggested change

---

{}

---

### Preview your application

Run `npm run preview` to validate that your application runs as expected.

```sh

npm run preview

```

---

{}

---

import { PackageManagers } from "~/components";

### Preview your application

Run the preview command to validate that your application runs as expected.

<PackageManagers type="run" args="preview" />

ask-bonk · 2026-06-06T22:19:58Z

+---
+{}
+---
+
+### Deploy to Cloudflare
+
+Run `npm exec wrangler deploy` to deploy your application to Cloudflare.
+
+```sh
+npm exec wrangler deploy
+```


Use PackageManagers for package commands per the style guide:

Suggested change

---

{}

---

### Deploy to Cloudflare

Run `npm exec wrangler deploy` to deploy your application to Cloudflare.

```sh

npm exec wrangler deploy

```

---

{}

---

import { PackageManagers } from "~/components";

### Deploy to Cloudflare

Run the deploy command to deploy your application to Cloudflare.

<PackageManagers type="exec" pkg="wrangler" args="deploy" />

z0979122726@iCloud.com

cenganping502@gmail.com

ask-bonk · 2026-06-06T22:20:11Z

Labels applied: documentation, product:workers, triage.

Posted a review with 3 inline suggestions and a summary comment covering 6 issues.

HIGH

src/content/docs/workers/framework-guides/web-apps/react.mdx line 7: description frontmatter is outdated — only mentions creating a new project, but the page now covers deploying existing projects too.
src/content/docs/workers/framework-guides/web-apps/react.mdx lines 13–15: Badge, Description, and InlineBadge are imported but never used.

MEDIUM

src/content/partials/workers/vite-plugin/build-app.mdx, preview-app.mdx, and deploy.mdx: Package commands use bare sh fences instead of the PackageManagers component (style guide violation). Inline suggestions posted.
src/content/docs/workers/vite-plugin/tutorial.mdx line 8: reviewed date is stale (2025-04-04) after this significant refactor.

Out of scope

src/content/docs/workers/framework-guides/web-apps/react.mdx line 208: ./worker/index.ts should be in backticks per the style guide, but this is pre-existing.

PR otherwise looks structurally sound: no unescaped MDX characters, links are root-relative with trailing slashes, WranglerConfig is used for config blocks, and partialization is clean.

github run

github-actions · 2026-06-06T22:33:55Z

Preview URL: https://7205f4fe.preview.developers.cloudflare.com
Preview Branch URL: https://react-vite-existing-project-guide.preview.developers.cloudflare.com

Files with changes (up to 15)

Original Link	Updated Link
https://developers.cloudflare.com/workers/vite-plugin/tutorial/	https://react-vite-existing-project-guide.preview.developers.cloudflare.com/workers/vite-plugin/tutorial/
https://developers.cloudflare.com/workers/framework-guides/web-apps/react/	https://react-vite-existing-project-guide.preview.developers.cloudflare.com/workers/framework-guides/web-apps/react/

[Workers] Add existing project deployment guide for React + Vite

7205f4f

github-actions Bot added product:workers Related to Workers product size/l labels Jun 6, 2026

github-actions Bot assigned GregBrimble, irvinebroque, korinne, MattieTK, mikenomitch, vy-ton and WalshyDev Jun 6, 2026

thomasgauvin marked this pull request as ready for review June 6, 2026 22:12

thomasgauvin requested review from a team, GregBrimble, MattieTK, WalshyDev, irvinebroque, korinne, mikenomitch and vy-ton as code owners June 6, 2026 22:12

ask-bonk Bot added documentation Documentation edits triage Waiting for a docs team review. labels Jun 6, 2026

ask-bonk Bot reviewed Jun 6, 2026

View reviewed changes

Conversation

thomasgauvin commented Jun 6, 2026

Summary

Screenshots (optional)

Documentation checklist

Uh oh!

github-actions Bot commented Jun 6, 2026

Uh oh!

cloudflare-docs-bot Bot commented Jun 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review

Uh oh!

thomasgauvin commented Jun 6, 2026

Uh oh!

ask-bonk Bot left a comment

Choose a reason for hiding this comment

Uh oh!

ask-bonk Bot Jun 6, 2026

Choose a reason for hiding this comment

Uh oh!

K0979122726 Jun 6, 2026

Choose a reason for hiding this comment

Uh oh!

K0979122726 Jun 6, 2026

Choose a reason for hiding this comment

Uh oh!

ask-bonk Bot Jun 6, 2026

Choose a reason for hiding this comment

Uh oh!

ask-bonk Bot Jun 6, 2026

Choose a reason for hiding this comment

Uh oh!

K0979122726 Jun 6, 2026

Choose a reason for hiding this comment

Uh oh!

K0979122726 Jun 6, 2026

Choose a reason for hiding this comment

Uh oh!

ask-bonk Bot commented Jun 6, 2026

Uh oh!

github-actions Bot commented Jun 6, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

9 participants

cloudflare-docs-bot Bot commented Jun 6, 2026 •

edited

Loading