remove wrangler e2e and test React with C3, also add React in the c3 menu

Author: dario-piotrowicz

packages/create-cloudflare/e2e/helpers/framework-helpers.ts

@@ -355,6 +355,43 @@ export async function verifyTypes(
 	}
 }
 
+export async function verifyCloudflareVitePluginConfigured(
+	{ verifyCloudflareVitePluginConfigured: verify }: FrameworkTestConfig,
+	projectPath: string,
+) {
+	if (verify === false) {
+		return;
+	}
+
+	const viteConfigTsPAth = join(projectPath, `vite.config.ts`);
+	const viteConfigJsPath = join(projectPath, `vite.config.js`);
+
+	let viteConfigPath: string;
+
+	if (existsSync(viteConfigTsPAth)) {
+		viteConfigPath = viteConfigTsPAth;
+	} else if (existsSync(viteConfigJsPath)) {
+		viteConfigPath = viteConfigJsPath;
+	} else {
+		throw new Error("Could not find Vite config file to modify");
+	}
+
+	const prePackageJson = JSON.parse(
+		readFile(join(projectPath, "package.json")),
+	) as { devDependencies: Record<string, string> };
+
+	expect(
+		prePackageJson.devDependencies?.["@cloudflare/vite-plugin"],
+	).not.toBeUndefined();
+
+	const viteConfig = readFile(viteConfigPath);
+
+	expect(viteConfig).toContain(
+		'import { cloudflare } from "@cloudflare/vite-plugin"',
+	);
+	expect(viteConfig).toMatch(/plugins:\s*?\[.*?cloudflare.*?]/);
+}
+
 export function shouldRunTest(testConfig: FrameworkTestConfig) {
 	return (
 		// Skip if the test is quarantined

packages/create-cloudflare/e2e/helpers/run-c3.ts

@@ -60,9 +60,13 @@ export type RunnerConfig = {
 		};
 	};
 	/**
-	 * Specifies whether to verify generated types for the project
+	 * Specifies whether to verify generated types for the project.
 	 */
 	verifyTypes?: boolean;
+	/**
+	 * Verifies whether the Cloudflare Vite plugin has been installed and configured.
+	 */
+	verifyCloudflareVitePluginConfigured?: boolean;
 };
 
 export const runC3 = async (

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

@@ -16,6 +16,7 @@ import {
 	runC3ForFrameworkTest,
 	shouldRunTest,
 	testGitCommitMessage,
+	verifyCloudflareVitePluginConfigured,
 	verifyDeployment,
 	verifyDevScript,
 	verifyPreviewScript,
@@ -150,6 +151,11 @@ describe
 						);
 
 						await verifyTypes(testConfig, frameworkConfig, project.path);
+
+						await verifyCloudflareVitePluginConfigured(
+							testConfig,
+							project.path,
+						);
 					} catch (e) {
 						expect.fail(
 							"Failed due to an exception while running C3. See logs for more details. Error: " +

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

@@ -818,6 +818,38 @@ function getExperimentalFrameworkTestConfig(
 			nodeCompat: true,
 			verifyTypes: false,
 		},
+		{
+			name: "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",
+			},
+			verifyCloudflareVitePluginConfigured: true,
+			nodeCompat: false,
+			verifyTypes: false,
+		},
 	];
 }
 

packages/create-cloudflare/src/helpers/packages.ts

@@ -136,7 +136,7 @@ export const installWrangler = async () => {
 	const { npm } = detectPackageManager();
 
 	// Even if Wrangler is already installed, make sure we install the latest version, as some framework CLIs are pinned to an older version
-	await installPackages([`wrangler@latest`], {
+	await installPackages([`/Users/dario/Repos/workers-sdk/packages/wrangler`], {
 		dev: true,
 		startText: `Installing wrangler ${dim(
 			"A command line tool for building Cloudflare Workers",

packages/create-cloudflare/src/templates.ts

@@ -244,6 +244,7 @@ export function getFrameworkMap({ experimental = false }): TemplateMap {
 			angular: angularTemplate,
 			solid: solidTemplate,
 			qwik: qwikTemplate,
+			react: reactTemplate,
 		};
 	} else {
 		return {