C3: add TanStack Start framework template (#10842)

* C3: add TanStack Start framework template

* adapt c3 tanstack template to latest tanstack CLI

* bump `@tanstack/create-start`

* Apply suggestions from code review

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

* rename tanstack directory to tanstack-start

* update snapshot

* add windows as unsupported os in c3 e2es

---------

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

Author: dario-piotrowicz

.changeset/busy-horses-kick.md

@@ -0,0 +1,5 @@
+---
+"create-cloudflare": minor
+---
+
+add TanStack Start framework template

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

@@ -286,11 +286,11 @@ export async function verifyPreviewScript(
 		// so wait up to 5 mins for the dev-server to be ready.
 		await retry(
 			{ times: 300, sleepMs: 5000 },
-			async () => await fetch(`http://127.0.0.1:${port}${verifyPreview.route}`),
+			async () => await fetch(`http://localhost:${port}${verifyPreview.route}`),
 		);
 
 		// Make a request to the specified test route
-		const res = await fetch(`http://127.0.0.1:${port}${verifyPreview.route}`);
+		const res = await fetch(`http://localhost:${port}${verifyPreview.route}`);
 		expect(await res.text()).toContain(verifyPreview.expectedText);
 	} finally {
 		// Kill the process gracefully so ports can be cleaned up

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

@@ -587,7 +587,7 @@ describe("Create Cloudflare CLI", () => {
 					    npm create cloudflare -- --framework next -- --ts
 					    pnpm create cloudflare --framework next -- --ts
 					    Allowed Values:
-					      analog, angular, astro, docusaurus, gatsby, hono, next, nuxt, qwik, react, react-router, solid, svelte, vue, waku
+					      analog, angular, astro, docusaurus, gatsby, hono, next, nuxt, qwik, react, react-router, solid, svelte, tanstack-start, vue, waku
 					  --platform=<value>
 					    Whether the application should be deployed to Pages or Workers. This is only applicable for Frameworks templates that support both Pages and Workers.
 					    Allowed Values:

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

@@ -593,6 +593,21 @@ function getFrameworkTestConfig(pm: string): NamedFrameworkTestConfig[] {
 			},
 			nodeCompat: false,
 		},
+		{
+			name: "tanstack-start",
+			testCommitMessage: true,
+			timeout: LONG_TIMEOUT,
+			unsupportedOSs: ["win32"],
+			verifyDeploy: {
+				route: "/",
+				expectedText: "TanStack Start Starter",
+			},
+			verifyPreview: {
+				route: "/",
+				expectedText: "TanStack Start Starter",
+			},
+			nodeCompat: true,
+		},
 	];
 }
 

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

@@ -17,6 +17,7 @@
 		"create-solid": "0.6.11",
 		"create-vue": "3.18.1",
 		"create-waku": "0.12.5-0.26.1-0",
+		"@tanstack/create-start": "0.34.2",
 		"gatsby": "5.15.0",
 		"sv": "0.9.8",
 		"nuxi": "3.29.3"

packages/create-cloudflare/src/templates.ts

@@ -42,6 +42,7 @@ import reactTemplate from "templates/react/c3";
 import scheduledTemplate from "templates/scheduled/c3";
 import solidTemplate from "templates/solid/c3";
 import svelteTemplate from "templates/svelte/c3";
+import tanStackStartTemplate from "templates/tanstack-start/c3";
 import vueTemplate from "templates/vue/c3";
 import wakuTemplate from "templates/waku/c3";
 import { isInsideGitRepo } from "./git";
@@ -204,6 +205,7 @@ export function getFrameworkMap({ experimental = false }): TemplateMap {
 			"react-router": reactRouterTemplate,
 			solid: solidTemplate,
 			svelte: svelteTemplate,
+			"tanstack-start": tanStackStartTemplate,
 			vue: vueTemplate,
 			waku: wakuTemplate,
 		};

packages/create-cloudflare/templates/tanstack-start/c3.ts

@@ -0,0 +1,41 @@
+import { logRaw } from "@cloudflare/cli";
+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) => {
+	await runFrameworkGenerator(ctx, [
+		ctx.project.name,
+		"--host",
+		"cloudflare",
+		"--framework",
+		"react",
+		// to prevent asking about git twice, just let c3 do it
+		"--no-git",
+	]);
+
+	logRaw(""); // newline
+};
+
+const config: TemplateConfig = {
+	configVersion: 1,
+	id: "tanstack-start",
+	platform: "workers",
+	frameworkCli: "@tanstack/create-start",
+	displayName: "TanStack Start",
+	generate,
+	transformPackageJson: async () => ({
+		scripts: {
+			deploy: `${npm} run build && wrangler deploy`,
+			preview: `${npm} run build && vite preview`,
+			"cf-typegen": `wrangler types`,
+		},
+	}),
+	devScript: "dev",
+	deployScript: "deploy",
+	previewScript: "preview",
+};
+export default config;