add react-router c3 template (#8553)

* add react-router c3 template

* fix duplicate $schema in wrangler.jsonc

* add test

* changeset

* fix test

* fix schema adding

* actually fix :(

* fix type error

* pr review

* hide remix

* update c3 tests node version

* set vite localhost in tests :(

* fix double git question

* Update packages/create-cloudflare/templates/react-router/c3.ts

Co-authored-by: James Opstad <[email protected]>

* bump node again to appease angular

* hopefully bust turbo cache after node bump

* trailing comma >:(

* add node version in more places

* set pnpm store location

* Revert "set pnpm store location"

This reverts commit c608b24.

* nuxt no install

---------

Co-authored-by: James Opstad <[email protected]>

Author: emily-shen

.changeset/few-parts-tell.md

@@ -0,0 +1,7 @@
+---
+"create-cloudflare": minor
+---
+
+feat: add React Router + Workers assets template
+
+Also hide the Remix template in the interactive menu, although it is still accessible via CLI with `--framework=remix`.

.github/actions/run-c3-e2e/action.yml

@@ -22,6 +22,9 @@ inputs:
   apiToken:
     description: "The api token of the test account"
     required: true
+  node-version:
+    description: the version of Node.js to install
+    required: true
 
 runs:
   using: "composite"
@@ -44,6 +47,7 @@ runs:
       shell: bash
       run: pnpm run test:e2e --filter create-cloudflare
       env:
+        NODE_VERSION: ${{ inputs.node-version }}
         CLOUDFLARE_API_TOKEN: ${{ inputs.apiToken }}
         CLOUDFLARE_ACCOUNT_ID: ${{ inputs.accountId }}
         E2E_QUARANTINE: ${{ inputs.quarantine }}

.github/workflows/c3-e2e.yml

@@ -62,6 +62,7 @@ jobs:
         if: steps.changes.outputs.everything_but_markdown == 'true'
         uses: ./.github/actions/install-dependencies
         with:
+          node-version: 20.11.1
           turbo-api: ${{ secrets.TURBO_API }}
           turbo-team: ${{ secrets.TURBO_TEAM }}
           turbo-token: ${{ secrets.TURBO_TOKEN }}
@@ -71,6 +72,7 @@ jobs:
         if: steps.changes.outputs.everything_but_markdown == 'true'
         uses: ./.github/actions/run-c3-e2e
         with:
+          node-version: 20.11.1
           packageManager: ${{ matrix.pm.name }}
           packageManagerVersion: ${{ matrix.pm.version }}
           quarantine: false
@@ -82,6 +84,7 @@ jobs:
         if: steps.changes.outputs.everything_but_markdown == 'true'
         uses: ./.github/actions/run-c3-e2e
         with:
+          node-version: 20.11.1
           packageManager: ${{ matrix.pm.name }}
           packageManagerVersion: ${{ matrix.pm.version }}
           quarantine: false

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

@@ -370,9 +370,15 @@ const verifyBuildCfTypesScript = async (
 	expect(outputFileContentPreLines).toContain("// Generated by Wrangler");
 
 	// the file contains the env interface
-	expect(outputFileContentPreLines).toContain(
-		`interface ${envInterfaceName} {`,
+	// the file still contains the env interface
+	const hasEnvInterfacePre = outputFileContentPreLines.some(
+		(line) =>
+			// old type gen - some framework templates pin older versions of wrangler
+			line === `interface ${envInterfaceName} {` ||
+			// new after importable env change
+			line === `interface ${envInterfaceName} extends Cloudflare.Env {}`,
 	);
+	expect(hasEnvInterfacePre).toBe(true);
 
 	// Run the `cf-typegen` script to generate types for bindings in fixture
 	const buildTypesProc = spawnWithLogging(
@@ -389,14 +395,14 @@ const verifyBuildCfTypesScript = async (
 	expect(outputFileContentPostLines).not.toContain("// Generated by Wrangler");
 
 	// the file still contains the env interface
-	const hasEnvInterface = outputFileContentPostLines.some(
+	const hasEnvInterfacePost = outputFileContentPostLines.some(
 		(line) =>
-			// old type gen - some frameworkte templates pin older versions of wrangler
+			// old type gen - some framework templates pin older versions of wrangler
 			line === `interface ${envInterfaceName} {` ||
 			// new after importable env change
 			line === `interface ${envInterfaceName} extends Cloudflare.Env {}`,
 	);
-	expect(hasEnvInterface).toBe(true);
+	expect(hasEnvInterfacePost).toBe(true);
 };
 
 const verifyBuildScript = async (

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

@@ -3,6 +3,25 @@ import { keys, LONG_TIMEOUT } from "../helpers";
 // These are ordered based on speed and reliability for ease of debugging
 export default function getFrameworkTestConfig(pm: string) {
 	return {
+		"react-router": {
+			unsupportedOSs: ["win32"],
+			testCommitMessage: true,
+			timeout: LONG_TIMEOUT,
+			verifyDeploy: {
+				route: "/",
+				expectedText: "Hello from Cloudflare",
+			},
+			verifyPreview: {
+				route: "/",
+				expectedText: "Hello from Cloudflare",
+				previewArgs: ["--host=127.0.0.1"],
+			},
+			verifyBuildCfTypes: {
+				outputFile: "worker-configuration.d.ts",
+				envInterfaceName: "Env",
+			},
+			flags: ["--no-install", "--no-git-init"],
+		},
 		"astro:pages": {
 			argv: ["--platform", "pages"],
 			testCommitMessage: true,

packages/create-cloudflare/src/frameworks/package.json

@@ -14,6 +14,7 @@
 		"create-qwik": "1.12.0",
 		"create-vite": "6.1.1",
 		"create-remix": "2.15.3",
+		"create-react-router": "7.4.0",
 		"create-solid": "0.6.1",
 		"create-vue": "3.14.2",
 		"gatsby": "5.14.1",

packages/create-cloudflare/src/templates.ts

@@ -38,6 +38,7 @@ import openapiTemplate from "templates/openapi/c3";
 import preExistingTemplate from "templates/pre-existing/c3";
 import queuesTemplate from "templates/queues/c3";
 import qwikTemplate from "templates/qwik/c3";
+import reactRouterTemplate from "templates/react-router/c3";
 import reactTemplate from "templates/react/c3";
 import remixTemplate from "templates/remix/c3";
 import scheduledTemplate from "templates/scheduled/c3";
@@ -56,6 +57,7 @@ export type MultiPlatformTemplateConfig = {
 		pages: TemplateConfig;
 		workers: TemplateConfig;
 	};
+	hidden?: boolean;
 };
 
 export type TemplateConfig = {
@@ -186,6 +188,7 @@ export function getFrameworkMap({ experimental = false }): TemplateMap {
 			nuxt: nuxtTemplate,
 			qwik: qwikTemplate,
 			react: reactTemplate,
+			"react-router": reactRouterTemplate,
 			remix: remixTemplate,
 			solid: solidTemplate,
 			svelte: svelteTemplate,
@@ -400,11 +403,20 @@ export const createContext = async (
 		const frameworkMap = getFrameworkMap({
 			experimental: args.experimental,
 		});
-		const frameworkOptions = Object.entries(frameworkMap).map(
-			([key, config]) => ({
-				label: config.displayName,
-				value: key,
-			}),
+
+		const frameworkOptions = Object.entries(frameworkMap).reduce<Option[]>(
+			(acc, [key, config]) => {
+				// only hide if we're going to show the options - otherwise, the
+				// result will show up as (skipped) instead of the actual value
+				if (!config.hidden || args.framework) {
+					acc.push({
+						label: config.displayName,
+						value: key,
+					});
+				}
+				return acc;
+			},
+			[],
 		);
 
 		const framework = await processArgument(args, "framework", {

packages/create-cloudflare/src/wrangler/config.ts

@@ -45,7 +45,10 @@ export const updateWranglerConfig = async (ctx: C3Context) => {
 			ensureNameExists(parsed, ctx.project.name),
 		);
 
-		const comment = `/**\n * For more details on how to configure Wrangler, refer to:\n * https://developers.cloudflare.com/workers/wrangler/configuration/\n */\n{\n\t"$schema": "node_modules/wrangler/config-schema.json",`;
+		let comment = `/**\n * For more details on how to configure Wrangler, refer to:\n * https://developers.cloudflare.com/workers/wrangler/configuration/\n */\n{`;
+		if (!modified["$schema"]) {
+			comment += `\n\t"$schema": "node_modules/wrangler/config-schema.json",`;
+		}
 
 		if (!modified["observability"]) {
 			modified["observability"] = { enabled: true };

packages/create-cloudflare/templates/hello-world-with-assets/ts/test/env.d.ts

@@ -0,0 +1,9 @@
+declare module 'cloudflare:test' {
+	// extends Env in ../worker-configuration.d.ts
+	interface ProvidedEnv extends Env {}
+
+	// You can also
+	//  interface ProvidedEnv {
+	// 	KV_NAMESPACE: KVNamespace;
+	// }
+}

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

@@ -21,6 +21,7 @@ const generate = async (ctx: C3Context) => {
 		ctx.project.name,
 		"--packageManager",
 		npm,
+		"--no-install",
 		gitFlag,
 	]);