template

templates/vite-cloudflare/app/routes/_index.tsx

@@ -8,13 +8,13 @@ import { Form, useLoaderData } from "@remix-run/react";
 const key = "__my-key__";
 
 export async function loader({ context }: LoaderFunctionArgs) {
-  const { MY_KV } = context.env;
+  const { MY_KV } = context.cloudflare.env;
   const value = await MY_KV.get(key);
   return json({ value });
 }
 
 export async function action({ request, context }: ActionFunctionArgs) {
-  const { MY_KV: myKv } = context.env;
+  const { MY_KV: myKv } = context.cloudflare.env;
 
   if (request.method === "POST") {
     const formData = await request.formData();

templates/vite-cloudflare/load-context.ts

@@ -1,14 +1,12 @@
 import { type KVNamespace } from "@cloudflare/workers-types";
+import { type PlatformProxy } from "wrangler";
 
-// 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;
-};
+// TODO: generate Env via `wrangler types`
+type Env = { MY_KV: KVNamespace };
+type Cloudflare = Omit<PlatformProxy<Env>, "dispose">;
 
 declare module "@remix-run/cloudflare" {
   interface AppLoadContext {
-    env: Bindings;
+    cloudflare: Cloudflare;
   }
 }

templates/vite-cloudflare/vite.config.ts

@@ -1,21 +1,10 @@
 import {
   vitePlugin as remix,
-  cloudflarePreset as cloudflare,
+  cloudflareProxyVitePlugin as remixCloudflareProxy,
 } from "@remix-run/dev";
 import { defineConfig } from "vite";
 import tsconfigPaths from "vite-tsconfig-paths";
-import { getBindingsProxy } from "wrangler";
 
 export default defineConfig({
-  plugins: [
-    remix({
-      presets: [cloudflare(getBindingsProxy)],
-    }),
-    tsconfigPaths(),
-  ],
-  ssr: {
-    resolve: {
-      externalConditions: ["workerd", "worker"],
-    },
-  },
+  plugins: [remixCloudflareProxy(), remix(), tsconfigPaths()],
 });