Vite 6 + Hono sub app + fixes

[rphlmr]

Fixes #49 #44 #47

• Add Vite 6 as a peer dependency (keeping Vite 5 too).
• Fix build loader for cloudflare
• Fix missing AppLoadContext in dev (dev server issue)
• Add support for React Router basename
• Handle React Router app as a Hono sub app
• [Cloudflare]: setting experimental_serve_directly in wrangler config will now use your Hono server to serve assets
• Remove deprecated honoOptions in favor of app option (createHonoServer)
• Temporary handle React Router issue ([Bug]: RR7 - With basename configured, .data requests against root index not correctly routed remix-run/react-router#12295)

Basename and Hono sub apps

Note

By default, the React Router app is mounted at / (default basename value).

You may not need to use this option. It's for advanced use cases.

Tip

Check this example to see how to use it.

You can use the basename option in your React Router config (react-router.config.ts) to mount your React Router app on a subpath.

It will automatically mount the app on the subpath.

// react-router.config.ts
import type { Config } from "@react-router/dev/config";

export default {
  basename: "/app", // Now the React Router app will be mounted on /app
} satisfies Config;

Then, you can use the app option in createHonoServer to pass your "root" Hono app. This will be used to mount the React Router app on the basename path.

import { Hono } from "hono";
import { createHonoServer } from "react-router-hono-server/node";
import { API_BASENAME, api } from "./api";
import { getLoadContext } from "./context";

// Create a root Hono app
const app = new Hono();

// Mount the API app at /api
app.route(API_BASENAME, api);

export default await createHonoServer({
  // Pass the root Hono app to the server.
  // It will be used to mount the React Router app on the `basename` defined in react-router.config.ts
  app,
  getLoadContext,
});

Note

You now have two entry points!

• /api - for your API
• /app - for your React Router app

Cloudflare custom assets serving

You can set Cloudflare experimental_serve_directly and delegate assets serving to Hono, like for Node and Bun.

Tip

Check https://developers.cloudflare.com/workers/static-assets/binding/#experimental_serve_directly

Tip

Check this example to see how to use it.

[assets]
directory = "./build/client/"
binding = "ASSETS"
experimental_serve_directly = false

[pkg-pr-new]

Open in Stackblitz

npm i https://pkg.pr.new/rphlmr/react-router-hono-server@50

commit: e8bc65a

[abn5x]

Hello, seems like this fixes the build process, but now all the cache-control max-age is set to 0, in the previous version it was set to 3600

[rphlmr]

@abn5x Wow thanks! I think my new dev server regex is too broad and make assets rendered by the vite http server.
Fixing this thanks!

[rphlmr]

Looks like ok in prod. Do you have a screenshot?
Depending on what you use (npm, pnpm), there is sometime a cache issue with pkg.pr.new

[rphlmr]

Oh you may mean Cloudflare? Ok that's really strange, I can reproduce only for it (but It was 0 before too, something to configure in wrangler?)

[rphlmr]

Cloudflare:

You can now set (wrangler) experimental_serve_directly to false and use your Hono server to serve assets and public files. It has the same cache maxAge as Bun and Node.