diff --git a/.changeset/busy-horses-kick.md b/.changeset/busy-horses-kick.md new file mode 100644 index 000000000000..1bfed204bc24 --- /dev/null +++ b/.changeset/busy-horses-kick.md @@ -0,0 +1,5 @@ +--- +"create-cloudflare": minor +--- + +add TanStack Start framework template diff --git a/packages/create-cloudflare/e2e/helpers/framework-helpers.ts b/packages/create-cloudflare/e2e/helpers/framework-helpers.ts index 740f8bb7a4c7..6b4beb5aafa6 100644 --- a/packages/create-cloudflare/e2e/helpers/framework-helpers.ts +++ b/packages/create-cloudflare/e2e/helpers/framework-helpers.ts @@ -184,11 +184,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 diff --git a/packages/create-cloudflare/e2e/tests/cli/cli.test.ts b/packages/create-cloudflare/e2e/tests/cli/cli.test.ts index 5593b4b1c24f..ee15c41b5e57 100644 --- a/packages/create-cloudflare/e2e/tests/cli/cli.test.ts +++ b/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, vue, waku, tanstack --platform= 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: diff --git a/packages/create-cloudflare/e2e/tests/frameworks/test-config.ts b/packages/create-cloudflare/e2e/tests/frameworks/test-config.ts index 046c8f9be67f..27cf67d2a4d3 100644 --- a/packages/create-cloudflare/e2e/tests/frameworks/test-config.ts +++ b/packages/create-cloudflare/e2e/tests/frameworks/test-config.ts @@ -582,6 +582,20 @@ function getFrameworkTestConfig(pm: string): NamedFrameworkTestConfig[] { }, nodeCompat: false, }, + { + name: "tanstack", + testCommitMessage: true, + timeout: LONG_TIMEOUT, + verifyDeploy: { + route: "/", + expectedText: "TanStack Start Starter", + }, + verifyPreview: { + route: "/", + expectedText: "TanStack Start Starter", + }, + nodeCompat: true, + }, ]; } diff --git a/packages/create-cloudflare/src/frameworks/package.json b/packages/create-cloudflare/src/frameworks/package.json index 452f02234e98..031a007cc8e7 100644 --- a/packages/create-cloudflare/src/frameworks/package.json +++ b/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.33.0", "gatsby": "5.15.0", "sv": "0.9.7", "nuxi": "3.28.0" diff --git a/packages/create-cloudflare/src/templates.ts b/packages/create-cloudflare/src/templates.ts index e92598e0cdb7..ff7419cd6723 100644 --- a/packages/create-cloudflare/src/templates.ts +++ b/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 tanstackTemplate from "templates/tanstack/c3"; import vueTemplate from "templates/vue/c3"; import wakuTemplate from "templates/waku/c3"; import { isInsideGitRepo } from "./git"; @@ -206,6 +207,7 @@ export function getFrameworkMap({ experimental = false }): TemplateMap { svelte: svelteTemplate, vue: vueTemplate, waku: wakuTemplate, + tanstack: tanstackTemplate, }; } } diff --git a/packages/create-cloudflare/templates/tanstack/c3.ts b/packages/create-cloudflare/templates/tanstack/c3.ts new file mode 100644 index 000000000000..a5ac5859d568 --- /dev/null +++ b/packages/create-cloudflare/templates/tanstack/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", + 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;