Update hosting.md #5252
Update hosting.md #5252
Conversation
WalkthroughAdds explicit, step-by-step Cloudflare Workers deployment instructions to the React hosting docs: add Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor Developer as Developer
participant Docs as docs/start/framework/react/hosting.md
participant LocalEnv as Local dev env
participant ViteCfg as vite.config.ts
participant WranglerCfg as wrangler.json
participant Cloudflare as Cloudflare Workers
Developer->>Docs: Read Cloudflare Workers steps
Note right of Docs: Install plugin, update vite config,\ncreate wrangler.json, add scripts
Developer->>LocalEnv: run install commands\n(e.g., pnpm add -D @cloudflare/vite-plugin)
LocalEnv->>ViteCfg: modify to import & use plugin
LocalEnv->>WranglerCfg: create/configure `wrangler.json`
Developer->>LocalEnv: run build + `wrangler deploy`
LocalEnv->>Cloudflare: push deployment
Cloudflare-->>Developer: deployment result (success/error)
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related PRs
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 inconclusive)
✅ Passed checks (2 passed)
✨ Finishing touches🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
docs/start/framework/react/hosting.md (2)
43-47: Consider adding wrangler to devDependenciesYou’re introducing wrangler.json below; most users will also need wrangler installed locally for builds/dev/deploys.
Add this alongside the plugin install:
pnpm add -D wrangler # or: npm i -D wrangler / yarn add -D wrangler / bun add -d wrangler
69-82: Tighten wrangler.json example (schema path, compatibility_date, nodejs_compat_v2, main)
- Prefix
$schemawith./to avoid resolution errors.- Set
compatibility_dateto today’s date (e.g.2025-09-26) and ensure it covers Node compatibility.- Only include
nodejs_compat_v2incompatibility_flagsif your Worker uses Node APIs.- Point
mainat your Worker entry file (e.g../src/index.ts) per @cloudflare/vite-plugin.- Prefer
wrangler.jsoncfor new projects, butwrangler.jsonremains supported.Proposed tweaks:
{ - "$schema": "node_modules/wrangler/config-schema.json", + "$schema": "./node_modules/wrangler/config-schema.json", "name": "tanstack-start-app", - "compatibility_date": "2025-09-02", - "compatibility_flags": ["nodejs_compat"], - "main": "@tanstack/react-start/server-entry", + "compatibility_date": "2025-09-26", + // Remove if you don't need Node APIs + "compatibility_flags": ["nodejs_compat_v2"], + // Worker entry file for Vite plugin + "main": "./src/index.ts", "vars": { "MY_VAR": "Hello from Cloudflare" } }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
docs/start/framework/react/hosting.md(2 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
docs/**/*.{md,mdx}
📄 CodeRabbit inference engine (AGENTS.md)
Use internal docs links relative to the docs/ folder (e.g., ./guide/data-loading)
Files:
docs/start/framework/react/hosting.md
docs/{router,start}/**
📄 CodeRabbit inference engine (AGENTS.md)
Place router docs under docs/router/ and start framework docs under docs/start/
Files:
docs/start/framework/react/hosting.md
🔇 Additional comments (1)
docs/start/framework/react/hosting.md (1)
49-49: Cloudflare plugin usage and ordering are correct
cloudflare({ viteEnvironment: { name: 'ssr' }})aligns with the current API and is correctly placed afterreact()per Vite’s plugin ordering recommendations.
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
docs/start/framework/react/hosting.md (1)
74-87: Remove invalid Wrangler “main” entryThe snippet’s
"main": "@tanstack/react-start/server-entry"won’t work—Wrangler expects a file path. Remove themainfield and let the Vite plugin generatedist/wrangler.jsonwithmain: "index.js", or setmainto your built worker file (e.g."main": "./dist/index.js").
🧹 Nitpick comments (3)
docs/start/framework/react/hosting.md (3)
45-47: Use consistent pnpm syntax (pnpm add -D).Use
pnpm add -D(as you do for wrangler below) for consistency and clarity.- pnpm install @cloudflare/vite-plugin -D + pnpm add @cloudflare/vite-plugin -D
105-109: Consider adding local dev with Wrangler.Optional but helpful: include
wrangler devfor a full Workers-local loop.-```bash -pnpm run build && pnpm run deploy -``` +```bash +# Local dev (preview) +pnpm wrangler dev + +# Build & deploy +pnpm run build && pnpm run deploy +```
111-111: Align wording with the CLI-based deployment.This section shows
wrangler deploy(CLI), not “one‑click” deploy. Adjust phrasing to avoid confusion.-Deploy your application to Cloudflare Workers using their one-click deployment process, and you're ready to go! +Deploy your application to Cloudflare Workers with `wrangler deploy`, and you're ready to go!
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
docs/start/framework/react/hosting.md(3 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
docs/**/*.{md,mdx}
📄 CodeRabbit inference engine (AGENTS.md)
Use internal docs links relative to the docs/ folder (e.g., ./guide/data-loading)
Files:
docs/start/framework/react/hosting.md
docs/{router,start}/**
📄 CodeRabbit inference engine (AGENTS.md)
Place router docs under docs/router/ and start framework docs under docs/start/
Files:
docs/start/framework/react/hosting.md
🔇 Additional comments (2)
docs/start/framework/react/hosting.md (2)
53-67: @cloudflare/vite-pluginviteEnvironmentoption is officially supported. The usage in your snippet is correct; no changes required.
80-82: No change required for Node.js compatibility flag.nodejs_compatremains valid with acompatibility_dateof 2025-09-02 (behaves the same asnodejs_compat_v2), so your config is correct.
| ```json | ||
|
|
||
| { | ||
| "scripts": { | ||
| "dev": "vite dev", | ||
| "build": "vite build && tsc --noEmit", | ||
| "start": "node .output/server/index.mjs", | ||
| // ============ 👇 add this line ============ | ||
| "deploy": "wrangler deploy" | ||
| }, | ||
| } | ||
|
|
||
| ``` |
There was a problem hiding this comment.
JSON snippet is invalid (comments and trailing comma).
The example uses a JSON code fence with comments and a trailing comma, which will not parse. Use jsonc or remove comments and trailing comma.
-```json
-
-{
- "scripts": {
- "dev": "vite dev",
- "build": "vite build && tsc --noEmit",
- "start": "node .output/server/index.mjs",
- // ============ 👇 add this line ============
- "deploy": "wrangler deploy"
- },
-}
-
-```
+```jsonc
+{
+ "scripts": {
+ "dev": "vite dev",
+ "build": "vite build && tsc --noEmit",
+ "start": "node .output/server/index.mjs",
+ // 👇 add this line
+ "deploy": "wrangler deploy"
+ }
+}
+```🤖 Prompt for AI Agents
In docs/start/framework/react/hosting.md around lines 91-103, the JSON example
uses a code-fence labeled json but contains JS-style comments and a trailing
comma which makes it invalid; change the fence to jsonc or remove the comment
and trailing comma so the snippet is valid JSON (either replace the fence with
```jsonc and keep the inline comment, or remove the comment line and the
trailing comma after the scripts object so it remains valid ```json).
2 participants
Summary by CodeRabbit