Releases: rphlmr/react-router-hono-server
v2.3.0
What's Changed
Pre-rendering
You should be able to use pre-rendering with this package.
Tip
Check this example to see how to use it.
Important
You need to add the serverBuildFile option to your react-router.config.ts file.
The file path is fixed to assets/server-build.js.
Add the prerender option to your react-router.config.ts
import type { Config } from "@react-router/dev/config";
export default {
serverBuildFile: "assets/server-build.js", // 🚨 Dont forget this
prerender: ["/"],
} satisfies Config;Full Changelog: v2.2.1...v2.3.0
Contributors
Assets 2
v2.2.1
v2.2.0
What's Changed
You can now enable WebSocket with the useWebSocket option.
It works for node and bun. Cloudflare requires a custom implementation.
Take a look at all the examples.
import type { WSContext } from "hono/ws";
import { createHonoServer } from "react-router-hono-server/node";
// Store connected clients
const clients = new Set<WSContext>();
export default await createHonoServer({
useWebSocket: true,
// 👆 Unlock this 👇 from @hono/node-ws
configure: (app, { upgradeWebSocket }) => {
app.get(
"/ws",
upgradeWebSocket((c) => ({
// https://hono.dev/helpers/websocket
onOpen(_, ws) {
console.log("New connection ⬆️");
clients.add(ws);
},
onMessage(event, ws) {
console.log("Context", c.req.header("Cookie"));
console.log("Event", event);
console.log(`Message from client: ${event.data}`);
// Broadcast to all clients except sender
clients.forEach((client) => {
if (client.readyState === 1) {
client.send(`${event.data}`);
}
});
},
onClose(_, ws) {
console.log("Connection closed");
clients.delete(ws);
},
}))
);
},
});Full Changelog: v2.1.2...v2.2.0
Contributors
Assets 2
v2.1.2
What's Changed
Breaking change for Cloudflare
You need to install these packages too:
npm install -D miniflare wrangler2.1.0
Bun
Tip
Check this example to see how to use it.
// vite.config.ts
import { reactRouter } from "@react-router/dev/vite";
import { reactRouterHonoServer } from "react-router-hono-server/dev"; // add this
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";
export default defineConfig({
plugins: [
reactRouterHonoServer({ runtime: "bun"} ), // add this
reactRouter(),
tsconfigPaths()
],
});Cloudflare Workers
Tip
Check this example to see how to use it.
Important
You need to add the cloudflareDevProxy plugin to use the Cloudflare Workers runtime on dev.
// vite.config.ts
import { reactRouter } from "@react-router/dev/vite";
import { cloudflareDevProxy } from "@react-router/dev/vite/cloudflare"; // add this
import { reactRouterHonoServer } from "react-router-hono-server/dev"; // add this
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";
export default defineConfig({
plugins: [
cloudflareDevProxy(),
reactRouterHonoServer({ runtime: "cloudflare"} ), // add this
reactRouter(),
tsconfigPaths()
],
});Full Changelog: v2.1.0...v2.1.2
Contributors
Assets 2
v2.1.0
What's Changed
Bun
Tip
Check this example to see how to use it.
// vite.config.ts
import { reactRouter } from "@react-router/dev/vite";
import { reactRouterHonoServer } from "react-router-hono-server/dev"; // add this
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";
export default defineConfig({
plugins: [
reactRouterHonoServer({ runtime: "bun"} ), // add this
reactRouter(),
tsconfigPaths()
],
});Cloudflare Workers
Tip
Check this example to see how to use it.
Important
You need to add the cloudflareDevProxy plugin to use the Cloudflare Workers runtime on dev.
// vite.config.ts
import { reactRouter } from "@react-router/dev/vite";
import { cloudflareDevProxy } from "@react-router/dev/vite/cloudflare"; // add this
import { reactRouterHonoServer } from "react-router-hono-server/dev"; // add this
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";
export default defineConfig({
plugins: [
cloudflareDevProxy(),
reactRouterHonoServer({ runtime: "cloudflare"} ), // add this
reactRouter(),
tsconfigPaths()
],
});Full Changelog: v2.0.0...v2.1.0
Contributors
Assets 2
v2.0.0
What's Changed
- Support for react-router v7 by @AlemTuzlak in #10
- V2 - React Router v7 by @rphlmr in #18
Important
This new version is only compatible with React Router v7
You can still use the v1 with @remix-run. Previous docs
Migration guide from v1 here
It's now a Vite Plugin 🥳
Install the following npm package.
npm install react-router-hono-server@latestEasy mode
In your vite.config.ts, add the reactRouterHonoServer plugin.
import { reactRouter } from "@react-router/dev/vite";
import { reactRouterHonoServer } from "react-router-hono-server/dev"; // add this
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";
export default defineConfig({
plugins: [
reactRouterHonoServer(), // add this
reactRouter(),
tsconfigPaths()
],
});That's all!
How it works
This helper works differently depending on the environment.
In development, it uses @hono/vite-dev-server and loads your server and React Router app with import('virtual:react-router/server-build').
It can be configured in vite.config.ts.
When building for production, the Hono server is compiled as build/server/index.js and imports your React Router app from assets/server-build-[hash].js.
New Contributors
- @AlemTuzlak made their first contribution in #10
Full Changelog: v1.2.0...v2.0.0
