Waku Cloudflare Pages Dev Server Middleware

waku.cloudflare-dev-server.ts

import type { GetPlatformProxyOptions } from "wrangler"
import type { Middleware } from "waku/config"

type Handler = ReturnType<Middleware>

export const cloudflareDevServer = (cfOptions: GetPlatformProxyOptions) => {
  const middleware: Middleware = (options) => {
    if (import.meta.env && import.meta.env.MODE === "production") {
      // pass through
      return (_ctx, next) => next()
    }

    const wsAssign = import("miniflare").then(({ WebSocketPair }) => {
      Object.assign(globalThis, { WebSocketPair })
    })

    let env: Record<string, unknown> = options.env || {}
    const proxy = import("wrangler").then(({ getPlatformProxy }) =>
      getPlatformProxy({
        ...cfOptions,
      }).then((proxy) => {
        env = { ...env, ...proxy.env }
        return proxy
      }),
    )

    return async (ctx, next) => {
      await wsAssign
      const awaitedProxy = await proxy
      Object.assign(ctx.req, { cf: awaitedProxy.cf })
      Object.assign(globalThis, {
        caches: awaitedProxy.caches,
        __WAKU_PRIVATE_ENV__: { ...env, executionContext: awaitedProxy.ctx },
      })
      await next()
    }
  }
  return { default: middleware }
}

export default cloudflareDevServer

waku.config.ts

/** @type {import('waku/config').Config} */
export default {
  middleware: () => {
    return [
      ...(import.meta.env && import.meta.env.MODE !== "production"
        ? [
            import("./waku.cloudflare-dev-server").then(({ cloudflareDevServer }) => {
              return cloudflareDevServer({
                // Optional config settings for the Cloudflare dev server (wrangler proxy)
                // https://developers.cloudflare.com/workers/wrangler/api/#parameters-1
                persist: {
                  path: ".wrangler/state/v3",
                },
              })
            }),
          ]
        : []),
      import("waku/middleware/dev-server"),
      import("waku/middleware/headers"),
      import("waku/middleware/ssr"),
      import("waku/middleware/rsc"),
    ]
  },
}