How to setup Hono with Remix/Cloudflare for Vite dev server?

[predaytor]

From the documentation for Cloudflare Pages, there is an adapter and a plugin, but it is not clear how we can configure both Hono and Remix to run on the Vite dev server.

import devServer from '@hono/vite-dev-server'
import adapter from '@hono/vite-dev-server/cloudflare'
import build from '@hono/vite-cloudflare-pages'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    devServer({
      entry: 'src/index.tsx',
      adapter, // Cloudflare Adapter
    }),
    build(),
  ],
})

Currently, to run Remix with Cloudflare bindings locally, we rely on the cloudflareDevProxyVitePlugin plugin, which allows us to emulate getLoadContext in dev mode, but we can't seem to integrate Hono entrypoint here:

/server/index.ts:

import { logDevReady } from '@remix-run/cloudflare';
import { createPagesFunctionHandler } from '@remix-run/cloudflare-pages';
import { Hono } from 'hono';
import type { EventContext } from 'hono/cloudflare-pages';
import { csrf } from 'hono/csrf';
import { logger } from 'hono/logger';
import { prettyJSON } from 'hono/pretty-json';
import { secureHeaders } from 'hono/secure-headers';
import { staticAssets } from 'remix-hono/cloudflare';
import { trailingSlash } from 'remix-hono/trailing-slash';

import * as build from '../build/server';
import { getLoadContext } from './load-context';

if (process.env.NODE_ENV === 'development') logDevReady(build);

export type ContextEnv = { Bindings: Required<Env> & { eventContext: EventContext } };

const app = new Hono<ContextEnv>({ strict: true });

app.use(csrf());
app.use(logger());
app.use(prettyJSON({ space: 4 }));
app.use(secureHeaders());
app.use(trailingSlash());
app.use(staticAssets({ cache: { public: true, maxAge: '1y', immutable: true } }));

app.use(async c => await createPagesFunctionHandler({ build, getLoadContext })(c.env.eventContext));

export default app;

/functions/[[path]].ts:

import { handle } from 'hono/cloudflare-pages';

import server from '../server/index';

export const onRequest = handle(server);

vite.config.ts:

import {
  vitePlugin as remix,
  cloudflareDevProxyVitePlugin as remixCloudflareDevProxy,
} from "@remix-run/dev";
import { defineConfig } from "vite";
import { getLoadContext } from './server/load-context';

export default defineConfig({
  plugins: [remixCloudflareDevProxy({ getLoadContext }), remix()],
});

/server/load-context.ts:

import { type PlatformProxy } from 'wrangler';

// When using `wrangler.toml` to configure bindings,
// `wrangler types` will generate types for those bindings
// into the global `Env` interface.

type Cloudflare = Omit<PlatformProxy<Env>, 'dispose'>;

export type GetLoadContextArgs = { request: Request; context: { cloudflare: Cloudflare } };

export function getLoadContext({ context }: GetLoadContextArgs) {
	// ... db, auth stuff etc.

	return {
		...context,
	};
}

declare module '@remix-run/cloudflare' {
	interface AppLoadContext extends ReturnType<typeof getLoadContext> {}
}

[predaytor]

solved