@resolid/react-router-hono

简体中文

Resolid Remix extension package, mainly some plug-ins to enhance Remix and needs to be used with Vite

Feature

• Dev Server
• Node.js Serve
• Vercel Serve
• Hono Middleware
• React Router Load Context

Install

pnpm add -D @resolid/react-router-hono

Install related dependencies

pnpm add hono @hono/node-server

Dev Server

Edit 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(),
  ],
});

Node.js Serve

Create Node.js Server

// app/server.node.ts

import { createHonoNodeServer } from "@resolid/react-router-hono/node-server";

export default await createHonoNodeServer();

Config Node.js Preset in React Router Config

// 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.mjs and package.json files will be automatically generated in the build/server directory. The package.json file defines the ssr.external set by Vite in the server directory. Run npm install to install dependencies excluded during build

Vercel Serve

You can use https://github.com/huijiewei/react-router-hono-vercel-template to quick start deploy to vercel.

Create Vercel server

// app/server.vercel.ts

import { createHonoVercelServer } from "@resolid/react-router-hono/vercel-server";

export default await createHonoVercelServer();

Config Vercel Preset in React Router Config

// react-router.config.ts

import type { Config } from "@react-router/dev/config";
import { vercelPreset } from "@resolid/remix-plugins/vercel-preset";

export default {
  presets: [
    vercelPreset({
      // Deployment area
      regions: ["sin1"],
      // Some packages will introduce binary packages according to different platforms. The binary packages are not in the same directory during installation, such as @node-rs/bcrypt
      copyParentModules: ["@node-rs/bcrypt"],
      // Entry file
      entryFile: "server.node.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

Hono Middleware

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 */);
  },
});

React Router load context

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,
    };
  },
});

Acknowledgment

• @hono/vite-dev-server
• react-router-hono-server