feat(dev-server): support c.env.ASSETS for CF Pages

packages/dev-server/README.md

@@ -112,7 +112,10 @@ export type DevServerOptions = {
       Pick<
         MiniflareOptions,
         'cachePersist' | 'd1Persist' | 'durableObjectsPersist' | 'kvPersist' | 'r2Persist'
-      >
+      > & {
+        // Enable `env.ASSETS.fetch()` function for Cloudflare Pages.
+        assets?: boolean
+      }
   >
 }
 ```

packages/dev-server/src/dev-server.ts

@@ -16,7 +16,10 @@ export type DevServerOptions = {
       Pick<
         MiniflareOptions,
         'cachePersist' | 'd1Persist' | 'durableObjectsPersist' | 'kvPersist' | 'r2Persist'
-      >
+      > & {
+        // Enable `env.ASSETS.fetch()` function for Cloudflare Pages.
+        assets?: boolean
+      }
   >
 }
 
@@ -83,11 +86,27 @@ export function devServer(options?: DevServerOptions): Plugin {
           }
 
           getRequestListener(async (request) => {
-            let bindings = {}
+            let env = {}
             if (mf) {
-              bindings = await mf.getBindings()
+              env = await mf.getBindings()
+              if (options?.cf?.assets) {
+                env = {
+                  // `env.ASSETS.fetch()` function for Cloudflare Pages.
+                  ASSETS: {
+                    async fetch(input: RequestInfo | URL, init?: RequestInit | undefined) {
+                      try {
+                        return await fetch(new Request(input, init))
+                      } catch (e) {
+                        console.error('Failed to execute ASSETS.fetch: ', e)
+                        return new Response(null, { status: 500 })
+                      }
+                    },
+                  },
+                  ...env,
+                }
+              }
             }
-            const response = await app.fetch(request, bindings, {
+            const response = await app.fetch(request, env, {
               waitUntil: async (fn) => fn,
               passThroughOnException: () => {
                 throw new Error('`passThroughOnException` is not supported')

packages/dev-server/test/e2e.test.ts

@@ -64,3 +64,19 @@ test('Should return 200 response - /stream', async ({ page }) => {
   const content = await page.textContent('h1')
   expect(content).toBe('Hello Vite!')
 })
+
+test('Should serve static files in `public/static`', async ({ page }) => {
+  const response = await page.goto('/static/hello.json')
+  expect(response?.status()).toBe(200)
+
+  const data = await response?.json()
+  expect(data['message']).toBe('Hello')
+})
+
+test('Should handle `env.ASSETS.fetch` function', async ({ page }) => {
+  const response = await page.goto('/assets/hello.json')
+  expect(response?.status()).toBe(200)
+
+  const data = await response?.json()
+  expect(data['message']).toBe('Hello')
+})

packages/dev-server/test/mock/worker.ts

@@ -3,6 +3,7 @@ import { Hono } from 'hono'
 const app = new Hono<{
   Bindings: {
     NAME: string
+    ASSETS: { fetch: typeof fetch }
   }
 }>()
 
@@ -52,4 +53,10 @@ app.get('/stream', () => {
   })
 })
 
+app.get('/assets/hello.json', async (c) => {
+  const res = await c.env.ASSETS.fetch(new URL('/static/hello.json', c.req.url))
+  const data = await res.json()
+  return c.json(data)
+})
+
 export default app

packages/dev-server/test/public/static/hello.json

@@ -0,0 +1,3 @@
+{
+  "message": "Hello"
+}

packages/dev-server/test/vite.config.ts

@@ -10,6 +10,7 @@ export default defineConfig({
         bindings: {
           NAME: 'Hono',
         },
+        assets: true,
       },
     }),
   ],