create-cloudflare 0.0.0-c4d034a0 → 0.0.0-c4fa349da

package/templates/qwik/c3.ts

@@ -1,4 +1,4 @@
-import { crash, endSection } from "@cloudflare/cli";
+import { endSection } from "@cloudflare/cli";
 import { brandColor } from "@cloudflare/cli/colors";
 import { spinner } from "@cloudflare/cli/interactive";
 import { runFrameworkGenerator } from "frameworks/index";
@@ -10,15 +10,16 @@ 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, ["basic", ctx.project.name]);
+	await runFrameworkGenerator(ctx, ["playground", ctx.project.name]);
 };
 
 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);
 
@@ -43,7 +44,7 @@ const addBindingsProxy = (ctx: C3Context) => {
 		// Insert the env declaration after the last import (but before the rest of the body)
 		visitProgram: function (n) {
 			const lastImportIndex = n.node.body.findLastIndex(
-				(t) => t.type === "ImportDeclaration"
+				(t) => t.type === "ImportDeclaration",
 			);
 			const lastImport = n.get("body", lastImportIndex);
 			lastImport.insertAfter(...snippets.getPlatformProxyTs);
@@ -75,7 +76,7 @@ const addBindingsProxy = (ctx: C3Context) => {
 			}
 
 			if (configArgument.type !== "ObjectExpression") {
-				crash("Failed to update `vite.config.ts`");
+				throw new Error("Failed to update `vite.config.ts`");
 			}
 
 			// Add the `platform` object to the object
@@ -109,8 +110,8 @@ const populateCloudflareEnv = () => {
 			].map(([varName, type]) =>
 				b.tsPropertySignature(
 					b.identifier(varName),
-					b.tsTypeAnnotation(b.tsTypeReference(b.identifier(type)))
-				)
+					b.tsTypeAnnotation(b.tsTypeReference(b.identifier(type))),
+				),
 			);
 
 			n.node.body.body = newBody;
@@ -125,6 +126,7 @@ const populateCloudflareEnv = () => {
 const config: TemplateConfig = {
 	configVersion: 1,
 	id: "qwik",
+	frameworkCli: "create-qwik",
 	displayName: "Qwik",
 	platform: "pages",
 	copyFiles: {

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

@@ -1,4 +1,4 @@
 // Generated by Wrangler
-// After adding bindings to `wrangler.toml`, 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/qwik/templates/wrangler.jsonc

@@ -0,0 +1,8 @@
+{
+  "name": "<TBD>",
+  "compatibility_date": "<TBD>",
+  "compatibility_flags": [
+    "nodejs_compat"
+  ],
+  "pages_build_output_dir": "./dist"
+}

package/templates/react/c3.ts

@@ -1,31 +1,9 @@
-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";
+import pages from "./pages/c3";
+import workers from "./workers/c3";
+import type { MultiPlatformTemplateConfig } from "../../src/templates";
 
-const { npm } = detectPackageManager();
-
-const generate = async (ctx: C3Context) => {
-	await runFrameworkGenerator(ctx, [ctx.project.name]);
-
-	logRaw("");
-};
-
-const config: TemplateConfig = {
-	configVersion: 1,
-	id: "react",
+const config: MultiPlatformTemplateConfig = {
 	displayName: "React",
-	platform: "pages",
-	generate,
-	transformPackageJson: async () => ({
-		scripts: {
-			deploy: `${npm} run build && wrangler pages deploy ./build`,
-			preview: `${npm} run build && wrangler pages dev ./build`,
-		},
-	}),
-	devScript: "dev",
-	deployScript: "deploy",
-	previewScript: "preview",
+	platformVariants: { pages, workers },
 };
 export default config;

package/templates/react/pages/c3.ts

@@ -0,0 +1,62 @@
+import { logRaw } from "@cloudflare/cli";
+import { inputPrompt } from "@cloudflare/cli/interactive";
+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) => {
+	const variant = await inputPrompt({
+		type: "select",
+		question: "Select a variant:",
+		label: "variant",
+		options: variantsOptions,
+		defaultValue: variantsOptions[0].value,
+	});
+
+	await runFrameworkGenerator(ctx, [ctx.project.name, "--template", variant]);
+
+	logRaw("");
+};
+
+const variantsOptions = [
+	{
+		value: "react-ts",
+		label: "TypeScript",
+	},
+	{
+		value: "react-swc-ts",
+		label: "TypeScript + SWC",
+	},
+	{
+		value: "react",
+		label: "JavaScript",
+	},
+	{
+		value: "react-swc",
+		label: "JavaScript + SWC",
+	},
+];
+
+const config: TemplateConfig = {
+	configVersion: 1,
+	id: "react",
+	// React's documentation now recommends using create-vite.
+	frameworkCli: "create-vite",
+	displayName: "React",
+	platform: "pages",
+	path: "templates/react/pages",
+	generate,
+	transformPackageJson: async () => ({
+		scripts: {
+			deploy: `${npm} run build && wrangler pages deploy ./dist`,
+			preview: `${npm} run build && wrangler pages dev ./dist`,
+		},
+	}),
+	devScript: "dev",
+	deployScript: "deploy",
+	previewScript: "preview",
+};
+export default config;

package/templates/react/workers/c3.ts

@@ -0,0 +1,183 @@
+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/react/workers",
+	copyFiles: {
+		variants: {
+			ts: {
+				path: "./ts",
+			},
+			js: {
+				path: "./js",
+			},
+		},
+	},
+	generate,
+	configure,
+	transformPackageJson: async (_, ctx) => ({
+		scripts: {
+			deploy: `${npm} run build && wrangler deploy`,
+			preview: `${npm} run build && vite preview`,
+			...(usesTypescript(ctx) && { "cf-typegen": `wrangler types` }),
+		},
+	}),
+	devScript: "dev",
+	deployScript: "deploy",
+	previewScript: "preview",
+};
+export default config;

package/templates/react/workers/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/react/workers/js/src/App.css

@@ -0,0 +1,45 @@
+#root {
+	max-width: 1280px;
+	margin: 0 auto;
+	padding: 2rem;
+	text-align: center;
+}
+
+.logo {
+	height: 6em;
+	padding: 1.5em;
+	will-change: filter;
+	transition: filter 300ms;
+}
+.logo:hover {
+	filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+	filter: drop-shadow(0 0 2em #61dafbaa);
+}
+.logo.cloudflare:hover {
+	filter: drop-shadow(0 0 2em #f6821faa);
+}
+
+@keyframes logo-spin {
+	from {
+		transform: rotate(0deg);
+	}
+	to {
+		transform: rotate(360deg);
+	}
+}
+
+@media (prefers-reduced-motion: no-preference) {
+	a:nth-of-type(2) .logo {
+		animation: logo-spin infinite 20s linear;
+	}
+}
+
+.card {
+	padding: 2em;
+}
+
+.read-the-docs {
+	color: #888;
+}

package/templates/react/workers/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/react/workers/js/src/assets/Cloudflare_Logo.svg

@@ -0,0 +1,53 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 822.8 355.5" style="enable-background:new 0 0 822.8 355.5;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+	@media(prefers-color-scheme:light){.st0{fill:#404242;}}
+	.st1{fill:#FFFFFF;}
+	.st2{fill:#FBAE40;}
+	.st3{fill:#F58220;}
+</style>
+<g id="Page-1">
+	<path id="CLOUDFLARE-_xAE_" class="st0" d="M772.2,252.6c-3.4,0-6.1-2.7-6.1-6.1c0-3.3,2.7-6.1,6.1-6.1c3.3,0,6.1,2.7,6.1,6.1
+		C778.3,249.8,775.5,252.6,772.2,252.6L772.2,252.6z M772.2,241.6c-2.7,0-4.9,2.2-4.9,4.9s2.2,4.9,4.9,4.9c2.7,0,4.9-2.2,4.9-4.9
+		S774.9,241.6,772.2,241.6L772.2,241.6z M775.3,249.7h-1.4l-1.2-2.3h-1.6v2.3h-1.3V243h3.2c1.4,0,2.3,0.9,2.3,2.2c0,1-0.6,1.7-1.4,2
+		L775.3,249.7z M772.9,246.2c0.5,0,1-0.3,1-1c0-0.8-0.4-1-1-1h-2v2H772.9z M136.7,239.8h15.6v42.5h27.1v13.6h-42.7V239.8z
+		 M195.5,268v-0.2c0-16.1,13-29.2,30.3-29.2s30.1,12.9,30.1,29v0.2c0,16.1-13,29.2-30.3,29.2S195.5,284.1,195.5,268z M240.1,268
+		v-0.2c0-8.1-5.8-15.1-14.4-15.1c-8.5,0-14.2,6.9-14.2,15v0.2c0,8.1,5.8,15.1,14.3,15.1C234.4,283,240.1,276.1,240.1,268z
+		 M275,271.3v-31.5h15.8V271c0,8.1,4.1,11.9,10.3,11.9c6.2,0,10.3-3.7,10.3-11.5v-31.6h15.8v31.1c0,18.1-10.3,26-26.3,26
+		C285,296.9,275,288.9,275,271.3z M351,239.8h21.6c20,0,31.7,11.5,31.7,27.7v0.2c0,16.2-11.8,28.2-32,28.2H351V239.8z M372.9,282.1
+		c9.3,0,15.5-5.1,15.5-14.2v-0.2c0-9-6.2-14.2-15.5-14.2h-6.3V282L372.9,282.1L372.9,282.1z M426.9,239.8h44.9v13.6h-29.4v9.6H469
+		v12.9h-26.6v20h-15.5V239.8z M493.4,239.8h15.5v42.5h27.2v13.6h-42.7V239.8z M576.7,239.4h15l23.9,56.5h-16.7l-4.1-10h-21.6l-4,10
+		h-16.3L576.7,239.4z M590.4,273.8l-6.2-15.9l-6.3,15.9H590.4z M635.6,239.8h26.5c8.6,0,14.5,2.2,18.3,6.1c3.3,3.2,5,7.5,5,13.1v0.2
+		c0,8.6-4.6,14.3-11.5,17.2l13.4,19.6h-18L658,279h-6.8v17h-15.6V239.8z M661.4,266.7c5.3,0,8.3-2.6,8.3-6.6v-0.2
+		c0-4.4-3.2-6.6-8.4-6.6h-10.2v13.4H661.4z M707.8,239.8h45.1V253h-29.7v8.5h26.9v12.3h-26.9v8.9h30.1v13.2h-45.5V239.8z
+		 M102.7,274.6c-2.2,4.9-6.8,8.4-12.8,8.4c-8.5,0-14.3-7.1-14.3-15.1v-0.2c0-8.1,5.7-15,14.2-15c6.4,0,11.3,3.9,13.3,9.3h16.4
+		c-2.6-13.4-14.4-23.3-29.6-23.3c-17.3,0-30.3,13.1-30.3,29.2v0.2c0,16.1,12.8,29,30.1,29c14.8,0,26.4-9.6,29.4-22.4L102.7,274.6z"
+		/>
+	<path id="flare" class="st1" d="M734.5,150.4l-40.7-24.7c-0.6-0.1-4.4,0.3-6.4-0.7c-1.4-0.7-2.5-1.9-3.2-4c-3.2,0-175.5,0-175.5,0
+		v91.8h225.8V150.4z"/>
+	<path id="right-cloud" class="st2" d="M692.2,125.8c-0.8,0-1.5,0.6-1.8,1.4l-4.8,16.7c-2.1,7.2-1.3,13.8,2.2,18.7
+		c3.2,4.5,8.6,7.1,15.1,7.4l26.2,1.6c0.8,0,1.5,0.4,1.9,1c0.4,0.6,0.5,1.5,0.3,2.2c-0.4,1.2-1.6,2.1-2.9,2.2l-27.3,1.6
+		c-14.8,0.7-30.7,12.6-36.3,27.2l-2,5.1c-0.4,1,0.3,2,1.4,2H758c1.1,0,2.1-0.7,2.4-1.8c1.6-5.8,2.5-11.9,2.5-18.2
+		c0-37-30.2-67.2-67.3-67.2C694.5,125.7,693.3,125.7,692.2,125.8z"/>
+	<path id="left-cloud" class="st3" d="M656.4,204.6c2.1-7.2,1.3-13.8-2.2-18.7c-3.2-4.5-8.6-7.1-15.1-7.4L516,176.9
+		c-0.8,0-1.5-0.4-1.9-1c-0.4-0.6-0.5-1.4-0.3-2.2c0.4-1.2,1.6-2.1,2.9-2.2l124.2-1.6c14.7-0.7,30.7-12.6,36.3-27.2l7.1-18.5
+		c0.3-0.8,0.4-1.6,0.2-2.4c-8-36.2-40.3-63.2-78.9-63.2c-35.6,0-65.8,23-76.6,54.9c-7-5.2-15.9-8-25.5-7.1
+		c-17.1,1.7-30.8,15.4-32.5,32.5c-0.4,4.4-0.1,8.7,0.9,12.7c-27.9,0.8-50.2,23.6-50.2,51.7c0,2.5,0.2,5,0.5,7.5
+		c0.2,1.2,1.2,2.1,2.4,2.1h227.2c1.3,0,2.5-0.9,2.9-2.2L656.4,204.6z"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

package/templates/react/workers/js/wrangler.jsonc

@@ -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/react/workers/ts/api/index.ts

@@ -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);
+  },
+} satisfies ExportedHandler<Env>;

package/templates/react/workers/ts/src/App.css

@@ -0,0 +1,45 @@
+#root {
+	max-width: 1280px;
+	margin: 0 auto;
+	padding: 2rem;
+	text-align: center;
+}
+
+.logo {
+	height: 6em;
+	padding: 1.5em;
+	will-change: filter;
+	transition: filter 300ms;
+}
+.logo:hover {
+	filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+	filter: drop-shadow(0 0 2em #61dafbaa);
+}
+.logo.cloudflare:hover {
+	filter: drop-shadow(0 0 2em #f6821faa);
+}
+
+@keyframes logo-spin {
+	from {
+		transform: rotate(0deg);
+	}
+	to {
+		transform: rotate(360deg);
+	}
+}
+
+@media (prefers-reduced-motion: no-preference) {
+	a:nth-of-type(2) .logo {
+		animation: logo-spin infinite 20s linear;
+	}
+}
+
+.card {
+	padding: 2em;
+}
+
+.read-the-docs {
+	color: #888;
+}

package/templates/react/workers/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