Remix Fastify

Use Remix with Fastify

Quick Start

These are the currently available templates that you can get jump started with:

• Using the Remix Vite plugin (recommended)

  1npx create-remix@latest --template mcansh/remix-fastify/examples/vite

• The basic example using the old Remix compiler

  1npx create-remix@latest --template mcansh/remix-fastify/examples/basic

Get started with an existing boilerplate that integrates React Router 7 & Fastify:

• https://github.com/simonsmith/react-router-fastify

Add to existing remix vite app

Install dependencies

1pnpm add @mcansh/remix-fastify fastify source-map-support get-port chalk @fastify/{middie,static}

Install dev dependencies

1pnpm add -D @types/source-map-support tsx

in the root of your project create a server directory and add index.ts server/index.ts

1import chalk from "chalk";
2import { remixFastify } from "@mcansh/remix-fastify";
3import { fastify } from "fastify";
4import sourceMapSupport from "source-map-support";
5import getPort, { portNumbers } from "get-port";
6
7sourceMapSupport.install();
8
9let app = fastify();
10
11await app.register(remixFastify);
12
13let host = process.env.HOST || "127.0.0.1";
14let desiredPort = Number(process.env.PORT) || 3000;
15let portToUse = await getPort({
16  port: portNumbers(desiredPort, desiredPort + 100),
17});
18
19let address = await app.listen({ port: portToUse, host });
20
21if (portToUse !== desiredPort) {
22  console.warn(
23    chalk.yellow(
24      `⚠️ Port ${desiredPort} is not available, using ${portToUse} instead.`,
25    ),
26  );
27}
28
29console.log(chalk.green(`✅ app ready: ${address}`));

Update the package.json dev, start and build commands

1"build": "remix vite:build && tsc --project ./tsconfig.server.json",
2"dev": "cross-env NODE_ENV=development tsx --watch-path ./server/index.ts ./server/index.ts",
3"start": "cross-env NODE_ENV=production node ./server/index.js",

Add the tsconfig.server.json file to the root of the project

1{
2  "$schema": "https://json.schemastore.org/tsconfig",
3  "extends": "./tsconfig.json",
4  "include": ["./server/**/*.ts"],
5  "exclude": ["node_modules"],
6  "compilerOptions": {
7    "noEmit": false,
8    "outDir": "./server"
9  }
10}

run pnpm dev to test that the server starts