@barakcodes/hono-react-adapter

[!WARNING]

This is a fork of hono-remix-adapter, hopefully temporary until react router 7 is officially adopted.

@barakcodes/hono-react-adapter is a set of tools for adapting between Hono and Remix. It is composed of a Vite plugin and handlers that enable it to support platforms like Cloudflare Workers. You can create an Hono app, and it will be applied to your Remix app.

1// server/index.ts
2import { Hono } from 'hono'
3
4const app = new Hono()
5
6app.use(async (c, next) => {
7  await next()
8  c.header('X-Powered-By', 'Remix and Hono')
9})
10
11app.get('/api', (c) => {
12  return c.json({
13    message: 'Hello',
14  })
15})
16
17export default app

This means you can create API routes with Hono's syntax and use a lot of Hono's built-in middleware and third-party middleware.

Install

1npm i @barakcodes/hono-react-adapter

How to use

Edit your vite.config.ts:

1// vite.config.ts
2import serverAdapter from '@barakcodes/hono-react-adapter/vite'
3
4export default defineConfig({
5  plugins: [
6    // ...
7    remix(),
8    serverAdapter({
9      entry: 'server/index.ts',
10    }),
11  ],
12})

Write your Hono app:

1// server/index.ts
2import { Hono } from 'hono'
3
4const app = new Hono()
5
6//...
7
8export default app

Cloudflare Workers

To support Cloudflare Workers and Cloudflare Pages, add the adapter in @hono/vite-dev-server for development.

1// vite.config.ts
2import adapter from '@hono/vite-dev-server/cloudflare'
3import serverAdapter from '@barakcodes/hono-react-adapter/vite'
4
5export default defineConfig({
6  plugins: [
7    // ...
8    remix(),
9    serverAdapter({
10      adapter, // Add Cloudflare adapter
11      entry: 'server/index.ts',
12    }),
13  ],
14})

To deploy your app to Cloudflare Workers, you can write the following handler on worker.ts:

1// worker.ts
2import handle from '@barakcodes/hono-react-adapter/cloudflare-workers'
3import * as build from './build/server'
4import app from './server'
5
6export default handle(build, app)

Specify worker.ts in your wrangler.toml:

1name = "example-cloudflare-workers"
2compatibility_date = "2024-11-06"
3main = "./worker.ts"
4assets = { directory = "./build/client" }

getLoadContext

If you want to add extra context values when you use Remix routes, like in the following use case:

1// app/routes/_index.tsx
2import type { LoaderFunctionArgs } from '@react-router/cloudflare'
3import { useLoaderData } from 'react-router'
4
5export const loader = ({ context }) => {
6  return { extra: context.extra }
7}
8
9export default function Index() {
10  const { extra } = useLoaderData<typeof loader>()
11  return <h1>Extra is {extra}</h1>
12}

First, create the getLoadContext function and export it:

1// load-context.ts
2import type { AppLoadContext } from '@react-router/cloudflare'
3import type { PlatformProxy } from 'wrangler'
4
5type Cloudflare = Omit<PlatformProxy, 'dispose'>
6
7declare module '@react-router/cloudflare' {
8  interface AppLoadContext {
9    cloudflare: Cloudflare
10    extra: string
11  }
12}
13
14type GetLoadContext = (args: {
15  request: Request
16  context: { cloudflare: Cloudflare }
17}) => AppLoadContext
18
19export const getLoadContext: GetLoadContext = ({ context }) => {
20  return {
21    ...context,
22    extra: 'stuff',
23  }
24}

Then import the getLoadContext and add it to the serverAdapter as an argument in your vite.config.ts:

1// vite.config.ts
2import adapter from '@hono/vite-dev-server/cloudflare'
3import { reactRouter } from '@react-router/dev/vite'
4import serverAdapter from '@barakcodes/hono-react-adapter/vite'
5import { defineConfig } from 'vite'
6import { getLoadContext } from './load-context'
7
8export default defineConfig({
9  plugins: [
10    // ...
11    reactRouter(),
12    serverAdapter({
13      adapter,
14      getLoadContext,
15      entry: 'server/index.ts',
16    }),
17  ],
18})

For Cloudflare Workers, you can add it to the handler function:

1// worker.ts
2import handle from '@barakcodes/hono-react-adapter/cloudflare-workers'
3import * as build from './build/server'
4import { getLoadContext } from './load-context'
5import app from './server'
6
7export default handle(build, app, { getLoadContext })

This way is almost the same as Remix.

Auth middleware for Remix routes

If you want to add Auth Middleware, e.g. Basic Auth middleware, please be careful that users can access the protected pages with SPA tradition. To prevent this, add a loader to the page:

1// app/routes/admin
2export const loader = async () => {
3  return { props: {} }
4}

Related works

• https://github.com/sergiodxa/remix-hono
• https://github.com/yusukebe/hono-and-remix-on-vite

Author

Yusuke Wada https://github.com/yusukebe

License

MIT