Resolid React-Router extension package, mainly some plug-ins to enhance React-Router and needs to be used with Vite
pnpm add -D @resolid/react-router-honopnpm add hono @hono/node-serverEdit vite.config.ts to config dev server
// vite.config.ts
import { reactRouter } from "@react-router/dev/vite";
import { reactRouterHonoServer } from "@resolid/react-router-hono/dev";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";
export default defineConfig({
plugins: [
reactRouterHonoServer({
// Entry file
entryFile: "server.node.ts", // default is server.ts
}),
reactRouter(),
tsconfigPaths(),
],
});// app/server.node.ts
import { createHonoNodeServer } from "@resolid/react-router-hono/node-server";
export default await createHonoNodeServer();// react-router.config.ts
import type { Config } from "@react-router/dev/config";
import { nodePreset } from "@resolid/react-router-hono/node-preset";
export default {
presets: [
nodePreset({
// Entry file
entryFile: "server.node.ts", // default is server.ts
nodeVersion: 22, // default is 22
}),
],
} satisfies Config;Supports the SERVER_PORT and SERVER_PATH environment variables. The SERVE_PATH environment variable is
for React Router's serverBundles feature.
After running build,
server.mjsandpackage.jsonfiles will be automatically generated in thebuild/serverdirectory. Thepackage.jsonfile defines thessr.externalset by Vite in the server directory. Runnpm installto install dependencies excluded during build
You can use https://github.com/huijiewei/react-router-hono-vercel-template to quick start deploy to vercel.
// app/server.vercel.ts
import { createHonoVercelServer } from "@resolid/react-router-hono/vercel-server";
export default await createHonoVercelServer();// react-router.config.ts
import type { Config } from "@react-router/dev/config";
import { vercelPreset } from "@resolid/react-router-hono/vercel-preset";
export default {
presets: [
vercelPreset({
// Entry file
entryFile: "server.vercel.ts", // default is server.ts
nodeVersion: 22, // default is 22
}),
],
} satisfies Config;Vercel project Framework Preset needs to be set to Vite, Node.js Version needs to be same
If you are using a monorepo structure, please set the Root Directory to the project directory that needs to be deployed, and then customize the relevant commands. The configuration of Resolid is as shown below
You can use https://github.com/huijiewei/react-router-hono-netlify-template to quick start deploy to netlify.
// app/server.netlify.ts
import { createHonoNetlifyServer } from "@resolid/react-router-hono/netlify-server";
export default await createHonoNetlifyServer();// react-router.config.ts
import type { Config } from "@react-router/dev/config";
import { netlifyPreset } from "@resolid/react-router-hono/netlify-preset";
export default {
presets: [
netlifyPreset({
// Entry file
entryFile: "server.netlify.ts", // default is server.ts
nodeVersion: 22, // default is 22
}),
],
} satisfies Config;Middleware are functions that are called before React Router calls your loader/action. See the Hono docs for more information.
You can use configure option in createHonoNodeServer or createHonoVercelServer to use Hono middleware
import { createHonoNodeServer } from "@resolid/react-router-hono/node-server";
export default await createHonoNodeServer({
configure: (server) => {
server.use(/* Hono Middleware */);
},
});If you'd like to add additional properties to the load context, you can config getLoadContext option in createHonoNodeServer or createHonoVercelServer to augmenting load context.
import { createHonoNodeServer } from "@resolid/react-router-hono/node-server";
import type { HttpBindings } from "@hono/node-server";
import type { Context } from "hono";
export default await createHonoNodeServer({
getLoadContext: (c: Context<{ Bindings: HttpBindings }>) => {
return {
remoteAddress: c.env.incoming.socket.remoteAddress,
};
},
});