@exortek/remix-fastify

Fastify plugin for React Router v7 / Remix v2.

Handles the Vite dev server in development and static asset serving in production — you bring your own Fastify instance.

Compatibility

| Package | React Router | Remix | Fastify | |---------|:------------:|:-----:|:-------:| | ^2.x | ^7.x | ^2.x | ^5.x |

Installation

React Router v7

npm install @exortek/remix-fastify @react-router/node react-router react react-dom

or

yarn add @exortek/remix-fastify @react-router/node react-router react react-dom

Remix v2

npm install @exortek/remix-fastify @remix-run/node @remix-run/server-runtime react react-dom

or

yarn add @exortek/remix-fastify @remix-run/node @remix-run/server-runtime react react-dom

Usage

// server.mjs
import fastify from 'fastify';
import remixFastify from '@exortek/remix-fastify';

const app = fastify({ logger: true });

app.register(remixFastify,{ mode: process.env.NODE_ENV });

app.listen({ port: 3000 });

With load context

app.register(remixFastify,{
    mode: process.env.NODE_ENV,
    getLoadContext: (request, reply) => ({
        db: dbClient,
        user: request.user,
    }),
});

TypeScript

import fastify from 'fastify';
import remixFastify from '@exortek/remix-fastify';
import type { RemixFastifyOptions } from '@exortek/remix-fastify';

const app = fastify();

const options: RemixFastifyOptions = {
  mode: process.env.NODE_ENV,
  getLoadContext: async (request, reply) => ({
    db: dbClient,
  }),
};

app.register(remixFastify, options);

app.listen({ port: 3000 });

How it works

• Development — mounts the Vite dev server as middleware (middlewareMode: true) with HMR via virtual:react-router/server-build.
• Production — serves static assets from build/client via @fastify/static, then routes all requests through React Router / Remix.

Fastify's built-in body parsers are disabled for the React Router handler so the raw request stream stays intact for body parsing.

Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | buildDirectory | string | 'build' | Root build output directory | | clientDirectory | string | 'client' | Client assets sub-directory | | serverDirectory | string | 'server' | Server build sub-directory | | serverBuildFile | string | 'index.js' | Server entry filename | | mode | string | NODE_ENV | 'development' or 'production' | | getLoadContext | Function | undefined | Returns React Router AppLoadContext passed to loaders/actions | | fastifyStaticOptions | object | {} | Options forwarded to @fastify/static (production only) | | viteOptions | object | {} | Options forwarded to Vite dev server (development only) |

getLoadContext

Use getLoadContext to pass server-side data (database clients, auth info, environment variables, etc.) into your route loaders and actions via the context parameter.

// server.mjs
app.register(remixFastify,{
    getLoadContext: (request, reply) => ({
        db: dbClient,
        env: process.env,
    }),
});

// routes/dashboard.tsx
export async function loader({ context }) {
  const posts = await context.db.query('SELECT * FROM posts');
  return { posts };
}

License

MIT