create-cloudflare 2.68.4 → 2.70.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-cloudflare",
-  "version": "2.68.4",
+  "version": "2.70.0",
   "description": "A CLI for creating and deploying new applications to Cloudflare.",
   "keywords": [
     "cloudflare",
@@ -31,14 +31,14 @@
     "@babel/parser": "^7.21.3",
     "@babel/types": "^7.21.4",
     "@clack/prompts": "^1.2.0",
-    "@cloudflare/workers-types": "^4.20260526.1",
+    "@cloudflare/workers-types": "^4.20260601.1",
     "@types/command-exists": "^1.2.0",
     "@types/cross-spawn": "^6.0.2",
     "@types/deepmerge": "^2.2.0",
     "@types/degit": "^2.8.6",
     "@types/dns2": "^2.0.3",
     "@types/esprima": "^4.0.3",
-    "@types/node": "^22.10.1",
+    "@types/node": "22.15.17",
     "@types/semver": "^7.5.1",
     "@types/which-pm-runs": "^1.0.0",
     "@types/yargs": "^17.0.22",
@@ -55,30 +55,30 @@
     "get-port": "^7.1.0",
     "haikunator": "^2.1.2",
     "indent-string": "^5.0.0",
-    "jsonc-parser": "^3.2.0",
+    "jsonc-parser": "3.2.0",
     "magic-string": "^0.30.5",
-    "open": "^11.0.0",
+    "open": "11.0.0",
     "recast": "^0.23.11",
     "semver": "^7.7.1",
-    "smol-toml": "^1.5.2",
-    "tinyglobby": "^0.2.12",
-    "tree-kill": "^1.2.2",
-    "typescript": "~5.8.3",
+    "smol-toml": "1.5.2",
+    "tinyglobby": "0.2.16",
+    "tree-kill": "1.2.2",
+    "typescript": "5.8.3",
     "undici": "7.24.8",
-    "vite": "^8.0.12",
+    "vite": "8.0.13",
     "vite-tsconfig-paths": "^4.0.8",
     "vitest": "4.1.0",
     "which-pm-runs": "^1.1.0",
     "wrap-ansi": "^9.0.0",
     "xdg-app-paths": "^8.3.0",
     "yargs": "^17.7.2",
-    "@cloudflare/cli-shared-helpers": "0.1.4",
-    "@cloudflare/codemod": "1.1.0",
+    "@cloudflare/cli-shared-helpers": "0.1.6",
     "@cloudflare/mock-npm-registry": "0.0.0",
-    "@cloudflare/vite-plugin": "1.39.0",
+    "@cloudflare/vite-plugin": "1.39.2",
+    "@cloudflare/codemod": "1.1.0",
     "@cloudflare/workers-tsconfig": "0.0.0",
-    "@cloudflare/workers-utils": "0.21.1",
-    "wrangler": "4.95.0"
+    "@cloudflare/workers-utils": "0.22.1",
+    "wrangler": "4.97.0"
   },
   "engines": {
     "node": ">=22.0.0"

package/templates/react-router/c3.ts

@@ -1,21 +1,22 @@
+import { resolve } from "node:path";
 import { logRaw } from "@cloudflare/cli-shared-helpers";
+import { brandColor, dim } from "@cloudflare/cli-shared-helpers/colors";
+import { spinner } from "@cloudflare/cli-shared-helpers/interactive";
 import { runFrameworkGenerator } from "frameworks/index";
+import { readJSON, removeFile, writeJSON } from "helpers/files";
 import { detectPackageManager } from "helpers/packageManagers";
+import { installPackages } from "helpers/packages";
 import type { TemplateConfig } from "../../src/templates";
-import type { C3Context } from "types";
+import type { C3Context, PackageJson } from "types";
 
 const { npm } = detectPackageManager();
 
 const generate = async (ctx: C3Context) => {
+	// We use the upstream `create-react-router` default template and overlay
+	// our Cloudflare-specific files via `copyFiles`. This avoids depending on
+	// a third-party Cloudflare template that has been deleted upstream in the past.
 	await runFrameworkGenerator(ctx, [
 		ctx.project.name,
-		...(ctx.args.experimental
-			? []
-			: [
-					"--template",
-					// React-router deleted the template here
-					"https://github.com/remix-run/react-router-templates/tree/29ac272b9532fe26463a2d2693fc73ff3c1e884b/cloudflare",
-				]),
 		// to prevent asking about git twice, just let c3 do it
 		"--no-git-init",
 		"--no-install",
@@ -24,6 +25,36 @@ const generate = async (ctx: C3Context) => {
 	logRaw(""); // newline
 };
 
+const configure = async (ctx: C3Context) => {
+	// `npmInstall` has already run by this point with the upstream default
+	// template's `package.json`, which doesn't include `@cloudflare/vite-plugin`.
+	// Our overlaid `vite.config.ts` imports it, so install it now (this also
+	// adds it to `package.json`). `wrangler` is installed separately by
+	// `installWrangler()` in the main configure flow before this runs.
+	await installPackages(["@cloudflare/vite-plugin"], {
+		dev: true,
+		startText: "Installing the Cloudflare Vite plugin",
+		doneText: `${brandColor("installed")} ${dim("@cloudflare/vite-plugin")}`,
+	});
+
+	// The upstream default template targets a generic Node.js/Docker deployment.
+	// Remove artifacts that don't apply to a Cloudflare Workers project.
+	const s = spinner();
+	s.start("Removing non-Cloudflare artifacts from template");
+	removeFile(resolve(ctx.project.path, "Dockerfile"));
+	removeFile(resolve(ctx.project.path, ".dockerignore"));
+
+	// `transformPackageJson` is deep-merge only and cannot remove keys, so strip
+	// the Node-server deps and `start` script that the default template ships.
+	const pkgJsonPath = resolve(ctx.project.path, "package.json");
+	const pkgJson = readJSON(pkgJsonPath) as PackageJson;
+	delete pkgJson.dependencies?.["@react-router/node"];
+	delete pkgJson.dependencies?.["@react-router/serve"];
+	delete pkgJson.scripts?.start;
+	writeJSON(pkgJsonPath, pkgJson);
+	s.stop(`${brandColor("removed")} ${dim("Node-server template artifacts")}`);
+};
+
 const config: TemplateConfig = {
 	configVersion: 1,
 	id: "react-router",
@@ -34,6 +65,7 @@ const config: TemplateConfig = {
 		path: "./ts",
 	},
 	generate,
+	configure,
 	transformPackageJson: async () => ({
 		dependencies: {
 			"react-router": "^7.10.0",
@@ -45,6 +77,8 @@ const config: TemplateConfig = {
 			deploy: `${npm} run build && wrangler deploy`,
 			preview: `${npm} run build && vite preview`,
 			"cf-typegen": `wrangler types`,
+			typecheck: `wrangler types && react-router typegen && tsc -b`,
+			postinstall: `wrangler types`,
 		},
 	}),
 	devScript: "dev",

package/templates/react-router/ts/README.md

@@ -0,0 +1,79 @@
+# Welcome to React Router!
+
+A modern, production-ready template for building full-stack React applications using React Router.
+
+## Features
+
+- 🚀 Server-side rendering
+- ⚡️ Hot Module Replacement (HMR)
+- 📦 Asset bundling and optimization
+- 🔄 Data loading and mutations
+- 🔒 TypeScript by default
+- 🎉 TailwindCSS for styling
+- 📖 [React Router docs](https://reactrouter.com/)
+
+## Getting Started
+
+### Installation
+
+Install the dependencies:
+
+```bash
+npm install
+```
+
+### Development
+
+Start the development server with HMR:
+
+```bash
+npm run dev
+```
+
+Your application will be available at `http://localhost:5173`.
+
+## Previewing the Production Build
+
+Preview the production build locally:
+
+```bash
+npm run preview
+```
+
+## Building for Production
+
+Create a production build:
+
+```bash
+npm run build
+```
+
+## Deployment
+
+Deployment is done using the Wrangler CLI.
+
+To build and deploy directly to production:
+
+```sh
+npm run deploy
+```
+
+To deploy a preview URL:
+
+```sh
+npx wrangler versions upload
+```
+
+You can then promote a version to production after verification or roll it out progressively.
+
+```sh
+npx wrangler versions deploy
+```
+
+## Styling
+
+This template comes with [Tailwind CSS](https://tailwindcss.com/) already configured for a simple default starting experience. You can use whatever CSS framework you prefer.
+
+---
+
+Built with ❤️ using React Router.

package/templates/react-router/ts/__dot__gitignore

@@ -0,0 +1,14 @@
+.DS_Store
+.env
+/node_modules/
+*.tsbuildinfo
+
+# React Router
+/.react-router/
+/build/
+
+# Cloudflare
+.mf
+.wrangler
+.dev.vars*
+worker-configuration.d.ts

package/templates/react-router/ts/app/app.css

@@ -0,0 +1,15 @@
+@import "tailwindcss" source(".");
+
+@theme {
+  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+}
+
+html,
+body {
+  @apply bg-white dark:bg-gray-950;
+
+  @media (prefers-color-scheme: dark) {
+    color-scheme: dark;
+  }
+}

package/templates/react-router/ts/app/entry.server.tsx

@@ -0,0 +1,42 @@
+import type { EntryContext } from "react-router";
+import { ServerRouter } from "react-router";
+import { isbot } from "isbot";
+import { renderToReadableStream } from "react-dom/server";
+
+export default async function handleRequest(
+  request: Request,
+  responseStatusCode: number,
+  responseHeaders: Headers,
+  routerContext: EntryContext,
+) {
+  let shellRendered = false;
+  const userAgent = request.headers.get("user-agent");
+
+  const body = await renderToReadableStream(
+    <ServerRouter context={routerContext} url={request.url} />,
+    {
+      onError(error: unknown) {
+        responseStatusCode = 500;
+        // Log streaming rendering errors from inside the shell.  Don't log
+        // errors encountered during initial shell rendering since they'll
+        // reject and get logged in handleDocumentRequest.
+        if (shellRendered) {
+          console.error(error);
+        }
+      },
+    },
+  );
+  shellRendered = true;
+
+  // Ensure requests from bots and SPA Mode renders wait for all content to load before responding
+  // https://react.dev/reference/react-dom/server/renderToPipeableStream#waiting-for-all-content-to-load-for-crawlers-and-static-generation
+  if ((userAgent && isbot(userAgent)) || routerContext.isSpaMode) {
+    await body.allReady;
+  }
+
+  responseHeaders.set("Content-Type", "text/html");
+  return new Response(body, {
+    headers: responseHeaders,
+    status: responseStatusCode,
+  });
+}

package/templates/react-router/ts/app/routes/home.tsx

@@ -0,0 +1,19 @@
+import { env } from "cloudflare:workers";
+
+import type { Route } from "./+types/home";
+import { Welcome } from "../welcome/welcome";
+
+export function meta({}: Route.MetaArgs) {
+  return [
+    { title: "New React Router App" },
+    { name: "description", content: "Welcome to React Router!" },
+  ];
+}
+
+export function loader() {
+  return { message: env.VALUE_FROM_CLOUDFLARE };
+}
+
+export default function Home({ loaderData }: Route.ComponentProps) {
+  return <Welcome message={loaderData.message} />;
+}

package/templates/react-router/ts/app/welcome/welcome.tsx

@@ -0,0 +1,90 @@
+import logoDark from "./logo-dark.svg";
+import logoLight from "./logo-light.svg";
+
+export function Welcome({ message }: { message: string }) {
+  return (
+    <main className="flex items-center justify-center pt-16 pb-4">
+      <div className="flex-1 flex flex-col items-center gap-16 min-h-0">
+        <header className="flex flex-col items-center gap-9">
+          <div className="w-[500px] max-w-[100vw] p-4">
+            <img
+              src={logoLight}
+              alt="React Router"
+              className="block w-full dark:hidden"
+            />
+            <img
+              src={logoDark}
+              alt="React Router"
+              className="hidden w-full dark:block"
+            />
+          </div>
+        </header>
+        <div className="max-w-[300px] w-full space-y-6 px-4">
+          <nav className="rounded-3xl border border-gray-200 p-6 dark:border-gray-700 space-y-4">
+            <p className="leading-6 text-gray-700 dark:text-gray-200 text-center">
+              What&apos;s next?
+            </p>
+            <ul>
+              {resources.map(({ href, text, icon }) => (
+                <li key={href}>
+                  <a
+                    className="group flex items-center gap-3 self-stretch p-3 leading-normal text-blue-700 hover:underline dark:text-blue-500"
+                    href={href}
+                    target="_blank"
+                    rel="noreferrer"
+                  >
+                    {icon}
+                    {text}
+                  </a>
+                </li>
+              ))}
+              <li className="self-stretch p-3 leading-normal">{message}</li>
+            </ul>
+          </nav>
+        </div>
+      </div>
+    </main>
+  );
+}
+
+const resources = [
+  {
+    href: "https://reactrouter.com/docs",
+    text: "React Router Docs",
+    icon: (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="20"
+        viewBox="0 0 20 20"
+        fill="none"
+        className="stroke-gray-600 group-hover:stroke-current dark:stroke-gray-300"
+      >
+        <path
+          d="M9.99981 10.0751V9.99992M17.4688 17.4688C15.889 19.0485 11.2645 16.9853 7.13958 12.8604C3.01467 8.73546 0.951405 4.11091 2.53116 2.53116C4.11091 0.951405 8.73546 3.01467 12.8604 7.13958C16.9853 11.2645 19.0485 15.889 17.4688 17.4688ZM2.53132 17.4688C0.951566 15.8891 3.01483 11.2645 7.13974 7.13963C11.2647 3.01471 15.8892 0.951453 17.469 2.53121C19.0487 4.11096 16.9854 8.73551 12.8605 12.8604C8.73562 16.9853 4.11107 19.0486 2.53132 17.4688Z"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+        />
+      </svg>
+    ),
+  },
+  {
+    href: "https://rmx.as/discord",
+    text: "Join Discord",
+    icon: (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="20"
+        viewBox="0 0 24 20"
+        fill="none"
+        className="stroke-gray-600 group-hover:stroke-current dark:stroke-gray-300"
+      >
+        <path
+          d="M15.0686 1.25995L14.5477 1.17423L14.2913 1.63578C14.1754 1.84439 14.0545 2.08275 13.9422 2.31963C12.6461 2.16488 11.3406 2.16505 10.0445 2.32014C9.92822 2.08178 9.80478 1.84975 9.67412 1.62413L9.41449 1.17584L8.90333 1.25995C7.33547 1.51794 5.80717 1.99419 4.37748 2.66939L4.19 2.75793L4.07461 2.93019C1.23864 7.16437 0.46302 11.3053 0.838165 15.3924L0.868838 15.7266L1.13844 15.9264C2.81818 17.1714 4.68053 18.1233 6.68582 18.719L7.18892 18.8684L7.50166 18.4469C7.96179 17.8268 8.36504 17.1824 8.709 16.4944L8.71099 16.4904C10.8645 17.0471 13.128 17.0485 15.2821 16.4947C15.6261 17.1826 16.0293 17.8269 16.4892 18.4469L16.805 18.8725L17.3116 18.717C19.3056 18.105 21.1876 17.1751 22.8559 15.9238L23.1224 15.724L23.1528 15.3923C23.5873 10.6524 22.3579 6.53306 19.8947 2.90714L19.7759 2.73227L19.5833 2.64518C18.1437 1.99439 16.6386 1.51826 15.0686 1.25995ZM16.6074 10.7755L16.6074 10.7756C16.5934 11.6409 16.0212 12.1444 15.4783 12.1444C14.9297 12.1444 14.3493 11.6173 14.3493 10.7877C14.3493 9.94885 14.9378 9.41192 15.4783 9.41192C16.0471 9.41192 16.6209 9.93851 16.6074 10.7755ZM8.49373 12.1444C7.94513 12.1444 7.36471 11.6173 7.36471 10.7877C7.36471 9.94885 7.95323 9.41192 8.49373 9.41192C9.06038 9.41192 9.63892 9.93712 9.6417 10.7815C9.62517 11.6239 9.05462 12.1444 8.49373 12.1444Z"
+          strokeWidth="1.5"
+        />
+      </svg>
+    ),
+  },
+];

package/templates/react-router/ts/tsconfig.cloudflare.json

@@ -0,0 +1,27 @@
+{
+  "extends": "./tsconfig.json",
+  "include": [
+    ".react-router/types/**/*",
+    "app/**/*",
+    "app/**/.server/**/*",
+    "app/**/.client/**/*",
+    "workers/**/*",
+    "worker-configuration.d.ts"
+  ],
+  "compilerOptions": {
+    "composite": true,
+    "strict": true,
+    "lib": ["DOM", "DOM.Iterable", "ES2022"],
+    "types": ["vite/client"],
+    "target": "ES2022",
+    "module": "ES2022",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "rootDirs": [".", "./.react-router/types"],
+    "paths": {
+      "~/*": ["./app/*"]
+    },
+    "esModuleInterop": true,
+    "resolveJsonModule": true
+  }
+}

package/templates/react-router/ts/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.node.json" },
+    { "path": "./tsconfig.cloudflare.json" }
+  ],
+  "compilerOptions": {
+    "checkJs": true,
+    "verbatimModuleSyntax": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true
+  }
+}

package/templates/react-router/ts/tsconfig.node.json

@@ -0,0 +1,13 @@
+{
+  "extends": "./tsconfig.json",
+  "include": ["vite.config.ts"],
+  "compilerOptions": {
+    "composite": true,
+    "strict": true,
+    "types": ["node"],
+    "lib": ["ES2022"],
+    "target": "ES2022",
+    "module": "ES2022",
+    "moduleResolution": "bundler"
+  }
+}

package/templates/react-router/ts/vite.config.ts

@@ -0,0 +1,15 @@
+import { reactRouter } from "@react-router/dev/vite";
+import { cloudflare } from "@cloudflare/vite-plugin";
+import tailwindcss from "@tailwindcss/vite";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  plugins: [
+    cloudflare({ viteEnvironment: { name: "ssr" } }),
+    tailwindcss(),
+    reactRouter(),
+  ],
+  resolve: {
+    tsconfigPaths: true,
+  },
+});

package/templates/react-router/ts/workers/app.ts

@@ -0,0 +1,12 @@
+import { createRequestHandler } from "react-router";
+
+const requestHandler = createRequestHandler(
+  () => import("virtual:react-router/server-build"),
+  import.meta.env.MODE,
+);
+
+export default {
+  async fetch(request) {
+    return requestHandler(request);
+  },
+} satisfies ExportedHandler<Env>;

package/templates/react-router/ts/wrangler.jsonc

@@ -0,0 +1,9 @@
+{
+	"$schema": "node_modules/wrangler/config-schema.json",
+	"name": "<WORKER_NAME>",
+	"compatibility_date": "<COMPATIBILITY_DATE>",
+	"main": "./workers/app.ts",
+	"vars": {
+		"VALUE_FROM_CLOUDFLARE": "Hello from Cloudflare"
+	}
+}

package/templates/tanstack-start/c3.ts

@@ -8,6 +8,8 @@ const { npm } = detectPackageManager();
 
 const generate = async (ctx: C3Context) => {
 	await runFrameworkGenerator(ctx, [
+		// @tanstack/cli uses `create` as a subcommand
+		"create",
 		ctx.project.name,
 		"--deployment",
 		"cloudflare",
@@ -24,7 +26,7 @@ const config: TemplateConfig = {
 	configVersion: 1,
 	id: "tanstack-start",
 	platform: "workers",
-	frameworkCli: "@tanstack/create-start",
+	frameworkCli: "@tanstack/cli",
 	displayName: "TanStack Start",
 	generate,
 	transformPackageJson: async () => ({

package/templates/react-router/ts/react-router.config.ts

@@ -1,8 +0,0 @@
-import type { Config } from "@react-router/dev/config";
-
-export default {
-  ssr: true,
-  future: {
-    v8_viteEnvironmentApi: true,
-  },
-} satisfies Config;