Migrate Cloudflare template to official Vite plugin (#95)

Author: markdalgleish

cloudflare/.gitignore

@@ -9,3 +9,5 @@
 # Cloudflare
 .mf
 .wrangler
+.dev.vars*
+

cloudflare/package.json

@@ -9,22 +9,21 @@
     "typecheck": "wrangler types && react-router typegen && tsc -b"
   },
   "dependencies": {
-    "@react-router/node": "*",
-    "@react-router/serve": "*",
     "isbot": "^5.1.17",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-router": "*"
+    "react-router": "^7.3.0"
   },
   "devDependencies": {
-    "@react-router/dev": "*",
+    "@cloudflare/vite-plugin": "^0.1.11",
+    "@react-router/dev": "^7.3.0",
     "@tailwindcss/vite": "^4.0.0",
     "@types/node": "^20",
     "@types/react": "^19.0.1",
     "@types/react-dom": "^19.0.1",
     "tailwindcss": "^4.0.0",
     "typescript": "^5.7.2",
-    "vite": "^5.4.11",
+    "vite": "^6.2.1",
     "vite-tsconfig-paths": "^5.1.4",
     "wrangler": "^4.0.0"
   }

cloudflare/react-router.config.ts

@@ -1,7 +1,8 @@
 import type { Config } from "@react-router/dev/config";
 
 export default {
-  // Config options...
-  // Server-side render by default, to enable SPA mode set this to `false`
   ssr: true,
+  future: {
+    unstable_viteEnvironmentApi: true,
+  },
 } satisfies Config;

cloudflare/vite.config.ts

@@ -1,25 +1,14 @@
 import { reactRouter } from "@react-router/dev/vite";
-import { cloudflareDevProxy } from "@react-router/dev/vite/cloudflare";
+import { cloudflare } from "@cloudflare/vite-plugin";
 import tailwindcss from "@tailwindcss/vite";
 import { defineConfig } from "vite";
 import tsconfigPaths from "vite-tsconfig-paths";
 
-export default defineConfig(({ isSsrBuild }) => ({
-  build: {
-    rollupOptions: isSsrBuild
-      ? {
-          input: "./workers/app.ts",
-        }
-      : undefined,
-  },
+export default defineConfig({
   plugins: [
-    cloudflareDevProxy({
-      getLoadContext({ context }) {
-        return { cloudflare: context.cloudflare };
-      },
-    }),
+    cloudflare({ viteEnvironment: { name: "ssr" } }),
     tailwindcss(),
     reactRouter(),
     tsconfigPaths(),
   ],
-}));
+});

cloudflare/workers/app.ts

@@ -14,13 +14,13 @@ declare module "react-router" {
 }
 
 const requestHandler = createRequestHandler(
-  // @ts-expect-error - virtual module provided by React Router at build time
+  // @ts-expect-error - virtual module provided by React Router
   () => import("virtual:react-router/server-build"),
   import.meta.env.MODE
 );
 
 export default {
-  fetch(request, env, ctx) {
+  async fetch(request, env, ctx) {
     return requestHandler(request, {
       cloudflare: { env, ctx },
     });

cloudflare/wrangler.jsonc

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