Skip to content

v2.6.4

Compare
Choose a tag to compare
@rphlmr rphlmr released this 05 Jan 12:02
· 5 commits to main since this release
21a930c

What's Changed

Full Changelog: v2.5.0...v2.6.0

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 (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 this example to see how to use it.

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