feat(create-cloudflare): new design for the react template

[edmundhung]

Fixes n/a.

We updated create-vite from v8 to v9 in #12906. This updates our template to follows the latest Vite React starter more closely.

---

• Tests
  • Tests included/updated
  • Automated tests not possible - manual testing has been completed as follows:
  • Additional testing not necessary because: covered by existing tests
• Public documentation
  • Cloudflare docs PR(s):
  • Documentation not necessary because: no feature change

A picture of a cute animal (not mandatory, but encouraged)

---

[changeset-bot]

🦋 Changeset detected

Latest commit: 241aa3f

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[workers-devprod]

Codeowners approval required for this PR:

• @cloudflare/wrangler

Show detailed file reviewers

• packages/create-cloudflare/templates/react/workers/js/src/App.css: [@cloudflare/wrangler]
• packages/create-cloudflare/templates/react/workers/js/src/App.jsx: [@cloudflare/wrangler]
• packages/create-cloudflare/templates/react/workers/js/src/assets/Cloudflare_Logo.svg: [@cloudflare/wrangler]
• packages/create-cloudflare/templates/react/workers/js/src/assets/cloudflare.svg: [@cloudflare/wrangler]
• packages/create-cloudflare/templates/react/workers/ts/src/App.css: [@cloudflare/wrangler]
• packages/create-cloudflare/templates/react/workers/ts/src/App.tsx: [@cloudflare/wrangler]
• packages/create-cloudflare/templates/react/workers/ts/src/assets/Cloudflare_Logo.svg: [@cloudflare/wrangler]
• packages/create-cloudflare/templates/react/workers/ts/src/assets/cloudflare.svg: [@cloudflare/wrangler]

[github-actions]

✅ All changesets look good

Review Summary

.changeset/nasty-years-taste.md

• Package: wrangler
• Version Type: patch (appropriate for validation/error messaging improvement)
• Description: Clear and meaningful - explains the improvement to R2 CORS configuration validation and mentions the specific AWS S3-style formatting mistake it catches
• Headers: No h1/h2/h3 headers ✅

.changeset/refresh-react-workers-template.md

• Package: create-cloudflare
• Version Type: patch (appropriate for template design update)
• Description: Clear and meaningful - explains the design update to the React Workers starter and provides context about following the latest Vite React starter
• Headers: No h1/h2/h3 headers ✅

Both changesets follow the guidelines from .changeset/README.md with appropriate version types and meaningful descriptions.

[pkg-pr-new]

create-cloudflare

npm i https://pkg.pr.new/create-cloudflare@13513

@cloudflare/kv-asset-handler

npm i https://pkg.pr.new/@cloudflare/kv-asset-handler@13513

miniflare

npm i https://pkg.pr.new/miniflare@13513

@cloudflare/pages-shared

npm i https://pkg.pr.new/@cloudflare/pages-shared@13513

@cloudflare/unenv-preset

npm i https://pkg.pr.new/@cloudflare/unenv-preset@13513

@cloudflare/vite-plugin

npm i https://pkg.pr.new/@cloudflare/vite-plugin@13513

@cloudflare/vitest-pool-workers

npm i https://pkg.pr.new/@cloudflare/vitest-pool-workers@13513

@cloudflare/workers-editor-shared

npm i https://pkg.pr.new/@cloudflare/workers-editor-shared@13513

wrangler

npm i https://pkg.pr.new/wrangler@13513

commit: 241aa3f

[ask-bonk]

I'm Bonk, and I've done a quick review of your PR.

This PR updates the React Workers template to follow the new Vite v9 React starter design, replacing the old custom layout with the upstream hero/documentation/social sections and swapping in a smaller Cloudflare SVG logo.

Issues found (1):

1. TypeScript type safety regression in App.tsx — The old TypeScript template had res.json() as Promise<{ name: string }> which properly typed the API response. The new version uses bare res.json(), making data implicitly any. For a TypeScript template that's supposed to show best practices, this should retain the type annotation. (The JS template is fine as-is.)

[ask-bonk]

I'm Bonk, and I've done a quick review of your PR.

This PR updates the React Workers template to follow the new Vite v9 React starter design. I found one actionable issue:

1. TypeScript type safety regression in App.tsx — The old TS template properly typed the API response with res.json() as Promise<{ name: string }>. The new version drops this, making data implicitly any. I posted a suggestion comment on line 40 of the TS template with the fix.

The review has been submitted to PR #13513.

github run

[devin-ai-integration]

✅ Devin Review: No Issues Found

Devin Review analyzed this PR and found no potential bugs to report.

View in Devin Review to see 2 additional findings.

[jamesopstad]

This looks really great. Thanks @edmundhung! We also need to update the variants as these are no longer up to date:

workers-sdk/packages/create-cloudflare/templates/react/workers/c3.ts

Lines 119 to 140 in 8ca78bb

	const variantsOptions = [
	{
	value: "react-ts",
	lang: "ts",
	label: "TypeScript",
	},
	{
	value: "react-swc-ts",
	lang: "ts",
	label: "TypeScript + SWC",
	},
	{
	value: "react",
	lang: "js",
	label: "JavaScript",
	},
	{
	value: "react-swc",
	lang: "js",
	label: "JavaScript + SWC",
	},
	];

The available variants in create-vite are these:

We should probably include the first four i.e. TypeScript/JavaScript with and without the compiler. Or maybe don't bother with the compiler and just have TypeScript and JavaScript? Up to you.