React Router Hono Server v2

.npmrc

@@ -3,4 +3,4 @@ side-effects-cache=false
 save-exact=true
 audit=false
 fund=false
-progress=false
+progress=false

app/entry.server.tsx

@@ -1,17 +1,14 @@
 import { PassThrough } from "node:stream"
 import { createReadableStreamFromReadable } from "@react-router/node"
-import type { Context } from "hono"
 import { createInstance } from "i18next"
 import { isbot } from "isbot"
 import { renderToPipeableStream } from "react-dom/server"
 import { I18nextProvider, initReactI18next } from "react-i18next"
 import { type AppLoadContext, type EntryContext, ServerRouter } from "react-router"
-import { createHonoServer } from "react-router-hono-server/node"
-import { i18next } from "remix-hono/i18next"
-import { getClientEnv, initEnv } from "./env.server"
 import i18n from "./localization/i18n" // your i18n configuration file
 import i18nextOpts from "./localization/i18n.server"
 import { resources } from "./localization/resource"
+
 const ABORT_DELAY = 5000
 
 export default async function handleRequest(
@@ -73,41 +70,3 @@ export default async function handleRequest(
 		setTimeout(abort, ABORT_DELAY)
 	})
 }
-
-// Code below used to initialize our own Hono server!
-// Setup the .env vars
-const env = initEnv()
-
-const getLoadContext = async (c: Context) => {
-	// get the locale from the context
-	const locale = i18next.getLocale(c)
-	// get t function for the default namespace
-	const t = await i18next.getFixedT(c)
-
-	const clientEnv = getClientEnv()
-	return {
-		lang: locale,
-		t,
-		env,
-		clientEnv,
-		// We do not add this to AppLoadContext type because it's not needed in the loaders, but it's used above to handle requests
-		body: c.body,
-	}
-}
-
-interface LoadContext extends Awaited<ReturnType<typeof getLoadContext>> {}
-
-/**
- * Declare our loaders and actions context type
- */
-declare module "react-router" {
-	interface AppLoadContext extends Omit<LoadContext, "body"> {}
-}
-
-export const server = await createHonoServer({
-	configure(server) {
-		server.use("*", i18next(i18nextOpts))
-	},
-	defaultLogger: false,
-	getLoadContext,
-})

app/routes/resource.locales.ts

@@ -1,5 +1,4 @@
 import { cacheHeader } from "pretty-cache-header"
-import { data } from "react-router"
 import { z } from "zod"
 import { resources } from "~/localization/resource"
 import type { Route } from "./+types/resource.locales"
@@ -37,5 +36,5 @@ export async function loader({ request, context }: Route.LoaderArgs) {
 		)
 	}
 
-	return data(namespaces[ns], { headers })
+	return Response.json(namespaces[ns], { headers })
 }

app/server/context.ts

@@ -0,0 +1,32 @@
+import type { Context } from "hono"
+import { i18next } from "remix-hono/i18next"
+import { getClientEnv, initEnv } from "~/env.server"
+
+// Setup the .env vars
+const env = initEnv()
+
+export const getLoadContext = async (c: Context) => {
+	// get the locale from the context
+	const locale = i18next.getLocale(c)
+	// get t function for the default namespace
+	const t = await i18next.getFixedT(c)
+
+	const clientEnv = getClientEnv()
+	return {
+		lang: locale,
+		t,
+		env,
+		clientEnv,
+		// We do not add this to AppLoadContext type because it's not needed in the loaders, but it's used above to handle requests
+		body: c.body,
+	}
+}
+
+interface LoadContext extends Awaited<ReturnType<typeof getLoadContext>> {}
+
+/**
+ * Declare our loaders and actions context type
+ */
+declare module "react-router" {
+	interface AppLoadContext extends Omit<LoadContext, "body"> {}
+}

app/server/index.ts

@@ -0,0 +1,12 @@
+import { createHonoServer } from "react-router-hono-server/node"
+import { i18next } from "remix-hono/i18next"
+import i18nextOpts from "../localization/i18n.server"
+import { getLoadContext } from "./context"
+
+export default await createHonoServer({
+	configure(server) {
+		server.use("*", i18next(i18nextOpts))
+	},
+	defaultLogger: false,
+	getLoadContext,
+})

knip.json

@@ -1,7 +1,18 @@
 {
 	"$schema": "https://unpkg.com/knip@5/schema.json",
-	"entry": ["scripts/*.{ts,js}", "app/routes.ts","vite.config.ts"],
+	"entry": [
+		"scripts/*.{ts,js}",
+		"app/routes.ts",
+		"vite.config.ts",
+		"app/server/*.ts"
+	],
 	"remix": true,
-	"project": ["**/*.{js,cjs,mjs,jsx,ts,cts,mts,tsx}", "vite.config.ts"],
-	"ignore": ["app/library/icon/icons/types.ts"]
-}
+	"lefthook": true,
+	"project": [
+		"**/*.{js,cjs,mjs,jsx,ts,cts,mts,tsx}",
+		"vite.config.ts"
+	],
+	"ignore": [
+		"app/library/icon/icons/types.ts"
+	]
+}

package.json

@@ -11,7 +11,7 @@
 		"clean": "git clean -fdX --exclude=\"!.env\"",
 		"script": "tsx scripts/setup.ts",
 		"cleanup": "pnpm run script scripts/cleanup.ts",
-		"build": "NODE_ENV=production react-router build",
+		"build": "react-router build",
 		"dev": "react-router dev",
 		"start": "NODE_ENV=production node ./build/server/index.js",
 		"test": "vitest run",
@@ -30,7 +30,7 @@
 		"@forge42/seo-tools": "1.3.0",
 		"@react-router/node": "7.0.1",
 		"clsx": "2.1.1",
-		"hono": "4.6.11",
+		"hono": "4.6.12",
 		"i18next": "23.15.2",
 		"i18next-browser-languagedetector": "8.0.0",
 		"i18next-fetch-backend": "6.0.0",
@@ -40,7 +40,7 @@
 		"react-dom": "18.3.1",
 		"react-i18next": "15.1.1",
 		"react-router": "7.0.1",
-		"react-router-hono-server": "https://pkg.pr.new/rphlmr/[email protected]",
+		"react-router-hono-server": "2.0.0",
 		"remix-hono": "0.0.16",
 		"remix-i18next": "7.0.0",
 		"tailwind-merge": "2.5.4",