templates(cloudflare-workers): use static assets (#10034)

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

templates/cloudflare-workers/load-context.ts

@@ -1,13 +1,22 @@
 import { type PlatformProxy } from "wrangler";
 
-// PlatformProxy’s caches property is incompatible with the caches global
-// https://github.com/cloudflare/workers-sdk/blob/main/packages/wrangler/src/api/integrations/platform/caches.ts
-type Cloudflare = Omit<PlatformProxy<Env>, "dispose" | "caches"> & {
-  caches: CacheStorage;
-};
+type GetLoadContextArgs = {
+  request: Request;
+  context: {
+    cloudflare: Omit<PlatformProxy<Env>, "dispose" | "caches" | "cf"> & {
+      caches: PlatformProxy<Env>['caches'] | CacheStorage;
+      cf: Request['cf'];
+    };
+  };
+}
 
 declare module "@remix-run/cloudflare" {
-  interface AppLoadContext {
-    cloudflare: Cloudflare;
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  interface AppLoadContext extends ReturnType<typeof getLoadContext> {
+    // This will merge the result of `getLoadContext` into the `AppLoadContext`
   }
 }
+
+export function getLoadContext({ context }: GetLoadContextArgs) {
+  return context;
+}

templates/cloudflare-workers/package.json

@@ -12,7 +12,6 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@cloudflare/kv-asset-handler": "^0.3.2",
     "@remix-run/cloudflare": "*",
     "@remix-run/react": "*",
     "@remix-run/server-runtime": "*",
@@ -21,7 +20,7 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@cloudflare/workers-types": "^4.20240512.0",
+    "@cloudflare/workers-types": "^4.20241022.0",
     "@remix-run/dev": "*",
     "@types/react": "^18.2.20",
     "@types/react-dom": "^18.2.7",
@@ -39,7 +38,7 @@
     "typescript": "^5.1.6",
     "vite": "^5.1.0",
     "vite-tsconfig-paths": "^4.2.1",
-    "wrangler": "3.57.1"
+    "wrangler": "3.84.0"
   },
   "engines": {
     "node": ">=20.0.0"

templates/cloudflare-workers/server.ts

@@ -1,56 +1,37 @@
-import { getAssetFromKV } from "@cloudflare/kv-asset-handler";
 import { createRequestHandler, type ServerBuild } from "@remix-run/cloudflare";
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore This file won’t exist if it hasn’t yet been built
 import * as build from "./build/server"; // eslint-disable-line import/no-unresolved
-// eslint-disable-next-line import/no-unresolved
-import __STATIC_CONTENT_MANIFEST from "__STATIC_CONTENT_MANIFEST";
+import { getLoadContext } from "./load-context";
 
-const MANIFEST = JSON.parse(__STATIC_CONTENT_MANIFEST);
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const handleRemixRequest = createRequestHandler(build as any as ServerBuild);
 
 export default {
   async fetch(request, env, ctx) {
-    const waitUntil = ctx.waitUntil.bind(ctx);
-    const passThroughOnException = ctx.passThroughOnException.bind(ctx);
     try {
-      const url = new URL(request.url);
-      const ttl = url.pathname.startsWith("/assets/")
-        ? 60 * 60 * 24 * 365 // 1 year
-        : 60 * 5; // 5 minutes
-      return await getAssetFromKV(
-        { request, waitUntil },
-        {
-          ASSET_NAMESPACE: env.__STATIC_CONTENT,
-          ASSET_MANIFEST: MANIFEST,
-          cacheControl: {
-            browserTTL: ttl,
-            edgeTTL: ttl,
+      const loadContext = getLoadContext({
+        request,
+        context: {
+          cloudflare: {
+            // This object matches the return value from Wrangler's
+            // `getPlatformProxy` used during development via Remix's
+            // `cloudflareDevProxyVitePlugin`:
+            // https://developers.cloudflare.com/workers/wrangler/api/#getplatformproxy
+            cf: request.cf,
+            ctx: {
+              waitUntil: ctx.waitUntil.bind(ctx),
+              passThroughOnException: ctx.passThroughOnException.bind(ctx),
+            },
+            caches,
+            env,
           },
         }
-      );
-    } catch (error) {
-      // No-op
-    }
-
-    try {
-      const loadContext = {
-        cloudflare: {
-          // This object matches the return value from Wrangler's
-          // `getPlatformProxy` used during development via Remix's
-          // `cloudflareDevProxyVitePlugin`:
-          // https://developers.cloudflare.com/workers/wrangler/api/#getplatformproxy
-          cf: request.cf,
-          ctx: { waitUntil, passThroughOnException },
-          caches,
-          env,
-        },
-      };
+      });
       return await handleRemixRequest(request, loadContext);
     } catch (error) {
       console.log(error);
       return new Response("An unexpected error occurred", { status: 500 });
     }
   },
-} satisfies ExportedHandler<Env & { __STATIC_CONTENT: KVNamespace<string> }>;
+} satisfies ExportedHandler<Env>;

templates/cloudflare-workers/vite.config.ts

@@ -4,6 +4,7 @@ import {
   cloudflareDevProxyVitePlugin,
 } from "@remix-run/dev";
 import tsconfigPaths from "vite-tsconfig-paths";
+import { getLoadContext } from "./load-context";
 
 declare module "@remix-run/cloudflare" {
   interface Future {
@@ -13,7 +14,9 @@ declare module "@remix-run/cloudflare" {
 
 export default defineConfig({
   plugins: [
-    cloudflareDevProxyVitePlugin(),
+    cloudflareDevProxyVitePlugin({
+      getLoadContext,
+    }),
     remix({
       future: {
         v3_fetcherPersist: true,

templates/cloudflare-workers/wrangler.toml

@@ -1,12 +1,14 @@
+#:schema node_modules/wrangler/config-schema.json
 name = "remix-cloudflare-workers-template"
 
 main = "./server.ts"
 workers_dev = true
 # https://developers.cloudflare.com/workers/platform/compatibility-dates
-compatibility_date = "2023-04-20"
+compatibility_date = "2024-09-26"
 
-[site]
-bucket = "./build/client"
+[assets]
+# https://developers.cloudflare.com/workers/static-assets/binding/
+directory = "./build/client"
 
 [build]
 command = "npm run build"