Hono Server added to the project + seo

Author: AlemTuzlak

.vscode/settings.json

@@ -1,5 +1,4 @@
 {
-	"editor.defaultFormatter": "biomejs.biome",
 	"editor.formatOnSave": true,
 	"editor.formatOnType": false,
 	"editor.renderWhitespace": "all",
@@ -25,10 +24,10 @@
 	"[yaml]": {
 		"editor.defaultFormatter": "redhat.vscode-yaml"
 	},
-	"[typescriptreact]": {
+	"biome.enabled": true,
+	"editor.defaultFormatter": "biomejs.biome",
+	"[javascript][typescript][typescriptreact][javascriptreact][json][jsonc][vue][astro][svelte][css][graphql]": {
 		"editor.defaultFormatter": "biomejs.biome"
 	},
-	"[typescript]": {
-		"editor.defaultFormatter": "biomejs.biome"
-	}
+
 }

app/entry.server.tsx

@@ -1,29 +1,33 @@
-import { resolve } from "node:path"
+
 import { PassThrough } from "node:stream"
-import type { EntryContext } from "@remix-run/node"
+import type { AppLoadContext, EntryContext } from "@remix-run/node"
 import { RemixServer } from "@remix-run/react"
-import { Response } from "@remix-run/web-fetch"
+import type { Context } from "hono"
 import { createInstance } from "i18next"
 import Backend from "i18next-fs-backend"
 import { isbot } from "isbot"
 import { renderToPipeableStream } from "react-dom/server"
 import { I18nextProvider, initReactI18next } from "react-i18next"
+import { createHonoServer } from "react-router-hono-server/node"
+import { i18next } from "remix-hono/i18next"
 import i18n from "./localization/i18n" // your i18n configuration file
-import i18next, { returnLanguageFromRequest } from "./localization/i18n.server"
+import i18nextOpts from "./localization/i18n.server"
 import { resources } from "./localization/resource"
+import { getClientEnv, initEnv } from "./server/env.server"
 
 const ABORT_DELAY = 5000
 
 export default async function handleRequest(
 	request: Request,
 	responseStatusCode: number,
 	responseHeaders: Headers,
-	remixContext: EntryContext
+	remixContext: EntryContext,
+	appContext: AppLoadContext
 ) {
 	const callbackName = isbot(request.headers.get("user-agent")) ? "onAllReady" : "onShellReady"
 	const instance = createInstance()
-	const lng = await returnLanguageFromRequest(request)
-	const ns = i18next.getRouteNamespaces(remixContext)
+	const lng = appContext.lang;
+	const ns = i18nextOpts.getRouteNamespaces(remixContext)
 
 	await instance
 		.use(initReactI18next) // Tell our instance to use react-i18next
@@ -49,7 +53,8 @@ export default async function handleRequest(
 					responseHeaders.set("Content-Type", "text/html")
 
 					resolve(
-						new Response(body, {
+								// @ts-expect-error - We purposely do not define the body as existent so it's not used inside loaders as it's injected there as well
+						appContext.body(body, {
 							headers: responseHeaders,
 							status: didError ? 500 : responseStatusCode,
 						})
@@ -71,3 +76,42 @@ 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 "@remix-run/node" {
+	interface AppLoadContext extends Omit<LoadContext, "body"> {}
+}
+
+export const server = await createHonoServer({
+	configure(server) {
+		server.use("*", i18next(i18nextOpts))
+	},
+	defaultLogger: false,
+	getLoadContext,
+})

app/library/icon/icons/types.ts

@@ -1,5 +1,7 @@
 // This file is generated by icon spritesheet generator
 
-export const iconNames = ["ShoppingCart"] as const
+export const iconNames = [
+  "ShoppingCart",
+] as const
 
-export type IconName = (typeof iconNames)[number]
+export type IconName = typeof iconNames[number]

app/localization/i18n.server.ts

@@ -1,7 +1,6 @@
 import { resolve } from "node:path"
 import { RemixI18Next } from "remix-i18next/server"
 import i18n from "~/localization/i18n" // your i18n configuration file
-import type { Language } from "~/localization/resource"
 
 const i18next = new RemixI18Next({
 	detection: {
@@ -19,8 +18,3 @@ const i18next = new RemixI18Next({
 })
 
 export default i18next
-
-export const returnLanguageFromRequest = async (request: Request) => {
-	const lang = await i18next.getLocale(request)
-	return lang as Language
-}

app/root.tsx

@@ -4,31 +4,25 @@ import { Links, Meta, Outlet, Scripts, ScrollRestoration, useLoaderData } from "
 import { useTranslation } from "react-i18next"
 import { useChangeLanguage } from "remix-i18next/react"
 import { LanguageSwitcher } from "./library/language-switcher"
-import { returnLanguageFromRequest } from "./localization/i18n.server"
 import tailwindcss from "./tailwind.css?url"
 
-export async function loader({ request }: LoaderFunctionArgs) {
-	const locale = await returnLanguageFromRequest(request)
-	return json({ locale })
+export async function loader({  context: { lang, clientEnv } }: LoaderFunctionArgs) {
+	return json({ lang, clientEnv })
 }
 
 export const links: LinksFunction = () => [{ rel: "stylesheet", href: tailwindcss }]
 
 export const handle = {
-	// In the handle export, we can add a i18n key with namespaces our route
-	// will need to load. This key can be a single string or an array of strings.
-	// TIP: In most cases, you should set this to your defaultNS from your i18n config
-	// or if you did not set one, set it to the i18next default namespace "translation"
 	i18n: "common",
 }
 
 export default function App() {
-	const { locale } = useLoaderData<typeof loader>()
+	const { lang, clientEnv } = useLoaderData<typeof loader>()
 	const { i18n } = useTranslation()
-	useChangeLanguage(locale)
+	useChangeLanguage(lang)
 
 	return (
-		<html className="overflow-y-auto overflow-x-hidden" lang={locale} dir={i18n.dir()}>
+		<html className="overflow-y-auto overflow-x-hidden" lang={lang} dir={i18n.dir()}>
 			<head>
 				<meta charSet="utf-8" />
 				<meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -40,6 +34,8 @@ export default function App() {
 				<Outlet />
 				<ScrollRestoration />
 				<Scripts />
+				{/* biome-ignore lint/security/noDangerouslySetInnerHtml: We set the window.env variable to the client env */}
+				<script dangerouslySetInnerHTML={{ __html: `window.env = ${JSON.stringify(clientEnv)}` }} />
 			</body>
 		</html>
 	)

app/server/env.server.ts

@@ -0,0 +1,54 @@
+import { z } from "zod"
+
+const envSchema = z.object({
+	NODE_ENV: z.enum(["development", "production", "test"]),
+
+})
+
+type APP_ENV = z.infer<typeof envSchema>
+let env: APP_ENV
+/**
+ * Helper method used for initializing .env vars in your entry.server.ts file. It uses
+ * zod to validate your .env and throws if it's not valid.
+ * @returns Initialized env vars
+ */
+export const initEnv = () => {
+	const envData = envSchema.safeParse(process.env)
+
+	if (!envData.success) {
+		console.error("❌ Invalid environment variables:", envData.error.flatten().fieldErrors)
+		throw new Error("Invalid environment variables")
+	}
+
+	env = envData.data
+
+	// Do not log the message when running tests
+	if (env.NODE_ENV !== "test") {
+		console.log("✅ Environment variables loaded successfully")
+	}
+	return envData.data
+}
+
+/**
+ * Helper method for you to return client facing .env vars, only return vars that are needed on the client.
+ * Otherwise you would expose your server vars to the client if you returned them from here as this is
+ * directly sent in the root to the client and set on the window.env
+ * @returns Subset of the whole process.env to be passed to the client and used there
+ */
+export const getClientEnv = () => {
+	const serverEnv = env
+	return {
+		NODE_ENV: serverEnv.NODE_ENV,
+	}
+}
+
+type CLIENT_ENV = ReturnType<typeof getClientEnv>
+
+declare global {
+	interface Window {
+		env: CLIENT_ENV
+	}
+	namespace NodeJS {
+		interface ProcessEnv extends APP_ENV {}
+	}
+}