Remix Fastify

使用 Remix 和 Fastify

快速开始

这些是目前可用的模板，您可以使用它们快速上手

  • 使用 Remix Vite 插件（推荐）

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

  • 使用旧版 Remix 编译器的基本示例

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

添加到现有的 remix vite 应用

安装依赖项

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

安装开发依赖项

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

在项目的根目录下创建一个 server 目录并添加 index.ts 文件 server/index.ts

import process from "node:process";
import { remixFastify } from "@mcansh/remix-fastify";
import chalk from "chalk";
import { fastify } from "fastify";
import sourceMapSupport from "source-map-support";
import getPort, { portNumbers } from "get-port";

sourceMapSupport.install();

const app = fastify();

await app.register(remixFastify);

const host = process.env.HOST || "127.0.0.1";
const desiredPort = Number(process.env.PORT) || 3000;
const portToUse = await getPort({
  port: portNumbers(desiredPort, desiredPort + 100),
});

let address = await app.listen({ port: portToUse, host });
let { port: usedPort } = new URL(address);

if (usedPort !== String(desiredPort)) {
  console.warn(
    chalk.yellow(
      `⚠️ Port ${desiredPort} is not available, using ${usedPort} instead.`,
    ),
  );
}

console.log(chalk.green(`✅ app ready: ${address}`));

更新 package.json 中的 dev、start 和 build 命令

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

将 tsconfig.server.json 文件添加到项目的根目录

{
  "$schema": "https://json.schemastore.org/tsconfig",
  "extends": "./tsconfig.json",
  "include": ["./server/**/*.ts"],
  "exclude": ["node_modules"],
  "compilerOptions": {
    "noEmit": false,
    "outDir": "./server"
  }
}

运行 pnpm dev 以测试服务器是否启动