refactor(web): upgrade cloudflare build config

Author: kyranjamie

apps/mobile/package.json

@@ -146,7 +146,7 @@
     "readable-stream": "4.5.2",
     "redux-persist": "6.0.0",
     "uuid": "10.0.0",
-    "zod": "3.24.1"
+    "zod": "3.24.2"
   },
   "devDependencies": {
     "@babel/core": "7.24.6",
@@ -162,7 +162,7 @@
     "@types/jest": "29.5.12",
     "@types/lodash.groupby": "4.6.9",
     "@types/lodash.merge": "4.6.9",
-    "@types/node": "22.13.5",
+    "@types/node": "22.13.13",
     "@types/react": "18.2.79",
     "@types/react-dom": "18.2.25",
     "babel-jest": "29.7.0",

apps/web/.gitignore

@@ -1,5 +1,6 @@
 .DS_Store
 /node_modules/
+*.tsbuildinfo
 
 # React Router
 /.react-router/

apps/web/app/routes/earn.tsx

@@ -18,5 +18,5 @@ export function meta({}: Route.MetaArgs) {
 }
 
 export default function HomeRoute() {
-  return <Earn content={''} />;
+  return <Earn />;
 }

apps/web/package.json

@@ -10,7 +10,7 @@
     "start": "react-router-serve ./build/server/index.js",
     "test:coverage": "vitest run --coverage",
     "test:unit": "vitest run",
-    "typecheck": "react-router typegen && tsc"
+    "typecheck": "wrangler types && react-router typegen && tsc -b"
   },
   "dependencies": {
     "@leather.io/models": "workspace:*",
@@ -36,25 +36,26 @@
     "react-hook-form": "7.53.2",
     "react-router": "7.4.0",
     "safe-buffer": "5.2.1",
-    "zod": "3.24.1"
+    "zod": "3.24.2"
   },
   "devDependencies": {
+    "@cloudflare/vite-plugin": "0.1.15",
     "@cloudflare/workers-types": "4.20250303.0",
     "@originjs/vite-plugin-commonjs": "1.0.3",
     "@pandacss/dev": "0.53.1",
     "@playwright/test": "1.51.0",
     "@react-router/cloudflare": "7.4.0",
     "@react-router/dev": "7.4.0",
-    "@types/node": "22.13.5",
+    "@types/node": "22.13.13",
     "@types/nprogress": "0.2.3",
-    "@types/react": "19.0.10",
+    "@types/react": "19.0.12",
     "@types/react-dom": "19.0.4",
     "react-router-devtools": "1.1.6",
     "typescript": "5.7.3",
-    "vite": "6.2.0",
+    "vite": "6.2.3",
     "vite-plugin-svgr": "4.3.0",
     "vite-tsconfig-paths": "5.1.4",
     "vitest": "2.1.9",
-    "wrangler": "3.114.0"
+    "wrangler": "3.114.1"
   }
 }

apps/web/public/favicon.ico

@@ -4,4 +4,7 @@ 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;

apps/web/react-router.config.ts

@@ -6,8 +6,7 @@
     "app/**/.server/**/*",
     "app/**/.client/**/*",
     "workers/**/*",
-    "worker-configuration.d.ts",
-    "./leather-styles/**/*"
+    "worker-configuration.d.ts"
   ],
   "compilerOptions": {
     "composite": true,
@@ -22,7 +21,8 @@
     "rootDirs": [".", "./.react-router/types"],
     "paths": {
       "~/*": ["./app/*"],
-      "react": ["./node_modules/@types/react"]
+      "react": ["./node_modules/@types/react"],
+      "leather-styles/*": ["./leather-styles/*"]
     },
     "esModuleInterop": true,
     "resolveJsonModule": true

apps/web/tsconfig.cloudflare.json

@@ -1,22 +1,13 @@
+import { cloudflare } from '@cloudflare/vite-plugin';
 import { viteCommonjs } from '@originjs/vite-plugin-commonjs';
 import pandacss from '@pandacss/dev/postcss';
 import { reactRouter } from '@react-router/dev/vite';
-import { cloudflareDevProxy } from '@react-router/dev/vite/cloudflare';
 import path from 'node:path';
 import { defineConfig } from 'vite';
 import svgr from 'vite-plugin-svgr';
 import tsconfigPaths from 'vite-tsconfig-paths';
 
-export default defineConfig(({ isSsrBuild }) => ({
-  build: {
-    rollupOptions: {
-      ...(isSsrBuild
-        ? {
-            input: './workers/app.ts',
-          }
-        : undefined),
-    },
-  },
+export default defineConfig({
   css: {
     postcss: {
       // Type error with Panda plugin
@@ -29,14 +20,10 @@ export default defineConfig(({ isSsrBuild }) => ({
     },
   },
   plugins: [
+    cloudflare({ viteEnvironment: { name: 'ssr' } }),
     svgr({ include: '**/*.svg' }),
-    cloudflareDevProxy({
-      getLoadContext({ context }) {
-        return { cloudflare: context.cloudflare };
-      },
-    }),
     viteCommonjs(),
     reactRouter(),
     tsconfigPaths(),
   ],
-}));
+});

apps/web/vite.config.ts

@@ -14,7 +14,6 @@ declare module 'react-router' {
 }
 
 const requestHandler = createRequestHandler(
-  // @ts-expect-error - virtual module provided by React Router at build time
   () => import('virtual:react-router/server-build'),
   import.meta.env.MODE
 );

apps/web/workers/app.ts

@@ -0,0 +1,15 @@
+{
+  "$schema": "node_modules/wrangler/config-schema.json",
+  "name": "leather-web",
+  "compatibility_date": "2025-02-24",
+  "main": "./workers/app.ts",
+  "workers_dev": true,
+  "assets": {},
+  "send_metrics": false,
+  "observability": {
+    "enabled": false
+  },
+  "vars": {
+    "VALUE_FROM_CLOUDFLARE": "Hello from Cloudflare"
+  }
+}