graduate C3 React (Workers) template (#8371)

Resolves DEVX-1697

Author: petebacondarwin

.changeset/mighty-moments-march.md

@@ -0,0 +1,5 @@
+---
+"create-cloudflare": patch
+---
+
+graduate C3 React (Workers) template

packages/create-cloudflare/e2e-tests/frameworks/framework-test-config-experimental.ts

@@ -17,31 +17,6 @@ export default function getFrameworkTestConfigExperimental() {
 			},
 			flags: ["--style", "sass"],
 		},
-		react: {
-			promptHandlers: [
-				{
-					matcher: /Select a variant:/,
-					input: [keys.enter],
-				},
-			],
-			unsupportedOSs: ["win32"],
-			testCommitMessage: true,
-			verifyDeploy: {
-				route: "/",
-				// Note that this is the text in the static HTML that is returned
-				// This React SPA will change this at runtime but we are only making a fetch request
-				// not actually running the client side JS.
-				expectedText: "Vite + React + TS",
-			},
-			verifyPreview: {
-				route: "/",
-				previewArgs: ["--host=127.0.0.1"],
-				// Note that this is the text in the static HTML that is returned
-				// This React SPA will change this at runtime but we are only making a fetch request
-				// not actually running the client side JS.
-				expectedText: "Vite + React + TS",
-			},
-		},
 		gatsby: {
 			unsupportedPms: ["bun", "pnpm"],
 			promptHandlers: [

packages/create-cloudflare/e2e-tests/frameworks/framework-test-config.ts

@@ -31,7 +31,7 @@ export default function getFrameworkTestConfig(pm: string) {
 				"strict",
 			],
 		},
-		["docusaurus:pages"]: {
+		"docusaurus:pages": {
 			argv: ["--platform", "pages"],
 			unsupportedPms: ["bun"],
 			testCommitMessage: true,
@@ -57,7 +57,7 @@ export default function getFrameworkTestConfig(pm: string) {
 				},
 			],
 		},
-		["docusaurus:workers"]: {
+		"docusaurus:workers": {
 			argv: ["--platform", "workers"],
 			unsupportedPms: ["bun"],
 			testCommitMessage: true,
@@ -265,7 +265,8 @@ export default function getFrameworkTestConfig(pm: string) {
 				expectedText: "C3_TEST",
 			},
 		},
-		react: {
+		"react:pages": {
+			argv: ["--platform", "pages"],
 			promptHandlers: [
 				{
 					matcher: /Select a variant:/,
@@ -284,6 +285,34 @@ export default function getFrameworkTestConfig(pm: string) {
 				expectedText: "Vite + React",
 			},
 		},
+		"react:workers": {
+			argv: ["--platform", "workers"],
+			promptHandlers: [
+				{
+					matcher: /Select a variant:/,
+					input: [keys.enter],
+				},
+			],
+			unsupportedOSs: ["win32"],
+			testCommitMessage: true,
+			verifyDeploy: {
+				route: "/",
+				// Note that this is the text in the static HTML that is returned
+				// This React SPA will change this at runtime but we are only making a fetch request
+				// not actually running the client side JS.
+				expectedText: "Vite + React + TS",
+			},
+			verifyPreview: {
+				route: "/",
+				// We need to run the preview on the specific IP address on which we make the request.
+				// By default `vite preview` runs on `localhost` that doesn't always include 127.0.0.1.
+				previewArgs: ["--host=127.0.0.1"],
+				// Note that this is the text in the static HTML that is returned
+				// This React SPA will change this at runtime but we are only making a fetch request
+				// not actually running the client side JS.
+				expectedText: "Vite + React + TS",
+			},
+		},
 		solid: {
 			promptHandlers: [
 				{

packages/create-cloudflare/src/templates.ts

@@ -28,7 +28,6 @@ import honoTemplateExperimental from "templates-experimental/hono/c3";
 import nextTemplateExperimental from "templates-experimental/next/c3";
 import nuxtTemplateExperimental from "templates-experimental/nuxt/c3";
 import qwikTemplateExperimental from "templates-experimental/qwik/c3";
-import reactTemplateExperimental from "templates-experimental/react/c3";
 import remixTemplateExperimental from "templates-experimental/remix/c3";
 import solidTemplateExperimental from "templates-experimental/solid/c3";
 import svelteTemplateExperimental from "templates-experimental/svelte/c3";
@@ -188,7 +187,6 @@ export function getFrameworkMap({ experimental = false }): TemplateMap {
 			next: nextTemplateExperimental,
 			nuxt: nuxtTemplateExperimental,
 			qwik: qwikTemplateExperimental,
-			react: reactTemplateExperimental,
 			remix: remixTemplateExperimental,
 			solid: solidTemplateExperimental,
 			svelte: svelteTemplateExperimental,

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

@@ -1,61 +1,9 @@
-import { logRaw } from "@cloudflare/cli";
-import { inputPrompt } from "@cloudflare/cli/interactive";
-import { runFrameworkGenerator } from "frameworks/index";
-import { detectPackageManager } from "helpers/packageManagers";
-import type { TemplateConfig } from "../../src/templates";
-import type { C3Context } from "types";
+import pages from "./pages/c3";
+import workers from "./workers/c3";
+import type { MultiPlatformTemplateConfig } from "../../src/templates";
 
-const { npm } = detectPackageManager();
-
-const generate = async (ctx: C3Context) => {
-	const variant = await inputPrompt({
-		type: "select",
-		question: "Select a variant:",
-		label: "variant",
-		options: variantsOptions,
-		defaultValue: variantsOptions[0].value,
-	});
-
-	await runFrameworkGenerator(ctx, [ctx.project.name, "--template", variant]);
-
-	logRaw("");
-};
-
-const variantsOptions = [
-	{
-		value: "react-ts",
-		label: "TypeScript",
-	},
-	{
-		value: "react-swc-ts",
-		label: "TypeScript + SWC",
-	},
-	{
-		value: "react",
-		label: "JavaScript",
-	},
-	{
-		value: "react-swc",
-		label: "JavaScript + SWC",
-	},
-];
-
-const config: TemplateConfig = {
-	configVersion: 1,
-	id: "react",
-	// React's documentation now recommends using create-vite.
-	frameworkCli: "create-vite",
+const config: MultiPlatformTemplateConfig = {
 	displayName: "React",
-	platform: "pages",
-	generate,
-	transformPackageJson: async () => ({
-		scripts: {
-			deploy: `${npm} run build && wrangler pages deploy ./dist`,
-			preview: `${npm} run build && wrangler pages dev ./dist`,
-		},
-	}),
-	devScript: "dev",
-	deployScript: "deploy",
-	previewScript: "preview",
+	platformVariants: { pages, workers },
 };
 export default config;

packages/create-cloudflare/templates/react/pages/c3.ts

@@ -0,0 +1,62 @@
+import { logRaw } from "@cloudflare/cli";
+import { inputPrompt } from "@cloudflare/cli/interactive";
+import { runFrameworkGenerator } from "frameworks/index";
+import { detectPackageManager } from "helpers/packageManagers";
+import type { TemplateConfig } from "../../../src/templates";
+import type { C3Context } from "types";
+
+const { npm } = detectPackageManager();
+
+const generate = async (ctx: C3Context) => {
+	const variant = await inputPrompt({
+		type: "select",
+		question: "Select a variant:",
+		label: "variant",
+		options: variantsOptions,
+		defaultValue: variantsOptions[0].value,
+	});
+
+	await runFrameworkGenerator(ctx, [ctx.project.name, "--template", variant]);
+
+	logRaw("");
+};
+
+const variantsOptions = [
+	{
+		value: "react-ts",
+		label: "TypeScript",
+	},
+	{
+		value: "react-swc-ts",
+		label: "TypeScript + SWC",
+	},
+	{
+		value: "react",
+		label: "JavaScript",
+	},
+	{
+		value: "react-swc",
+		label: "JavaScript + SWC",
+	},
+];
+
+const config: TemplateConfig = {
+	configVersion: 1,
+	id: "react",
+	// React's documentation now recommends using create-vite.
+	frameworkCli: "create-vite",
+	displayName: "React",
+	platform: "pages",
+	path: "templates/react/pages",
+	generate,
+	transformPackageJson: async () => ({
+		scripts: {
+			deploy: `${npm} run build && wrangler pages deploy ./dist`,
+			preview: `${npm} run build && wrangler pages dev ./dist`,
+		},
+	}),
+	devScript: "dev",
+	deployScript: "deploy",
+	previewScript: "preview",
+};
+export default config;

packages/create-cloudflare/templates-experimental/react/c3.ts renamed to packages/create-cloudflare/templates/react/workers/c3.ts

@@ -8,7 +8,7 @@ import { readJSON, usesTypescript, writeJSON } from "helpers/files";
 import { detectPackageManager } from "helpers/packageManagers";
 import { installPackages } from "helpers/packages";
 import * as recast from "recast";
-import type { TemplateConfig } from "../../src/templates";
+import type { TemplateConfig } from "../../../src/templates";
 import type { types } from "recast";
 import type { C3Context } from "types";
 
@@ -156,7 +156,7 @@ const config: TemplateConfig = {
 	frameworkCli: "create-vite",
 	displayName: "React",
 	platform: "workers",
-	path: "templates-experimental/react",
+	path: "templates/react/workers",
 	copyFiles: {
 		variants: {
 			ts: {