create-cloudflare 0.0.0-facb3ffc9 → 0.0.0-fbba583df

package/templates-experimental/angular/c3.ts

@@ -7,7 +7,7 @@ import { readFile, readJSON, writeFile } 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();
 
@@ -63,10 +63,10 @@ async function updateAppCode() {
 	// Remove unwanted dependencies
 	s.start(`Updating package.json`);
 	const packageJsonPath = resolve("package.json");
-	const packageManifest = readJSON(packageJsonPath);
+	const packageManifest = readJSON(packageJsonPath) as PackageJson;
 
-	delete packageManifest["dependencies"]["express"];
-	delete packageManifest["devDependencies"]["@types/express"];
+	delete packageManifest["dependencies"]?.["express"];
+	delete packageManifest["devDependencies"]?.["@types/express"];
 
 	writeFile(packageJsonPath, JSON.stringify(packageManifest, null, 2));
 	s.stop(`${brandColor(`updated`)} ${dim(`\`package.json\``)}`);
@@ -75,7 +75,7 @@ async function updateAppCode() {
 function updateAngularJson(ctx: C3Context) {
 	const s = spinner();
 	s.start(`Updating angular.json config`);
-	const angularJson = readJSON(resolve("angular.json"));
+	const angularJson = readJSON(resolve("angular.json")) as AngularJson;
 	// Update builder
 	const architectSection = angularJson.projects[ctx.project.name].architect;
 	architectSection.build.options.outputPath = "dist";
@@ -110,3 +110,21 @@ const config: TemplateConfig = {
 	}),
 };
 export default config;
+
+type AngularJson = {
+	projects: Record<
+		string,
+		{
+			architect: {
+				build: {
+					options: {
+						outputPath: string;
+						outputMode: string;
+						ssr: Record<string, unknown>;
+						assets: string[];
+					};
+				};
+			};
+		}
+	>;
+};

package/templates-experimental/astro/templates/ts/worker-configuration.d.ts

@@ -1,4 +1,4 @@
 // Generated by Wrangler
-// After adding bindings to `wrangler.json`, regenerate this interface via `npm run cf-typegen`
+// After adding bindings to `wrangler.jsonc`, regenerate this interface via `npm run cf-typegen`
 interface Env {
 }

package/templates-experimental/docusaurus/c3.ts

@@ -28,5 +28,6 @@ const config: TemplateConfig = {
 	}),
 	devScript: "start",
 	deployScript: "deploy",
+	previewScript: "preview",
 };
 export default config;

package/templates-experimental/hello-world-durable-object-with-assets/js/src/index.js

@@ -11,7 +11,7 @@ import { DurableObject } from "cloudflare:workers";
  */
 
 /**
- * Env provides a mechanism to reference bindings declared in wrangler.json within JavaScript
+ * Env provides a mechanism to reference bindings declared in wrangler.jsonc within JavaScript
  *
  * @typedef {Object} Env
  * @property {DurableObjectNamespace} MY_DURABLE_OBJECT - The Durable Object namespace binding
@@ -24,7 +24,7 @@ export class MyDurableObject extends DurableObject {
 	 * 	`DurableObjectStub::get` for a given identifier (no-op constructors can be omitted)
 	 *
 	 * @param {DurableObjectState} ctx - The interface for interacting with Durable Object state
-	 * @param {Env} env - The interface to reference bindings declared in wrangler.json
+	 * @param {Env} env - The interface to reference bindings declared in wrangler.jsonc
 	 */
 	constructor(ctx, env) {
 		super(ctx, env);
@@ -47,7 +47,7 @@ export default {
 	 * This is the standard fetch handler for a Cloudflare Worker
 	 *
 	 * @param {Request} request - The request submitted to the Worker from the client
-	 * @param {Env} env - The interface to reference bindings declared in wrangler.json
+	 * @param {Env} env - The interface to reference bindings declared in wrangler.jsonc
 	 * @param {ExecutionContext} ctx - The execution context of the Worker
 	 * @returns {Promise<Response>} The response to be sent back to the client
 	 */

package/templates-experimental/hello-world-durable-object-with-assets/ts/src/index.ts

@@ -7,7 +7,7 @@ import { DurableObject } from "cloudflare:workers";
  * - Open a browser tab at http://localhost:8787/ to see your Durable Object in action
  * - Run `npm run deploy` to publish your application
  *
- * Bind resources to your worker in `wrangler.json`. After adding bindings, a type definition for the
+ * Bind resources to your worker in `wrangler.jsonc`. After adding bindings, a type definition for the
  * `Env` object can be regenerated with `npm run cf-typegen`.
  *
  * Learn more at https://developers.cloudflare.com/durable-objects
@@ -21,7 +21,7 @@ export class MyDurableObject extends DurableObject {
 	 * 	`DurableObjectStub::get` for a given identifier (no-op constructors can be omitted)
 	 *
 	 * @param ctx - The interface for interacting with Durable Object state
-	 * @param env - The interface to reference bindings declared in wrangler.json
+	 * @param env - The interface to reference bindings declared in wrangler.jsonc
 	 */
 	constructor(ctx: DurableObjectState, env: Env) {
 		super(ctx, env);
@@ -44,7 +44,7 @@ export default {
 	 * This is the standard fetch handler for a Cloudflare Worker
 	 *
 	 * @param request - The request submitted to the Worker from the client
-	 * @param env - The interface to reference bindings declared in wrangler.json
+	 * @param env - The interface to reference bindings declared in wrangler.jsonc
 	 * @param ctx - The execution context of the Worker
 	 * @returns The response to be sent back to the client
 	 */

package/templates-experimental/hello-world-with-assets/js/package.json

@@ -9,8 +9,8 @@
 		"test": "vitest"
 	},
 	"devDependencies": {
-		"@cloudflare/vitest-pool-workers": "^0.5.2",
+		"@cloudflare/vitest-pool-workers": "^0.6.4",
 		"wrangler": "^3.101.0",
-		"vitest": "2.1.8"
+		"vitest": "~2.1.9"
 	}
 }

package/templates-experimental/hello-world-with-assets/js/vitest.config.js

@@ -4,7 +4,7 @@ export default defineWorkersConfig({
 	test: {
 		poolOptions: {
 			workers: {
-				wrangler: { configPath: './wrangler.json' },
+				wrangler: { configPath: './wrangler.jsonc' },
 			},
 		},
 	},

package/templates-experimental/hello-world-with-assets/ts/package.json

@@ -10,9 +10,9 @@
 		"cf-typegen": "wrangler types"
 	},
 	"devDependencies": {
-		"@cloudflare/vitest-pool-workers": "^0.5.2",
+		"@cloudflare/vitest-pool-workers": "^0.6.4",
 		"typescript": "^5.5.2",
-		"vitest": "2.1.8",
+		"vitest": "~2.1.9",
 		"wrangler": "^3.101.0"
 	}
 }

package/templates-experimental/hello-world-with-assets/ts/src/index.ts

@@ -5,7 +5,7 @@
  * - Open a browser tab at http://localhost:8787/ to see your worker in action
  * - Run `npm run deploy` to publish your worker
  *
- * Bind resources to your worker in `wrangler.json`. After adding bindings, a type definition for the
+ * Bind resources to your worker in `wrangler.jsonc`. After adding bindings, a type definition for the
  * `Env` object can be regenerated with `npm run cf-typegen`.
  *
  * Learn more at https://developers.cloudflare.com/workers/

package/templates-experimental/hello-world-with-assets/ts/vitest.config.mts

@@ -4,7 +4,7 @@ export default defineWorkersConfig({
 	test: {
 		poolOptions: {
 			workers: {
-				wrangler: { configPath: './wrangler.json' },
+				wrangler: { configPath: './wrangler.jsonc' },
 			},
 		},
 	},

package/templates-experimental/hello-world-with-assets/ts/worker-configuration.d.ts

@@ -1,4 +1,4 @@
 // Generated by Wrangler
-// After adding bindings to `wrangler.json`, regenerate this interface via `npm run cf-typegen`
+// After adding bindings to `wrangler.jsonc`, regenerate this interface via `npm run cf-typegen`
 interface Env {
 }

package/templates-experimental/hono/c3.ts

@@ -39,5 +39,6 @@ const config: TemplateConfig = {
 	}),
 	devScript: "dev",
 	deployScript: "deploy",
+	previewScript: "dev",
 };
 export default config;

package/templates-experimental/hono/templates/worker-configuration.d.ts

@@ -1,4 +1,4 @@
 // Generated by Wrangler
-// After adding bindings to `wrangler.json`, regenerate this interface via `npm run cf-typegen`
+// After adding bindings to `wrangler.jsonc`, regenerate this interface via `npm run cf-typegen`
 interface CloudflareBindings {
 }

package/templates-experimental/next/c3.ts

@@ -1,25 +1,18 @@
 import { brandColor, dim } from "@cloudflare/cli/colors";
+import { spinner } from "@cloudflare/cli/interactive";
 import { runFrameworkGenerator } from "frameworks/index";
+import { readFile, writeFile } from "helpers/files";
 import { installPackages } from "helpers/packages";
 import type { TemplateConfig } from "../../src/templates";
 import type { C3Context } from "types";
 
 const generate = async (ctx: C3Context) => {
-	await runFrameworkGenerator(ctx, [
-		ctx.project.name,
-		"--ts",
-		"--tailwind",
-		"--eslint",
-		"--app",
-		"--import-alias",
-		"@/*",
-		"--src-dir",
-	]);
+	await runFrameworkGenerator(ctx, [ctx.project.name]);
 };
 
 const configure = async () => {
 	const packages = [
-		"@opennextjs/cloudflare@0.3.x",
+		"@opennextjs/cloudflare@0.5.x",
 		"@cloudflare/workers-types",
 	];
 	await installPackages(packages, {
@@ -27,6 +20,29 @@ const configure = async () => {
 		startText: "Adding the Cloudflare adapter",
 		doneText: `${brandColor(`installed`)} ${dim(packages.join(", "))}`,
 	});
+
+	updateNextConfig();
+};
+
+const updateNextConfig = () => {
+	const s = spinner();
+
+	const configFile = "next.config.mjs";
+	s.start(`Updating \`${configFile}\``);
+
+	const configContent = readFile(configFile);
+
+	const updatedConfigFile =
+		configContent +
+		`
+		// added by create cloudflare to enable calling \`getCloudflareContext()\` in \`next dev\`
+		import { initOpenNextCloudflareForDev } from '@opennextjs/cloudflare';
+		initOpenNextCloudflareForDev();
+		`.replace(/\n\t*/g, "\n");
+
+	writeFile(configFile, updatedConfigFile);
+
+	s.stop(`${brandColor(`updated`)} ${dim(`\`${configFile}\``)}`);
 };
 
 export default {

package/templates-experimental/nuxt/templates/worker-configuration.d.ts

@@ -1,4 +1,4 @@
 // Generated by Wrangler
-// After adding bindings to `wrangler.json`, regenerate this interface via `npm run cf-typegen`
+// After adding bindings to `wrangler.jsonc`, regenerate this interface via `npm run cf-typegen`
 interface Env {
 }

package/templates-experimental/qwik/c3.ts

@@ -10,7 +10,7 @@ import * as recast from "recast";
 import type { TemplateConfig } from "../../src/templates";
 import type { C3Context } from "types";
 
-const { npm, npx } = detectPackageManager();
+const { npm, npx, name } = detectPackageManager();
 
 const generate = async (ctx: C3Context) => {
 	await runFrameworkGenerator(ctx, ["playground", ctx.project.name]);
@@ -18,7 +18,8 @@ const generate = async (ctx: C3Context) => {
 
 const configure = async (ctx: C3Context) => {
 	// Add the pages integration
-	const cmd = [npx, "qwik", "add", "cloudflare-pages"];
+	// For some reason `pnpx qwik add` fails for qwik so we use `pnpm qwik add` instead.
+	const cmd = [name === "pnpm" ? npm : npx, "qwik", "add", "cloudflare-pages"];
 	endSection(`Running ${quoteShellArgs(cmd)}`);
 	await runCommand(cmd);
 

package/templates-experimental/qwik/templates/worker-configuration.d.ts

@@ -1,4 +1,4 @@
 // Generated by Wrangler
-// After adding bindings to `wrangler.json`, regenerate this interface via `npm run cf-typegen`
+// After adding bindings to `wrangler.jsonc`, regenerate this interface via `npm run cf-typegen`
 interface Env {
 }

package/templates-experimental/react/c3.ts

@@ -0,0 +1,182 @@
+import assert from "assert";
+import { logRaw } from "@cloudflare/cli";
+import { brandColor, dim } from "@cloudflare/cli/colors";
+import { inputPrompt, spinner } from "@cloudflare/cli/interactive";
+import { runFrameworkGenerator } from "frameworks/index";
+import { transformFile } from "helpers/codemod";
+import { readJSON, usesTypescript, writeJSON } from "helpers/files";
+import { detectPackageManager } from "helpers/packageManagers";
+import { installPackages } from "helpers/packages";
+import * as recast from "recast";
+import type { TemplateConfig } from "../../src/templates";
+import type { types } from "recast";
+import type { C3Context } from "types";
+
+const b = recast.types.builders;
+const t = recast.types.namedTypes;
+const { npm } = detectPackageManager();
+
+const generate = async (ctx: C3Context) => {
+	const variant = await getVariant();
+	ctx.args.lang = variant.lang;
+
+	await runFrameworkGenerator(ctx, [
+		ctx.project.name,
+		"--template",
+		variant.value,
+	]);
+
+	logRaw("");
+};
+
+const configure = async (ctx: C3Context) => {
+	await installPackages(["@cloudflare/vite-plugin"], {
+		dev: true,
+		startText: "Installing the Cloudflare Vite plugin",
+		doneText: `${brandColor(`installed`)} ${dim("@cloudflare/vite-plugin")}`,
+	});
+
+	await transformViteConfig(ctx);
+
+	if (usesTypescript(ctx)) {
+		updateTsconfigJson();
+	}
+};
+
+function transformViteConfig(ctx: C3Context) {
+	const filePath = `vite.config.${usesTypescript(ctx) ? "ts" : "js"}`;
+
+	transformFile(filePath, {
+		visitProgram(n) {
+			// Add an import of the @cloudflare/vite-plugin
+			// ```
+			// import {cloudflare} from "@cloudflare/vite-plugin";
+			// ```
+			const lastImportIndex = n.node.body.findLastIndex(
+				(statement) => statement.type === "ImportDeclaration",
+			);
+			const lastImport = n.get("body", lastImportIndex);
+			const importAst = b.importDeclaration(
+				[b.importSpecifier(b.identifier("cloudflare"))],
+				b.stringLiteral("@cloudflare/vite-plugin"),
+			);
+			lastImport.insertAfter(importAst);
+
+			return this.traverse(n);
+		},
+		visitCallExpression: function (n) {
+			// Add the imported plugin to the config
+			// ```
+			// defineConfig({
+			//   plugins: [react(), cloudflare()],
+			// });
+			const callee = n.node.callee as types.namedTypes.Identifier;
+			if (callee.name !== "defineConfig") {
+				return this.traverse(n);
+			}
+
+			const config = n.node.arguments[0];
+			assert(t.ObjectExpression.check(config));
+			const pluginsProp = config.properties.find((prop) => isPluginsProp(prop));
+			assert(pluginsProp && t.ArrayExpression.check(pluginsProp.value));
+			pluginsProp.value.elements.push(
+				b.callExpression(b.identifier("cloudflare"), []),
+			);
+
+			return false;
+		},
+	});
+}
+
+function isPluginsProp(
+	prop: unknown,
+): prop is types.namedTypes.ObjectProperty | types.namedTypes.Property {
+	return (
+		(t.Property.check(prop) || t.ObjectProperty.check(prop)) &&
+		t.Identifier.check(prop.key) &&
+		prop.key.name === "plugins"
+	);
+}
+
+function updateTsconfigJson() {
+	const s = spinner();
+	s.start(`Updating tsconfig.json config`);
+	// Add a reference to the extra tsconfig.worker.json file.
+	// ```
+	// "references": [ ..., { path: "./tsconfig.worker.json" } ]
+	// ```
+	const tsconfig = readJSON("tsconfig.json") as { references: object[] };
+	if (tsconfig && typeof tsconfig === "object") {
+		tsconfig.references ??= [];
+		tsconfig.references.push({ path: "./tsconfig.worker.json" });
+	}
+	writeJSON("tsconfig.json", tsconfig);
+	s.stop(`${brandColor(`updated`)} ${dim(`\`tsconfig.json\``)}`);
+}
+
+async function getVariant() {
+	const variantsOptions = [
+		{
+			value: "react-ts",
+			lang: "ts",
+			label: "TypeScript",
+		},
+		{
+			value: "react-swc-ts",
+			lang: "ts",
+			label: "TypeScript + SWC",
+		},
+		{
+			value: "react",
+			lang: "js",
+			label: "JavaScript",
+		},
+		{
+			value: "react-swc",
+			lang: "js",
+			label: "JavaScript + SWC",
+		},
+	];
+	const value = await inputPrompt({
+		type: "select",
+		question: "Select a variant:",
+		label: "variant",
+		options: variantsOptions,
+		defaultValue: variantsOptions[0].value,
+	});
+
+	const selected = variantsOptions.find((variant) => variant.value === value);
+	assert(selected, "Expected a variant to be selected");
+	return selected;
+}
+
+const config: TemplateConfig = {
+	configVersion: 1,
+	id: "react",
+	frameworkCli: "create-vite",
+	displayName: "React",
+	platform: "workers",
+	path: "templates-experimental/react",
+	copyFiles: {
+		variants: {
+			ts: {
+				path: "./ts",
+			},
+			js: {
+				path: "./js",
+			},
+		},
+	},
+	generate,
+	configure,
+	transformPackageJson: async () => ({
+		scripts: {
+			deploy: `${npm} run build && wrangler deploy`,
+			preview: `${npm} run build && vite preview`,
+		},
+	}),
+	devScript: "dev",
+	deployScript: "deploy",
+	previewScript: "preview",
+};
+export default config;

package/templates-experimental/react/js/api/index.js

@@ -0,0 +1,13 @@
+export default {
+  fetch(request, env) {
+    const url = new URL(request.url);
+
+    if (url.pathname.startsWith("/api/")) {
+      return Response.json({
+        name: "Cloudflare",
+      });
+    }
+
+    return env.ASSETS.fetch(request);
+  },
+}

package/templates-experimental/react/js/src/App.jsx

@@ -0,0 +1,58 @@
+import { useState } from 'react'
+import reactLogo from './assets/react.svg'
+import viteLogo from '/vite.svg'
+import cloudflareLogo from './assets/Cloudflare_Logo.svg'
+import './App.css'
+
+function App() {
+  const [count, setCount] = useState(0)
+  const [name, setName] = useState('unknown')
+
+  return (
+    <>
+      <div>
+        <a href='https://vite.dev' target='_blank'>
+          <img src={viteLogo} className='logo' alt='Vite logo' />
+        </a>
+        <a href='https://react.dev' target='_blank'>
+          <img src={reactLogo} className='logo react' alt='React logo' />
+        </a>
+        <a href='https://workers.cloudflare.com/' target='_blank'>
+          <img src={cloudflareLogo} className='logo cloudflare' alt='Cloudflare logo' />
+        </a>
+      </div>
+      <h1>Vite + React + Cloudflare</h1>
+      <div className='card'>
+        <button
+          onClick={() => setCount((count) => count + 1)}
+          aria-label='increment'
+        >
+          count is {count}
+        </button>
+        <p>
+          Edit <code>src/App.tsx</code> and save to test HMR
+        </p>
+      </div>
+      <div className='card'>
+        <button
+          onClick={() => {
+            fetch('/api/')
+              .then((res) => res.json())
+              .then((data) => setName(data.name))
+          }}
+          aria-label='get name'
+        >
+          Name from API is: {name}
+        </button>
+        <p>
+          Edit <code>api/index.js</code> to change the name
+        </p>
+      </div>
+      <p className='read-the-docs'>
+        Click on the Vite and React logos to learn more
+      </p>
+    </>
+  )
+}
+
+export default App

package/templates-experimental/react/js/src/assets/Cloudflare_Logo.svg

@@ -0,0 +1,26 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 101.4 33.5">
+  <defs>
+    <style>
+      .a {
+        fill: #fff;
+      }
+
+      .b {
+        fill: #f48120;
+      }
+
+      .c {
+        fill: #faad3f;
+      }
+
+      .d {
+        fill: #404041;
+      }
+    </style>
+  </defs>
+  <title>Cloudflare logo</title>
+  <path class="a" d="M94.7,10.6,89.1,9.3l-1-.4-25.7.2V21.5l32.3.1Z"/>
+  <path class="b" d="M84.2,20.4a2.85546,2.85546,0,0,0-.3-2.6,3.09428,3.09428,0,0,0-2.1-1.1l-17.4-.2c-.1,0-.2-.1-.3-.1a.1875.1875,0,0,1,0-.3c.1-.2.2-.3.4-.3L82,15.6a6.29223,6.29223,0,0,0,5.1-3.8l1-2.6c0-.1.1-.2,0-.3A11.39646,11.39646,0,0,0,66.2,7.7a5.45941,5.45941,0,0,0-3.6-1A5.20936,5.20936,0,0,0,58,11.3a5.46262,5.46262,0,0,0,.1,1.8A7.30177,7.30177,0,0,0,51,20.4a4.102,4.102,0,0,0,.1,1.1.3193.3193,0,0,0,.3.3H83.5c.2,0,.4-.1.4-.3Z"/>
+  <path class="c" d="M89.7,9.2h-.5c-.1,0-.2.1-.3.2l-.7,2.4a2.85546,2.85546,0,0,0,.3,2.6,3.09428,3.09428,0,0,0,2.1,1.1l3.7.2c.1,0,.2.1.3.1a.1875.1875,0,0,1,0,.3c-.1.2-.2.3-.4.3l-3.8.2a6.29223,6.29223,0,0,0-5.1,3.8l-.2.9c-.1.1,0,.3.2.3H98.5a.26517.26517,0,0,0,.3-.3,10.87184,10.87184,0,0,0,.4-2.6,9.56045,9.56045,0,0,0-9.5-9.5"/>
+  <path class="d" d="M100.5,27.2a.9.9,0,1,1,.9-.9.89626.89626,0,0,1-.9.9m0-1.6a.7.7,0,1,0,.7.7.68354.68354,0,0,0-.7-.7m.4,1.2h-.2l-.2-.3h-.2v.3h-.2v-.9h.5a.26517.26517,0,0,1,.3.3c0,.1-.1.2-.2.3l.2.3Zm-.3-.5c.1,0,.1,0,.1-.1a.09794.09794,0,0,0-.1-.1h-.3v.3h.3Zm-89.7-.9h2.2v6h3.8v1.9h-6Zm8.3,3.9a4.10491,4.10491,0,0,1,4.3-4.1,4.02,4.02,0,0,1,4.2,4.1,4.10491,4.10491,0,0,1-4.3,4.1,4.07888,4.07888,0,0,1-4.2-4.1m6.3,0a2.05565,2.05565,0,0,0-2-2.2,2.1025,2.1025,0,0,0,0,4.2c1.2.2,2-.8,2-2m4.9.5V25.4h2.2v4.4c0,1.1.6,1.7,1.5,1.7a1.39926,1.39926,0,0,0,1.5-1.6V25.4h2.2v4.4c0,2.6-1.5,3.7-3.7,3.7-2.3-.1-3.7-1.2-3.7-3.7m10.7-4.4h3.1c2.8,0,4.5,1.6,4.5,3.9s-1.7,4-4.5,4h-3V25.4Zm3.1,5.9a2.00909,2.00909,0,1,0,0-4h-.9v4Zm7.6-5.9h6.3v1.9H54v1.3h3.7v1.8H54v2.9H51.8Zm9.4,0h2.2v6h3.8v1.9h-6Zm11.7-.1h2.2l3.4,8H76.1l-.6-1.4H72.4l-.6,1.4H69.5Zm2,4.9L74,28l-.9,2.2Zm6.4-4.8H85a3.41818,3.41818,0,0,1,2.6.9,2.62373,2.62373,0,0,1-.9,4.2l1.9,2.8H86.1l-1.6-2.4h-1v2.4H81.3Zm3.6,3.8c.7,0,1.2-.4,1.2-.9,0-.6-.5-.9-1.2-.9H83.5v1.9h1.4Zm6.5-3.8h6.4v1.8H93.6v1.2h3.8v1.8H93.6v1.2h4.3v1.9H91.4ZM6.1,30.3a1.97548,1.97548,0,0,1-1.8,1.2,2.1025,2.1025,0,0,1,0-4.2,2.0977,2.0977,0,0,1,1.9,1.3H8.5a4.13459,4.13459,0,0,0-4.2-3.3A4.1651,4.1651,0,0,0,0,29.4a4.07888,4.07888,0,0,0,4.2,4.1,4.31812,4.31812,0,0,0,4.2-3.2Z"/>
+</svg>

package/templates-experimental/react/js/wrangler.json

@@ -0,0 +1,9 @@
+{
+	"name": "<TBD>",
+	"main": "api/index.js",
+	"compatibility_date": "<TBD>",
+	"assets": { "not_found_handling": "single-page-application", "binding": "ASSETS" },
+	"observability": {
+		"enabled": true
+	}
+}

package/templates-experimental/react/ts/api/index.ts

@@ -0,0 +1,17 @@
+interface Env {
+  ASSETS: Fetcher;
+}
+
+export default {
+  fetch(request, env) {
+    const url = new URL(request.url);
+
+    if (url.pathname.startsWith("/api/")) {
+      return Response.json({
+        name: "Cloudflare",
+      });
+    }
+
+    return env.ASSETS.fetch(request);
+  },
+} satisfies ExportedHandler<Env>;

package/templates-experimental/react/ts/src/App.tsx

@@ -0,0 +1,58 @@
+import { useState } from 'react'
+import reactLogo from './assets/react.svg'
+import viteLogo from '/vite.svg'
+import cloudflareLogo from './assets/Cloudflare_Logo.svg'
+import './App.css'
+
+function App() {
+  const [count, setCount] = useState(0)
+  const [name, setName] = useState('unknown')
+
+  return (
+    <>
+      <div>
+        <a href='https://vite.dev' target='_blank'>
+          <img src={viteLogo} className='logo' alt='Vite logo' />
+        </a>
+        <a href='https://react.dev' target='_blank'>
+          <img src={reactLogo} className='logo react' alt='React logo' />
+        </a>
+        <a href='https://workers.cloudflare.com/' target='_blank'>
+          <img src={cloudflareLogo} className='logo cloudflare' alt='Cloudflare logo' />
+        </a>
+      </div>
+      <h1>Vite + React + Cloudflare</h1>
+      <div className='card'>
+        <button
+          onClick={() => setCount((count) => count + 1)}
+          aria-label='increment'
+        >
+          count is {count}
+        </button>
+        <p>
+          Edit <code>src/App.tsx</code> and save to test HMR
+        </p>
+      </div>
+      <div className='card'>
+        <button
+          onClick={() => {
+            fetch('/api/')
+              .then((res) => res.json() as Promise<{ name: string }>)
+              .then((data) => setName(data.name))
+          }}
+          aria-label='get name'
+        >
+          Name from API is: {name}
+        </button>
+        <p>
+          Edit <code>api/index.ts</code> to change the name
+        </p>
+      </div>
+      <p className='read-the-docs'>
+        Click on the Vite and React logos to learn more
+      </p>
+    </>
+  )
+}
+
+export default App