Update Cloudflare template (#109)

Co-authored-by: Mark Dalgleish <[email protected]>

Author: jamesopstad

.tests/test.cloudflare.ts

@@ -15,30 +15,32 @@ test("dev", async ({ page, $ }) => {
 
   const url = await matchLine(dev.stdout, urlRegex.viteDev);
   await workflow({ page, url });
-  expect(dev.buffer.stderr).toBe("");
+  const ignoredLines = [
+    /Default inspector port \d{4} not available, using \d{4} instead/,
+  ];
+  const filteredStderr = dev.buffer.stderr
+    .split("\n")
+    .filter(line => line && !ignoredLines.some(ignoredLine => ignoredLine.test(line)))
+    .join("\n");
+  expect(filteredStderr).toBe("");
 });
 
-test("build + start", async ({ page, $ }) => {
-  await $(`pnpm build`);
-
+test("preview", async ({ page, $ }) => {
   const port1 = await getPort();
-  const port2 = await getPort();
-  const start = $(`pnpm start --port ${port1} --inspector-port ${port2}`);
+  const preview = $(`pnpm preview --port ${port1}`);
 
-  const url = await matchLine(start.stdout, urlRegex.wrangler);
+  const url = await matchLine(preview.stdout, urlRegex.viteDev);
   await workflow({ page, url });
 
   const ignoredLines = [
-    "The version of Wrangler you are using is now out-of-date",
-    "Please update to the latest version to prevent critical errors",
-    "Run `npm install --save-dev wrangler@4` to update to the latest version",
-    "After installation, run Wrangler with `npx wrangler`"
+    /The build was canceled/,
+    /Error running vite-plugin-cloudflare:nodejs-compat on Tailwind CSS output\. Skipping\./,
+    /Default inspector port \d{4} not available, using \d{4} instead/,
   ];
-  const filteredStderr = start.buffer.stderr
+  const filteredStderr = preview.buffer.stderr
     .split("\n")
-    .filter(line => !ignoredLines.some(ignoredLine => line.includes(ignoredLine)))
-    .join("\n")
-    .trim();
+    .filter(line => line && !ignoredLines.some(ignoredLine => ignoredLine.test(line)))
+    .join("\n");
   expect(filteredStderr).toBe("");
 });
 

cloudflare/app/app.css

@@ -1,4 +1,4 @@
-@import "tailwindcss";
+@import "tailwindcss" source(".");
 
 @theme {
   --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif,

cloudflare/package.json

@@ -2,23 +2,23 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "build": "react-router build",
     "dev": "react-router dev",
-    "preview": "vite preview",
-    "start": "wrangler dev",
+    "build": "react-router build",
+    "preview": "npm run build && vite preview",
     "deploy": "npm run build && wrangler deploy",
-    "typecheck": "wrangler types && react-router typegen && tsc -b"
+    "cf-typegen": "wrangler types",
+    "typecheck": "npm run cf-typegen && react-router typegen && tsc -b"
   },
   "dependencies": {
     "isbot": "^5.1.17",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-router": "^7.3.0"
+    "react-router": "^7.5.0"
   },
   "devDependencies": {
-    "@cloudflare/vite-plugin": "^0.1.11",
+    "@cloudflare/vite-plugin": "^1.0.0",
     "@cloudflare/workers-types": "^4.20250303.0",
-    "@react-router/dev": "^7.3.0",
+    "@react-router/dev": "^7.5.0",
     "@tailwindcss/vite": "^4.0.0",
     "@types/node": "^20",
     "@types/react": "^19.0.1",
@@ -27,6 +27,6 @@
     "typescript": "^5.7.2",
     "vite": "^6.2.1",
     "vite-tsconfig-paths": "^5.1.4",
-    "wrangler": "^3.114.1"
+    "wrangler": "^4.7.2"
   }
 }

cloudflare/worker-configuration.d.ts

@@ -1,5 +1,8 @@
-// Generated by Wrangler by running `wrangler types`
-
-interface Env {
-	VALUE_FROM_CLOUDFLARE: "Hello from Cloudflare";
+// Generated by Wrangler
+// After adding bindings to `wrangler.jsonc`, regenerate this interface via `npm run cf-typegen`
+declare namespace Cloudflare {
+  interface Env {
+    VALUE_FROM_CLOUDFLARE: "Hello from Cloudflare";
+  }
 }
+interface Env extends Cloudflare.Env {}

cloudflare/workers/app.ts

@@ -1,20 +1,15 @@
 import { createRequestHandler } from "react-router";
 
-declare global {
-  interface CloudflareEnvironment extends Env {}
-}
-
 declare module "react-router" {
   export interface AppLoadContext {
     cloudflare: {
-      env: CloudflareEnvironment;
+      env: Env;
       ctx: ExecutionContext;
     };
   }
 }
 
 const requestHandler = createRequestHandler(
-  // @ts-expect-error - virtual module provided by React Router
   () => import("virtual:react-router/server-build"),
   import.meta.env.MODE
 );
@@ -25,4 +20,4 @@ export default {
       cloudflare: { env, ctx },
     });
   },
-} satisfies ExportedHandler<CloudflareEnvironment>;
+} satisfies ExportedHandler<Env>;

cloudflare/wrangler.jsonc

@@ -1,9 +1,8 @@
 {
   "$schema": "node_modules/wrangler/config-schema.json",
   "name": "react-router-app",
-  "compatibility_date": "2025-02-24",
+  "compatibility_date": "2025-04-04",
   "main": "./workers/app.ts",
-  "assets": {},
   "vars": {
     "VALUE_FROM_CLOUDFLARE": "Hello from Cloudflare"
   }