create-cloudflare 2.67.0 → 2.67.2

package/dist/cli.js

@@ -74534,7 +74534,7 @@ var __toESM2 = (mod, isNodeMode, target) => (target = mod != null ? __create2(__
   mod
 ));
 
-// ../workers-utils/dist/chunk-S3JFRPJM.mjs
+// ../workers-utils/dist/chunk-L6UDSO24.mjs
 var import_node_assert = __toESM(require("node:assert"), 1);
 function isCompatDate(str) {
   return /^\d{4}-\d{2}-\d{2}$/.test(str);
@@ -74666,6 +74666,17 @@ function mapWorkerMetadataBindings(bindings) {
           ];
         }
         break;
+      case "artifacts":
+        {
+          configObj.artifacts = [
+            ...configObj.artifacts ?? [],
+            {
+              binding: binding.name,
+              namespace: binding.namespace
+            }
+          ];
+        }
+        break;
       case "unsafe_hello_world": {
         configObj.unsafe_hello_world = [
           ...configObj.unsafe_hello_world ?? [],
@@ -78462,6 +78473,7 @@ var defaultWranglerConfig = {
   hyperdrive: [],
   workflows: [],
   secrets_store_secrets: [],
+  artifacts: [],
   services: [],
   analytics_engine_datasets: [],
   ai: void 0,
@@ -83060,7 +83072,7 @@ var friendlyBindingNames = {
   services: "Worker",
   analytics_engine_datasets: "Analytics Engine Dataset",
   text_blobs: "Text Blob",
-  browser: "Browser",
+  browser: "Browser Run",
   ai: "AI",
   images: "Images",
   stream: "Stream",
@@ -83074,6 +83086,7 @@ var friendlyBindingNames = {
   workflows: "Workflow",
   pipelines: "Pipeline",
   secrets_store_secrets: "Secrets Store Secret",
+  artifacts: "Artifacts",
   ratelimits: "Rate Limit",
   assets: "Assets",
   unsafe_hello_world: "Hello World",
@@ -83091,7 +83104,7 @@ var bindingTypeFriendlyNames = {
   send_email: "Send Email",
   wasm_module: "Wasm Module",
   text_blob: "Text Blob",
-  browser: "Browser",
+  browser: "Browser Run",
   ai: "AI",
   images: "Images",
   stream: "Stream",
@@ -83113,6 +83126,7 @@ var bindingTypeFriendlyNames = {
   mtls_certificate: "mTLS Certificate",
   pipeline: "Pipeline",
   secrets_store_secret: "Secrets Store Secret",
+  artifacts: "Artifacts",
   logfwdr: "logfwdr",
   unsafe_hello_world: "Hello World",
   flagship: "Flagship",
@@ -84430,6 +84444,16 @@ function normalizeAndValidateEnvironment(diagnostics, configPath, rawEnv, isDisp
       validateBindingArray(envName, validateSecretsStoreSecretBinding),
       []
     ),
+    artifacts: notInheritable(
+      diagnostics,
+      topLevelEnv,
+      rawConfig,
+      rawEnv,
+      envName,
+      "artifacts",
+      validateBindingArray(envName, validateArtifactsBinding),
+      []
+    ),
     unsafe_hello_world: notInheritable(
       diagnostics,
       topLevelEnv,
@@ -85327,7 +85351,8 @@ var validateUnsafeBinding = /* @__PURE__ */ __name((diagnostics, field, value) =
       "flagship",
       "vpc_network",
       "stream",
-      "media"
+      "media",
+      "artifacts"
     ];
     if (safeBindings.includes(value.type)) {
       diagnostics.warnings.push(
@@ -85585,6 +85610,11 @@ function validateContainerApp(envName, topLevelName, configPath) {
           `"containers.durable_objects" is deprecated. Use the "class_name" field instead.`
         );
       }
+      if ("wrangler_ssh" in containerAppOptional) {
+        diagnostics.warnings.push(
+          `"containers.wrangler_ssh" is deprecated. Use "containers.ssh" instead.`
+        );
+      }
       if ("unsafe" in containerAppOptional) {
         if (containerAppOptional.unsafe && typeof containerAppOptional.unsafe !== "object" || Array.isArray(containerAppOptional.unsafe)) {
           diagnostics.errors.push(
@@ -85608,6 +85638,7 @@ function validateContainerApp(envName, topLevelName, configPath) {
           "class_name",
           "scheduling_policy",
           "instance_type",
+          "ssh",
           "wrangler_ssh",
           "authorized_keys",
           "trusted_user_ca_keys",
@@ -85629,23 +85660,28 @@ function validateContainerApp(envName, topLevelName, configPath) {
           ["image", "secrets", "labels", "disk", "vcpu", "memory_mib"]
         );
       }
-      if ("wrangler_ssh" in containerAppOptional) {
-        if (!isRequiredProperty(
-          containerAppOptional.wrangler_ssh,
-          "enabled",
-          "boolean"
-        )) {
+      let sshField;
+      let sshConfig;
+      if ("ssh" in containerAppOptional) {
+        sshField = "ssh";
+        sshConfig = containerAppOptional.ssh;
+        containerAppOptional.wrangler_ssh = containerAppOptional.ssh;
+        delete containerAppOptional.ssh;
+      } else if ("wrangler_ssh" in containerAppOptional) {
+        sshField = "wrangler_ssh";
+        sshConfig = containerAppOptional.wrangler_ssh;
+      }
+      if (sshField !== void 0) {
+        const sshConfigObject = typeof sshConfig === "object" && sshConfig !== null ? sshConfig : {};
+        if (!isRequiredProperty(sshConfigObject, "enabled", "boolean")) {
           diagnostics.errors.push(
-            `${field}.wrangler_ssh.enabled must be a boolean`
+            `${field}.${sshField}.enabled must be a boolean`
           );
         }
-        if (!isOptionalProperty(
-          containerAppOptional.wrangler_ssh,
-          "port",
-          "number"
-        ) || containerAppOptional.wrangler_ssh.port < 1 || containerAppOptional.wrangler_ssh.port > 65535) {
+        const sshPort = "port" in sshConfigObject ? sshConfigObject.port : void 0;
+        if (!isOptionalProperty(sshConfigObject, "port", "number") || typeof sshPort === "number" && (sshPort < 1 || sshPort > 65535)) {
           diagnostics.errors.push(
-            `${field}.wrangler_ssh.port must be a number between 1 and 65535 inclusive`
+            `${field}.${sshField}.port must be a number between 1 and 65535 inclusive`
           );
         }
       }
@@ -85721,6 +85757,43 @@ function validateContainerApp(envName, topLevelName, configPath) {
           constraints.tiers,
           "number"
         );
+        validateOptionalProperty(
+          diagnostics,
+          `${field}.constraints`,
+          "jurisdiction",
+          constraints.jurisdiction,
+          "string"
+        );
+        if (constraints.jurisdiction && !["eu", "fedramp"].includes(constraints.jurisdiction)) {
+          diagnostics.errors.push(
+            `${field}.constraints.jurisdiction must be one of: "eu", "fedramp"`
+          );
+        }
+        if (validateOptionalTypedArray(
+          diagnostics,
+          `${field}.constraints.regions`,
+          constraints.regions,
+          "string"
+        ) && constraints.regions && Array.isArray(constraints.regions)) {
+          const validRegions = [
+            "ENAM",
+            "WNAM",
+            "EEUR",
+            "WEUR",
+            "APAC",
+            "SAM",
+            "ME",
+            "OC",
+            "AFR"
+          ];
+          for (const region of constraints.regions) {
+            if (typeof region === "string" && !validRegions.includes(region.toUpperCase())) {
+              diagnostics.errors.push(
+                `${field}.constraints.regions contains invalid region "${region}". Valid regions are: ${validRegions.join(", ")}`
+              );
+            }
+          }
+        }
       }
       if (typeof containerAppOptional.instance_type === "string") {
         validateOptionalProperty(
@@ -86731,6 +86804,40 @@ var validateSecretsStoreSecretBinding = /* @__PURE__ */ __name((diagnostics, fie
   ]);
   return isValid2;
 }, "validateSecretsStoreSecretBinding");
+var validateArtifactsBinding = /* @__PURE__ */ __name((diagnostics, field, value) => {
+  if (typeof value !== "object" || value === null) {
+    diagnostics.errors.push(
+      `"artifacts" bindings should be objects, but got ${JSON.stringify(value)}`
+    );
+    return false;
+  }
+  let isValid2 = true;
+  if (!isRequiredProperty(value, "binding", "string")) {
+    diagnostics.errors.push(
+      `"${field}" bindings must have a string "binding" field but got ${JSON.stringify(
+        value
+      )}.`
+    );
+    isValid2 = false;
+  }
+  if (!isRequiredProperty(value, "namespace", "string")) {
+    diagnostics.errors.push(
+      `"${field}" bindings must have a string "namespace" field but got ${JSON.stringify(
+        value
+      )}.`
+    );
+    isValid2 = false;
+  }
+  validateAdditionalProperties(diagnostics, field, Object.keys(value), [
+    "binding",
+    "namespace",
+    "remote"
+  ]);
+  if (!isRemoteValid(value, field, diagnostics)) {
+    isValid2 = false;
+  }
+  return isValid2;
+}, "validateArtifactsBinding");
 var validateHelloWorldBinding = /* @__PURE__ */ __name((diagnostics, field, value) => {
   if (typeof value !== "object" || value === null) {
     diagnostics.errors.push(
@@ -86952,6 +87059,7 @@ var validatePreviewsConfig = /* @__PURE__ */ __name((envName) => (diagnostics, f
     "media",
     "pipelines",
     "secrets_store_secrets",
+    "artifacts",
     "unsafe_hello_world",
     "worker_loaders",
     "ratelimits",
@@ -87121,6 +87229,12 @@ var validatePreviewsConfig = /* @__PURE__ */ __name((envName) => (diagnostics, f
     previews.secrets_store_secrets,
     void 0
   ) && isValid2;
+  isValid2 = validateBindingArray(envName, validateArtifactsBinding)(
+    diagnostics,
+    `${field}.artifacts`,
+    previews.artifacts,
+    void 0
+  ) && isValid2;
   isValid2 = validateBindingArray(envName, validateHelloWorldBinding)(
     diagnostics,
     `${field}.unsafe_hello_world`,
@@ -94543,7 +94657,7 @@ var Yargs = YargsFactory(esm_default2);
 var yargs_default = Yargs;
 
 // package.json
-var version = "2.67.0";
+var version = "2.67.2";
 
 // src/metrics.ts
 var import_node_async_hooks = require("node:async_hooks");
@@ -96769,23 +96883,23 @@ var package_default = {
   name: "frameworks_clis_info",
   dependencies: {
     "@angular/create": "21.2.6",
-    "@tanstack/create-start": "0.59.8",
-    "create-analog": "2.4.7",
+    "@tanstack/create-start": "0.59.21",
+    "create-analog": "2.4.8",
     "create-astro": "5.0.5",
     "create-docusaurus": "3.10.0",
     "create-hono": "0.19.4",
-    "create-next-app": "16.2.2",
+    "create-next-app": "16.2.4",
     "create-qwik": "1.19.2",
-    "create-react-router": "7.14.0",
+    "create-react-router": "7.14.1",
     "create-rwsdk": "3.1.3",
     "create-solid": "0.7.0",
-    "create-vike": "0.0.616",
+    "create-vike": "0.0.622",
     "create-vite": "9.0.4",
     "create-vue": "3.22.2",
     "create-waku": "0.12.5-1.0.0-alpha.7-0",
     gatsby: "5.16.1",
     nuxi: "3.34.0",
-    sv: "0.12.4"
+    sv: "0.12.5"
   },
   info: [
     "This package.json is only used to keep track of the frameworks cli dependencies",
@@ -98531,23 +98645,23 @@ async function getVariant2(ctx) {
       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"
     }
   ];
   if (ctx.args.variant) {
+    const deprecatedVariantReplacements = {
+      "react-swc-ts": "react-ts",
+      "react-swc": "react"
+    };
+    const replacement = deprecatedVariantReplacements[ctx.args.variant];
+    if (replacement) {
+      throw new Error(
+        `The React variant "${ctx.args.variant}" is no longer available. Use "${replacement}" instead.`
+      );
+    }
     const selected2 = variantsOptions2.find(
       (variant) => variant.value === ctx.args.variant
     );
@@ -99243,7 +99357,7 @@ If the application uses Durable Objects or Workflows, refer to the relevant best
 var import_node_assert6 = __toESM(require("node:assert"));
 
 // ../wrangler/package.json
-var version2 = "4.83.0";
+var version2 = "4.84.1";
 
 // src/git.ts
 var offerGit = async (ctx) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-cloudflare",
-  "version": "2.67.0",
+  "version": "2.67.2",
   "description": "A CLI for creating and deploying new applications to Cloudflare.",
   "keywords": [
     "cloudflare",
@@ -31,7 +31,7 @@
     "@babel/parser": "^7.21.3",
     "@babel/types": "^7.21.4",
     "@clack/prompts": "^0.6.3",
-    "@cloudflare/workers-types": "^4.20260415.1",
+    "@cloudflare/workers-types": "^4.20260421.1",
     "@types/command-exists": "^1.2.0",
     "@types/cross-spawn": "^6.0.2",
     "@types/deepmerge": "^2.2.0",
@@ -53,7 +53,6 @@
     "execa": "^7.1.1",
     "exit-hook": "2.2.1",
     "get-port": "^7.1.0",
-    "glob": "^10.5.0",
     "haikunator": "^2.1.2",
     "indent-string": "^5.0.0",
     "jsonc-parser": "^3.2.0",
@@ -62,6 +61,7 @@
     "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",
     "undici": "7.24.8",
@@ -75,10 +75,10 @@
     "@cloudflare/cli": "1.4.0",
     "@cloudflare/codemod": "1.1.0",
     "@cloudflare/mock-npm-registry": "0.0.0",
-    "@cloudflare/vite-plugin": "1.32.3",
+    "@cloudflare/vite-plugin": "1.33.1",
     "@cloudflare/workers-tsconfig": "0.0.0",
-    "@cloudflare/workers-utils": "0.16.1",
-    "wrangler": "4.83.0"
+    "@cloudflare/workers-utils": "0.17.0",
+    "wrangler": "4.84.1"
   },
   "engines": {
     "node": ">=20.0.0"

package/templates/react/workers/c3.ts

@@ -122,25 +122,27 @@ async function getVariant(ctx: C3Context) {
 			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",
-		},
 	];
 
 	// If variant is provided via CLI args, use it directly
 	if (ctx.args.variant) {
+		const deprecatedVariantReplacements: Record<string, string> = {
+			"react-swc-ts": "react-ts",
+			"react-swc": "react",
+		};
+
+		const replacement = deprecatedVariantReplacements[ctx.args.variant];
+		if (replacement) {
+			throw new Error(
+				`The React variant "${ctx.args.variant}" is no longer available. Use "${replacement}" instead.`
+			);
+		}
+
 		const selected = variantsOptions.find(
 			(variant) => variant.value === ctx.args.variant
 		);

package/templates/react/workers/js/src/App.jsx

@@ -1,7 +1,8 @@
 import { useState } from 'react'
 import reactLogo from './assets/react.svg'
 import viteLogo from './assets/vite.svg'
-import cloudflareLogo from './assets/Cloudflare_Logo.svg'
+import cloudflareLogo from './assets/cloudflare.svg'
+import heroImg from './assets/hero.png'
 import './App.css'
 
 function App() {
@@ -10,47 +11,136 @@ function App() {
 
   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>worker/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>
+      <section id="center">
+        <div className="hero">
+          <img src={heroImg} className="base" width="170" height="179" alt="" />
+          <img src={reactLogo} className="framework" alt="React logo" />
+          <img src={viteLogo} className="vite" alt="Vite logo" />
+        </div>
+        <div>
+          <h1>Get started with Cloudflare</h1>
+          <p>
+            Edit <code>src/App.jsx</code> or <code>worker/index.js</code> and save to test <code>HMR</code>
+          </p>
+        </div>
+        <ul style={{ display: 'flex', gap: '1rem', listStyle: 'none', padding: 0 }}>
+          <li>
+            <button
+              className="counter"
+              onClick={() => setCount((count) => count + 1)}
+            >
+              Count is {count}
+            </button>
+          </li>
+          <li>
+          <button
+            className="counter"
+            onClick={() => {
+              fetch('/api/')
+                .then((res) => res.json())
+                .then((data) => setName(data.name))
+            }}
+            aria-label='get name'
+          >
+            Name from API is: {name}
+          </button>
+          </li>
+        </ul>
+
+
+      </section>
+
+      <div className="ticks"></div>
+
+      <section id="next-steps">
+        <div id="docs">
+          <svg className="icon" role="presentation" aria-hidden="true">
+            <use href="/icons.svg#documentation-icon"></use>
+          </svg>
+          <h2>Documentation</h2>
+          <p>Your questions, answered</p>
+          <ul>
+            <li>
+              <a href="https://vite.dev/" target="_blank">
+                <img className="logo" src={viteLogo} alt="" />
+                Explore Vite
+              </a>
+            </li>
+            <li>
+              <a href="https://react.dev/" target="_blank">
+                <img className="button-icon" src={reactLogo} alt="" />
+                Learn more
+              </a>
+            </li>
+            <li>
+              <a href="https://workers.cloudflare.com/" target="_blank">
+                <img className="button-icon" src={cloudflareLogo} alt="" />
+                Workers Docs
+              </a>
+            </li>
+          </ul>
+        </div>
+        <div id="social">
+          <svg className="icon" role="presentation" aria-hidden="true">
+            <use href="/icons.svg#social-icon"></use>
+          </svg>
+          <h2>Connect with us</h2>
+          <p>Join the Vite community</p>
+          <ul>
+            <li>
+              <a href="https://github.com/vitejs/vite" target="_blank">
+                <svg
+                  className="button-icon"
+                  role="presentation"
+                  aria-hidden="true"
+                >
+                  <use href="/icons.svg#github-icon"></use>
+                </svg>
+                GitHub
+              </a>
+            </li>
+            <li>
+              <a href="https://chat.vite.dev/" target="_blank">
+                <svg
+                  className="button-icon"
+                  role="presentation"
+                  aria-hidden="true"
+                >
+                  <use href="/icons.svg#discord-icon"></use>
+                </svg>
+                Discord
+              </a>
+            </li>
+            <li>
+              <a href="https://x.com/vite_js" target="_blank">
+                <svg
+                  className="button-icon"
+                  role="presentation"
+                  aria-hidden="true"
+                >
+                  <use href="/icons.svg#x-icon"></use>
+                </svg>
+                X.com
+              </a>
+            </li>
+            <li>
+              <a href="https://bsky.app/profile/vite.dev" target="_blank">
+                <svg
+                  className="button-icon"
+                  role="presentation"
+                  aria-hidden="true"
+                >
+                  <use href="/icons.svg#bluesky-icon"></use>
+                </svg>
+                Bluesky
+              </a>
+            </li>
+          </ul>
+        </div>
+      </section>
+
+      <div className="ticks"></div>
+      <section id="spacer"></section>
     </>
   )
 }

package/templates/react/workers/js/src/assets/cloudflare.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="40" height="19" fill="none" viewBox="0 0 40 19"><path fill="#f6821f" d="m27.16 18.507.204-.735c.242-.873.152-1.68-.255-2.274-.374-.547-.998-.868-1.755-.906l-14.346-.19a.3.3 0 0 1-.127-.034.3.3 0 0 1-.099-.09.31.31 0 0 1-.03-.27.4.4 0 0 1 .128-.185.37.37 0 0 1 .205-.081l14.479-.192c1.717-.082 3.576-1.536 4.227-3.31l.826-2.25a.55.55 0 0 0 .022-.298C29.702 3.29 25.94 0 21.44 0c-4.146 0-7.667 2.792-8.928 6.673a4.1 4.1 0 0 0-2.978-.86c-1.99.206-3.589 1.877-3.786 3.953a4.6 4.6 0 0 0 .11 1.547C2.605 11.41 0 14.189 0 17.603q0 .459.065.911c.009.07.042.134.093.18.05.047.116.072.183.073l26.485.003h.007a.34.34 0 0 0 .205-.076.36.36 0 0 0 .122-.187"/><path fill="#fbad41" d="M31.94 8.153q-.2 0-.397.01a.2.2 0 0 0-.062.014.2.2 0 0 0-.091.061.24.24 0 0 0-.054.098l-.564 2.033c-.243.874-.152 1.68.254 2.274.375.547.998.868 1.756.906l3.058.191a.3.3 0 0 1 .123.035.28.28 0 0 1 .142.22.3.3 0 0 1-.015.14.4.4 0 0 1-.128.185.37.37 0 0 1-.205.08l-3.177.192c-1.725.083-3.585 1.536-4.235 3.31l-.23.626a.18.18 0 0 0 .017.16.17.17 0 0 0 .134.08h10.941a.3.3 0 0 0 .176-.06.3.3 0 0 0 .106-.16 8.5 8.5 0 0 0 .291-2.216c0-4.517-3.51-8.18-7.84-8.18"/></svg>

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

@@ -1,7 +1,8 @@
 import { useState } from 'react'
 import reactLogo from './assets/react.svg'
 import viteLogo from './assets/vite.svg'
-import cloudflareLogo from './assets/Cloudflare_Logo.svg'
+import cloudflareLogo from './assets/cloudflare.svg'
+import heroImg from './assets/hero.png'
 import './App.css'
 
 function App() {
@@ -10,47 +11,136 @@ function App() {
 
   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>worker/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>
+      <section id="center">
+        <div className="hero">
+          <img src={heroImg} className="base" width="170" height="179" alt="" />
+          <img src={reactLogo} className="framework" alt="React logo" />
+          <img src={viteLogo} className="vite" alt="Vite logo" />
+        </div>
+        <div>
+          <h1>Get started with Cloudflare</h1>
+          <p>
+            Edit <code>src/App.tsx</code> or <code>worker/index.ts</code> and save to test <code>HMR</code>
+          </p>
+        </div>
+        <ul style={{ display: 'flex', gap: '1rem', listStyle: 'none', padding: 0 }}>
+          <li>
+            <button
+              className="counter"
+              onClick={() => setCount((count) => count + 1)}
+            >
+              Count is {count}
+            </button>
+          </li>
+          <li>
+          <button
+            className="counter"
+            onClick={() => {
+              fetch('/api/')
+                .then((res) => res.json())
+                .then((data) => setName(data.name))
+            }}
+            aria-label='get name'
+          >
+            Name from API is: {name}
+          </button>
+          </li>
+        </ul>
+
+
+      </section>
+
+      <div className="ticks"></div>
+
+      <section id="next-steps">
+        <div id="docs">
+          <svg className="icon" role="presentation" aria-hidden="true">
+            <use href="/icons.svg#documentation-icon"></use>
+          </svg>
+          <h2>Documentation</h2>
+          <p>Your questions, answered</p>
+          <ul>
+            <li>
+              <a href="https://vite.dev/" target="_blank">
+                <img className="logo" src={viteLogo} alt="" />
+                Explore Vite
+              </a>
+            </li>
+            <li>
+              <a href="https://react.dev/" target="_blank">
+                <img className="button-icon" src={reactLogo} alt="" />
+                Learn more
+              </a>
+            </li>
+            <li>
+              <a href="https://workers.cloudflare.com/" target="_blank">
+                <img className="button-icon" src={cloudflareLogo} alt="" />
+                Workers Docs
+              </a>
+            </li>
+          </ul>
+        </div>
+        <div id="social">
+          <svg className="icon" role="presentation" aria-hidden="true">
+            <use href="/icons.svg#social-icon"></use>
+          </svg>
+          <h2>Connect with us</h2>
+          <p>Join the Vite community</p>
+          <ul>
+            <li>
+              <a href="https://github.com/vitejs/vite" target="_blank">
+                <svg
+                  className="button-icon"
+                  role="presentation"
+                  aria-hidden="true"
+                >
+                  <use href="/icons.svg#github-icon"></use>
+                </svg>
+                GitHub
+              </a>
+            </li>
+            <li>
+              <a href="https://chat.vite.dev/" target="_blank">
+                <svg
+                  className="button-icon"
+                  role="presentation"
+                  aria-hidden="true"
+                >
+                  <use href="/icons.svg#discord-icon"></use>
+                </svg>
+                Discord
+              </a>
+            </li>
+            <li>
+              <a href="https://x.com/vite_js" target="_blank">
+                <svg
+                  className="button-icon"
+                  role="presentation"
+                  aria-hidden="true"
+                >
+                  <use href="/icons.svg#x-icon"></use>
+                </svg>
+                X.com
+              </a>
+            </li>
+            <li>
+              <a href="https://bsky.app/profile/vite.dev" target="_blank">
+                <svg
+                  className="button-icon"
+                  role="presentation"
+                  aria-hidden="true"
+                >
+                  <use href="/icons.svg#bluesky-icon"></use>
+                </svg>
+                Bluesky
+              </a>
+            </li>
+          </ul>
+        </div>
+      </section>
+
+      <div className="ticks"></div>
+      <section id="spacer"></section>
     </>
   )
 }

package/templates/react/workers/ts/src/assets/cloudflare.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="40" height="19" fill="none" viewBox="0 0 40 19"><path fill="#f6821f" d="m27.16 18.507.204-.735c.242-.873.152-1.68-.255-2.274-.374-.547-.998-.868-1.755-.906l-14.346-.19a.3.3 0 0 1-.127-.034.3.3 0 0 1-.099-.09.31.31 0 0 1-.03-.27.4.4 0 0 1 .128-.185.37.37 0 0 1 .205-.081l14.479-.192c1.717-.082 3.576-1.536 4.227-3.31l.826-2.25a.55.55 0 0 0 .022-.298C29.702 3.29 25.94 0 21.44 0c-4.146 0-7.667 2.792-8.928 6.673a4.1 4.1 0 0 0-2.978-.86c-1.99.206-3.589 1.877-3.786 3.953a4.6 4.6 0 0 0 .11 1.547C2.605 11.41 0 14.189 0 17.603q0 .459.065.911c.009.07.042.134.093.18.05.047.116.072.183.073l26.485.003h.007a.34.34 0 0 0 .205-.076.36.36 0 0 0 .122-.187"/><path fill="#fbad41" d="M31.94 8.153q-.2 0-.397.01a.2.2 0 0 0-.062.014.2.2 0 0 0-.091.061.24.24 0 0 0-.054.098l-.564 2.033c-.243.874-.152 1.68.254 2.274.375.547.998.868 1.756.906l3.058.191a.3.3 0 0 1 .123.035.28.28 0 0 1 .142.22.3.3 0 0 1-.015.14.4.4 0 0 1-.128.185.37.37 0 0 1-.205.08l-3.177.192c-1.725.083-3.585 1.536-4.235 3.31l-.23.626a.18.18 0 0 0 .017.16.17.17 0 0 0 .134.08h10.941a.3.3 0 0 0 .176-.06.3.3 0 0 0 .106-.16 8.5 8.5 0 0 0 .291-2.216c0-4.517-3.51-8.18-7.84-8.18"/></svg>

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

@@ -1,45 +0,0 @@
-#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/assets/Cloudflare_Logo.svg

@@ -1,53 +0,0 @@
-<?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/ts/src/App.css

@@ -1,45 +0,0 @@
-#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/assets/Cloudflare_Logo.svg

@@ -1,51 +0,0 @@
-<?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;}
-	.st1{fill:#FBAE40;}
-	.st2{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="st0" 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="st1" 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="st2" 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>