[C3] Use create-vite instead of create-react-app for React projects (#…

…6573) * Change to [email protected] * C3: Use recommended bundler for React projects * Update e2e-test * Add changeset * prettier * disable yarn for react --------- Co-authored-by: santraez <[email protected]>
cloudflare · Aug 27, 2024 · 3ff6506 · 3ff6506
1 parent 2a5b648
commit 3ff6506
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 6 deletions.
diff --git a/.changeset/tough-melons-worry.md b/.changeset/tough-melons-worry.md
@@ -0,0 +1,11 @@
+---
+"create-cloudflare": minor
+---
+
+feature: Use `create-vite` instead of `create-react-app` for React projects.
+
+[React's documentation](https://react.dev/learn/start-a-new-react-project#can-i-use-react-without-a-framework) now recommends using `create-vite` over `create-react-app`, as the latter has been deprecated. To align with these best practices, React projects created with C3 will now use [Vite](https://vitejs.dev/).
+
+With this change, the default development command will switch from using `create-react-app` to `create-vite`, providing a more modern and efficient development experience.
+
+Additionally, selection of variants for React projects created by Vite has been added, allowing users to choose different configurations based on their needs. The test suite has also been adapted to accommodate the new configuration, ensuring all tests run without errors.
diff --git a/packages/create-cloudflare/e2e-tests/frameworks.test.ts b/packages/create-cloudflare/e2e-tests/frameworks.test.ts
@@ -287,12 +287,19 @@ const frameworkTests: Record<string, FrameworkTestConfig> = {
 		},
 	},
 	react: {
+		promptHandlers: [
+			{
+				matcher: /Select a variant:/,
+				input: [keys.enter],
+			},
+		],
 		testCommitMessage: true,
 		unsupportedOSs: ["win32"],
+		unsupportedPms: ["yarn"],
 		timeout: LONG_TIMEOUT,
 		verifyDeploy: {
 			route: "/",
-			expectedText: "React App",
+			expectedText: "Vite + React",
 		},
 	},
 	solid: {

diff --git a/packages/create-cloudflare/src/frameworks/package.json b/packages/create-cloudflare/src/frameworks/package.json
@@ -13,7 +13,7 @@
 		"create-hono": "0.12.0",
 		"create-next-app": "14.2.5",
 		"create-qwik": "1.5.7",
-		"create-react-app": "5.0.1",
+		"create-vite": "5.2.3",
 		"create-remix": "2.11.1",
 		"create-solid": "0.5.12",
 		"create-svelte": "6.3.8",
@@ -31,7 +31,7 @@
 		"next": "create-next-app",
 		"nuxt": "nuxi",
 		"qwik": "create-qwik",
-		"react": "create-react-app",
+		"react": "create-vite",
 		"remix": "create-remix",
 		"solid": "create-solid",
 		"svelte": "create-svelte",

diff --git a/packages/create-cloudflare/templates/react/c3.ts b/packages/create-cloudflare/templates/react/c3.ts
@@ -1,4 +1,5 @@
 import { logRaw } from "@cloudflare/cli";
+import { processArgument } from "@cloudflare/cli/args";
 import { runFrameworkGenerator } from "frameworks/index";
 import { detectPackageManager } from "helpers/packageManagers";
 import type { TemplateConfig } from "../../src/templates";
@@ -7,11 +8,38 @@ import type { C3Context } from "types";
 const { npm } = detectPackageManager();
 
 const generate = async (ctx: C3Context) => {
-	await runFrameworkGenerator(ctx, [ctx.project.name]);
+	const variant = await processArgument<string>(ctx.args, "variant", {
+		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",
@@ -20,8 +48,8 @@ const config: TemplateConfig = {
 	generate,
 	transformPackageJson: async () => ({
 		scripts: {
-			deploy: `${npm} run build && wrangler pages deploy ./build`,
-			preview: `${npm} run build && wrangler pages dev ./build`,
+			deploy: `${npm} run build && wrangler pages deploy ./dist`,
+			preview: `${npm} run build && wrangler pages dev ./dist`,
 		},
 	}),
 	devScript: "dev",