template

Author: pcattori

templates/unstable-vite-cloudflare/env.d.ts

@@ -1,12 +1,2 @@
 /// <reference types="@remix-run/cloudflare" />
 /// <reference types="vite/client" />
-
-import type { KVNamespace } from "@cloudflare/workers-types";
-
-declare module "@remix-run/cloudflare" {
-  interface AppLoadContext {
-    env: {
-      MY_KV: KVNamespace;
-    };
-  }
-}

templates/unstable-vite-cloudflare/functions/[[path]].ts

@@ -4,8 +4,9 @@ import { createPagesFunctionHandler } from "@remix-run/cloudflare-pages";
 // @ts-ignore - the server build file is generated by `remix vite:build`
 // eslint-disable-next-line import/no-unresolved
 import * as build from "../build/server";
+import { getLoadContext } from "../load-context";
 
 export const onRequest = createPagesFunctionHandler({
   build,
-  getLoadContext: (context) => ({ env: context.env }),
+  getLoadContext,
 });

templates/unstable-vite-cloudflare/load-context.ts

@@ -0,0 +1,34 @@
+import type { KVNamespace } from "@cloudflare/workers-types";
+import { type AppLoadContext } from "@remix-run/cloudflare";
+
+// In the future, types for bindings will be generated by `wrangler types`
+// See https://github.com/cloudflare/workers-sdk/pull/4931
+type Bindings = {
+  // Add types for bindings configured in `wrangler.toml`
+  MY_KV: KVNamespace;
+};
+
+declare module "@remix-run/cloudflare" {
+  interface AppLoadContext {
+    env: Bindings;
+
+    extra: string; // Example of augmenting load context
+  }
+}
+
+// Subset of Cloudflare context supported by `getBindingsProxy` for use in Node-based environments like Vite
+// The Cloudflare team is working to improve their Node proxies to support:
+// - https://github.com/cloudflare/workers-sdk/issues/4875
+// - https://github.com/cloudflare/workers-sdk/issues/4876
+// - https://github.com/cloudflare/workers-sdk/issues/4879
+type Context = { request: Request; env: Bindings };
+
+// Shared implementation compatible with Vite, Wrangler, and Cloudflare Pages
+export const getLoadContext = async (
+  context: Context
+): Promise<AppLoadContext> => {
+  return {
+    ...context,
+    extra: "stuff", // Example of augmenting load context
+  };
+};

templates/unstable-vite-cloudflare/vite.config.ts

@@ -4,11 +4,18 @@ import {
 } from "@remix-run/dev";
 import { defineConfig } from "vite";
 import tsconfigPaths from "vite-tsconfig-paths";
+import { getBindingsProxy } from "wrangler";
+
+import { getLoadContext } from "./load-context";
 
 export default defineConfig({
   plugins: [
     remix({
-      presets: [cloudflare()],
+      presets: [
+        cloudflare(getBindingsProxy, {
+          getRemixDevLoadContext: getLoadContext,
+        }),
+      ],
     }),
     tsconfigPaths(),
   ],