Remix + Hono

Remix is a web framework for building web applications, which can run on the Edge.

Hono is a small and ultrafast web framework for the Edges.

This adapter allows you to use Hono with Remix, so you can use the best of each one.

Let Hono power your HTTP server and its middlewares, then use Remix to build your web application.

Installation

Install the package

1npm add remix-hono

The following packages are optional dependencies, you will need to install them depending on what features from remix-hono you're using.

• @remix-run/cloudflare if you're using Cloudflare Pages or Workers
• i18next and remix-i18next if you're using i18n
• zod if you're using typedEnv

Note you don't really need to install them if you don't use them, but you will need to install them yourself (they don't come not automatically) if you use the features that depends on those packages.

Usage

Create your Hono + Remix server:

1import { logDevReady } from "@remix-run/cloudflare";
2import * as build from "@remix-run/dev/server-build";
3import { Hono } from "hono";
4// You can also use it with other runtimes
5import { handle } from "hono/cloudflare-pages";
6import { remix } from "remix-hono/handler";
7
8if (process.env.NODE_ENV === "development") logDevReady(build);
9
10/* type your Cloudflare bindings here */
11type Bindings = {};
12
13/* type your Hono variables (used with ctx.get/ctx.set) here */
14type Variables = {};
15
16type ContextEnv = { Bindings: Bindings; Variables: Variables };
17
18const server = new Hono<ContextEnv>();
19
20// Add the Remix middleware to your Hono server
21server.use(
22	"*",
23	remix({
24		build,
25		mode: process.env.NODE_ENV as "development" | "production",
26		// getLoadContext is optional, the default function is the same as here
27		getLoadContext(ctx) {
28			return ctx.env;
29		},
30	}),
31);
32
33// Create a Cloudflare Pages request handler for your Hono server
34export const onRequest = handle(server);

Now, you can add more Hono middlewares, like the basic auth middleware:

1import { basicAuth } from "hono/basic-auth";
2
3server.use(
4	"*",
5	basicAuth({ username: "hono", password: "remix" }),
6	// Ensure Remix request handler is the last one
7	remix(options),
8);

With just that, your app will now have basic auth protection, which can work great of preview applications.

Session Management

Additionally to the remix Hono middleware, there are other three middlewares to work with Remix sessions.

Because Remix sessions typically use a secret coming from the environment you will need access to Hono ctx.env to use them. If you're using the Worker KV session storage you will also need to pass the KV binding to the middleware.

You can use the different middlewares included in this package to do that:

1import { session } from "remix-hono/session";
2// Install the `@remix-run/*` package for your server adapter to grab the
3// factory functions for session storage
4import { createWorkerKVSessionStorage } from "@remix-run/cloudflare";
5
6server.use(
7	"*",
8	session({
9		autoCommit: true,
10		createSessionStorage(context) {
11			return createWorkersKVSessionStorage({
12				kv: context.env.MY_KV_BINDING,
13				cookie: {
14					name: "session",
15					httpOnly: true,
16					secrets: [context.SESSION_SECRET],
17				},
18			});
19		},
20	}),
21);

Now, setup the Remix middleware after your session middleware and use the helpers getSessionStorage and getSession to access the SessionStorage and Session objects.

Note The Session object will only be defined if autoCommit was set as true in the session middleware options. If you set it to false, you will need to call sessionStorage.getSession() manually.

1import { getSessionStorage, getSession } from "remix-hono/session";
2
3server.use(
4	"*",
5	remix<ContextEnv>({
6		build,
7		mode: process.env.NODE_ENV as "development" | "production",
8		// getLoadContext is optional, the default function is the same as here
9		getLoadContext(ctx) {
10			let sessionStorage = getSessionStorage(ctx);
11			let session = getSession(ctx);
12
13			// Return them here to access them in your loaders and actions
14			return { ...ctx.env, sessionStorage, session };
15		},
16	}),
17);

The session middleware is generic and lets you use any session storage mechanism. If you want to use the Worker KV session storage you can use the workerKVSession middleware instead.

1import { workerKVSession } from "remix-hono/cloudflare";
2
3server.use(
4	"*",
5	workerKVSession({
6		autoCommit: true, // same as in the session middleware
7		cookie: {
8			name: "session", // all cookie options as in createWorkerKVSessionStorage
9			// In this function, you can access context.env to get the session secret
10			secrets(context) {
11				return [context.env.SECRET];
12			},
13		},
14		// The name of the binding using for the KVNamespace
15		binding: "KV_BINDING",
16	}),
17);

If you want to use the cookie session storage, you can use the cookieSession middleware instead.

1import { cookieSession } from "remix-hono/cloudflare";
2
3server.use(
4	"*",
5	cookieSession({
6		autoCommit: true, // same as in the session middleware
7		cookie: {
8			name: "session", // all cookie options as in createCookieSessionStorage
9			// In this function, you can access context.env to get the session secret
10			secrets(context) {
11				return [context.env.SECRET];
12			},
13		},
14	}),
15);

In both workerKVSession and cookieSession you use getSession and getSessionStorage imported from remix-hono/session

Static Assets on Cloudflare

If you're using Remix Hono with Cloudflare, you will need to serve your static from the public folder (except for public/build). The staticAssets middleware serves this purpose.

First install @remix-run/cloudflare if you haven't installed it yet.

1npm add @remix-run/cloudflare

Then use the middleware in your server.

1import { staticAssets } from "remix-hono/cloudflare";
2import { remix } from "remix-hono/handler";
3
4server.use(
5	"*",
6	staticAssets(),
7	// Add Remix request handler as the last middleware
8	remix(options),
9);

i18next integration

If you're using remix-i18next to support i18n in your Remix app, the i18next middleware let's you setup it for your Remix app as a middleware that you can later use in your getLoadContext function to pass the locale and t functions to your loaders and actions.

First install i18next and remix-i18next if you haven't already.

1npm add i18next remix-i18next

Then use the middleware in your server.

1import { i18next } from "remix-hono/i18next";
2
3// Same options as in remix-i18next
4server.use("*", i18next(options));

Then, in your getLoadContext function you can access the locale and t functions using the helpers i18next.getLocale and i18next.getFixedT.

1server.use(
2	"*",
3	remix({
4		build,
5		mode: process.env.NODE_ENV as "development" | "production",
6		// getLoadContext is optional, the default function is the same as here
7		getLoadContext(ctx) {
8			// get the locale from the context
9			let locale = i18next.getLocale(context);
10			// get t function for the default namespace
11			let t = await i18next.getFixedT(context);
12			// get t function for a specific namespace
13			let errorT = await i18next.getFixedT(context, "error");
14			return { env: ctx.env, locale, t, errorT };
15		},
16	}),
17);

There's also an i18next.get function that returns the RemixI18Next instance in case you need it.

HTTPS Only

You can enforce your server to use HTTPS only with the httpsOnly middleware.

1import { httpsOnly } from "remix-hono/security";
2
3server.use("*", httpsOnly());

Trailing Slash

You can enforce your server to use trailing slashes with the trailingSlash middleware.

1import { trailingSlash } from "remix-hono/trailing-slash";
2
3// By default, trailing slashes are disabled, so `https://company.tld/about/`
4// will be redirect to `https://company.tld/about`
5server.use("*", trailingSlash());
6server.use("*", trailingSlash({ enabled: false }));
7
8// You can also enable trailing slashes, so `https://company.tld/about` will be
9// redirect to `https://company.tld/about/` instead
10server.use("*", trailingSlash({ enabled: true }));

Typed Envs with Zod

The typedEnv helper let's you get the environment variables for any runtimes and use Zod to validate it against a schema.

First install Zod if you haven't installed it yet.

1npm add zod

Then use the helper in any middleware or request handler.

1import { typedEnv } from "remix-hono/typed-env";
2
3// Define your schema
4const Schema = z.object({ SECRET: z.string() });
5
6// Use the helper
7server.get("/about", (ctx) => {
8	let env = typedEnv(ctx, Schema);
9	let secret = env.SECRET; // or typedEnv(ctx, Schema, "SECRET");
10	// do something here
11});

Author

• Sergio Xalambrí

License

• MIT License