Modify to use cloudflareDevProxy and load contents of wrangler.toml (#6)

* Modify to use cloudflareDevProxy and load contents of wrangler.toml

* Fix pnpm-lock.yaml

* fix tsconfig

* Remove extra config stuff

---------

Co-authored-by: Brooks Lybrand <[email protected]>

Author: chimame

cloudflare/app/routes/home.tsx

@@ -9,7 +9,7 @@ export function meta({}: Route.MetaArgs) {
 }
 
 export function loader({ context }: Route.LoaderArgs) {
-  return { message: context.VALUE_FROM_CLOUDFLARE };
+  return { message: context.cloudflare.env.VALUE_FROM_CLOUDFLARE };
 }
 
 export default function Home({ loaderData }: Route.ComponentProps) {

cloudflare/package.json

@@ -17,7 +17,6 @@
   },
   "devDependencies": {
     "@cloudflare/workers-types": "^4.20241112.0",
-    "@hiogawa/vite-node-miniflare": "0.1.1",
     "@react-router/dev": "*",
     "@types/node": "^20",
     "@types/react": "^19.0.1",

cloudflare/tsconfig.cloudflare.json

@@ -5,7 +5,8 @@
     "app/**/*",
     "app/**/.server/**/*",
     "app/**/.client/**/*",
-    "workers/**/*"
+    "workers/**/*",
+    "worker-configuration.d.ts"
   ],
   "compilerOptions": {
     "composite": true,

cloudflare/vite.config.ts

@@ -1,5 +1,5 @@
-import { vitePluginViteNodeMiniflare } from "@hiogawa/vite-node-miniflare";
 import { reactRouter } from "@react-router/dev/vite";
+import { cloudflareDevProxy } from "@react-router/dev/vite/cloudflare";
 import autoprefixer from "autoprefixer";
 import tailwindcss from "tailwindcss";
 import { defineConfig } from "vite";
@@ -18,29 +18,10 @@ export default defineConfig(({ isSsrBuild }) => ({
       plugins: [tailwindcss, autoprefixer],
     },
   },
-  ssr: {
-    target: "webworker",
-    noExternal: true,
-    resolve: {
-      conditions: ["workerd", "browser"],
-    },
-    optimizeDeps: {
-      include: [
-        "react",
-        "react/jsx-runtime",
-        "react/jsx-dev-runtime",
-        "react-dom",
-        "react-dom/server",
-        "react-router",
-      ],
-    },
-  },
   plugins: [
-    vitePluginViteNodeMiniflare({
-      entry: "./workers/app.ts",
-      miniflareOptions: (options) => {
-        options.compatibilityDate = "2024-11-18";
-        options.compatibilityFlags = ["nodejs_compat"];
+    cloudflareDevProxy({
+      getLoadContext({ context }) {
+        return { cloudflare: context.cloudflare };
       },
     }),
     reactRouter(),

cloudflare/worker-configuration.d.ts

@@ -0,0 +1,5 @@
+// Generated by Wrangler by running `wrangler types`
+
+interface Env {
+	VALUE_FROM_CLOUDFLARE: "Hello from Cloudflare";
+}

cloudflare/workers/app.ts

@@ -1,12 +1,15 @@
 import { createRequestHandler } from "react-router";
 
 declare global {
-  interface CloudflareEnvironment {}
+  interface CloudflareEnvironment extends Env {}
 }
 
 declare module "react-router" {
   export interface AppLoadContext {
-    VALUE_FROM_CLOUDFLARE: string;
+    cloudflare: {
+      env: CloudflareEnvironment;
+      ctx: ExecutionContext;
+    };
   }
 }
 
@@ -17,9 +20,10 @@ const requestHandler = createRequestHandler(
 );
 
 export default {
-  fetch(request, env) {
+  fetch(request, env, ctx) {
+    console.log("yo");
     return requestHandler(request, {
-      VALUE_FROM_CLOUDFLARE: "Hello from Cloudflare",
+      cloudflare: { env, ctx },
     });
   },
 } satisfies ExportedHandler<CloudflareEnvironment>;

cloudflare/wrangler.toml

@@ -1,5 +1,8 @@
 workers_dev = true
-name = "my-worker"
+name = "my-react-router-worker"
 compatibility_date = "2024-11-18"
 main = "./build/server/index.js"
 assets = { directory = "./build/client/" }
+
+[vars]
+VALUE_FROM_CLOUDFLARE = "Hello from Cloudflare"