Skip to content

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

Open
thomasgauvin wants to merge 2 commits into
productionfrom
react-vite-existing-project-guide
Open

[Workers] Add existing project deployment guide for React + Vite#31275
thomasgauvin wants to merge 2 commits into
productionfrom
react-vite-existing-project-guide

Conversation

@thomasgauvin

Copy link
Copy Markdown
Contributor

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

@github-actions

github-actions Bot commented Jun 6, 2026

Copy link
Copy Markdown
Contributor

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

@thomasgauvin thomasgauvin marked this pull request as ready for review June 6, 2026 22:12
@cloudflare-docs-bot

cloudflare-docs-bot Bot commented Jun 6, 2026

Copy link
Copy Markdown
Contributor

Review

❌ Review failed for commit 97fbd75. This is usually a transient error — it will retry on the next push.

@thomasgauvin

Copy link
Copy Markdown
Contributor Author

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 ask-bonk Bot added documentation Documentation edits triage Waiting for a docs team review. labels Jun 6, 2026

@ask-bonk ask-bonk Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

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.

Comment thread src/content/partials/workers/vite-plugin/build-app.mdx Outdated
Comment thread src/content/partials/workers/vite-plugin/preview-app.mdx Outdated
Comment thread src/content/partials/workers/vite-plugin/deploy.mdx Outdated
@ask-bonk

ask-bonk Bot commented Jun 6, 2026

Copy link
Copy Markdown
Contributor

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

…ide violations, and use toml in WranglerConfig
@thomasgauvin thomasgauvin force-pushed the react-vite-existing-project-guide branch from 97fbd75 to 5cbf41b Compare June 7, 2026 13:44
@thomasgauvin

Copy link
Copy Markdown
Contributor Author

/bonk rereview

@ask-bonk ask-bonk Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

All issues from the first review have been resolved. One new style guide issue found.

MEDIUM

  • src/content/partials/workers/vite-plugin/add-api-worker.mdx line 11: Worker code must use TypeScriptExample, not a bare ts fence. Update the import on line 5 to include TypeScriptExample and wrap the code block in <TypeScriptExample filename="worker/index.ts">.

Comment thread src/content/partials/workers/vite-plugin/add-api-worker.mdx
@ask-bonk

ask-bonk Bot commented Jun 7, 2026

Copy link
Copy Markdown
Contributor

All issues from the first review have been resolved:

  • react.mdx description frontmatter now covers both paths
  • Unused imports (Badge, Description, InlineBadge) removed
  • PackageManagers component used correctly in all three partials (build-app.mdx, preview-app.mdx, deploy.mdx)
  • tutorial.mdx reviewed date updated to 2026-06-07

One new issue found and posted to PR #31275:

MEDIUM

  • src/content/partials/workers/vite-plugin/add-api-worker.mdx line 11: The Worker code example uses a bare ts fence. The style guide requires TypeScriptExample for all Workers JS/TS examples. Update the import on line 5 to include TypeScriptExample and wrap the code block in <TypeScriptExample filename="worker/index.ts">.

github run

@github-actions

github-actions Bot commented Jun 7, 2026

Copy link
Copy Markdown
Contributor

CI run failed: build logs

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

documentation Documentation edits product:workers Related to Workers product size/l triage Waiting for a docs team review.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

9 participants