快速入门（5 分钟）

本指南将帮助您尽快熟悉运行 Remix 应用所需的基本流程。虽然有许多具有不同运行时、部署目标和数据库的入门模板，但我们将从头开始创建一个基本项目。

当您准备好认真对待您的 Remix 项目时，您可以考虑从社区模板开始。它们包括 TypeScript 设置、数据库、测试工具、身份验证等。您可以在 Remix 资源页面上找到社区模板列表。

安装

如果您希望初始化包含电池的 Remix 项目，则可以使用 create-remix CLI：

npx create-remix@latest

但是，本指南将解释 CLI 设置项目所做的一切，您可以按照以下步骤操作，而不是使用 CLI。如果您刚刚开始使用 Remix，我们建议您遵循本指南来了解构成 Remix 应用程序的所有不同部分。

mkdir my-remix-app
cd my-remix-app
npm init -y

# 安装运行时依赖项
npm i @remix-run/node @remix-run/react @remix-run/serve isbot@4 react react-dom

# 安装开发依赖项
npm i -D @remix-run/dev vite

Vite 配置

touch vite.config.js

由于 Remix 使用 Vite，您需要为 Remix Vite 插件提供 Vite 配置。以下是您需要的基本配置：

import { vitePlugin as remix } from "@remix-run/dev";
import { defineConfig } from "vite";

export default defineConfig({
plugins: [remix()],
});

根路由

mkdir app
touch app/root.jsx

app/root.jsx 就是我们所说的 根路由。它是整个应用程序的根布局。以下是任何项目所需的基本元素集：

import {
  Links,
  Meta,
  Outlet,
  Scripts,
} from "@remix-run/react";

export default function App() {
  return (
    <html>
      <head>
        <link
          rel="icon"
          href="data:image/x-icon;base64,AA"
        />
        <Meta />
        <Links />
      </head>
      <body>
        <h1>Hello world!</h1>
        <Outlet />

        <Scripts />
      </body>
    </html>
  );
}

构建和运行

首先构建生产应用程序：

npx remix vite:build

您现在应该会看到一个 build 文件夹，其中包含一个 server 文件夹（应用程序的服务器版本）和一个 client 文件夹（浏览器版本），其中包含一些构建工件。（这都是 configurable。）

👉 使用 remix-serve 运行应用程序

首先，您需要在 package.json 中将类型指定为模块，以便 remix-serve 可以运行您的应用程序。

{
  "type": "module"
  // ...
}

现在，您可以使用 remix-serve 运行您的应用程序：

# 注意破折号！
npx remix-serve build/server/index.js

您应该能够打开 http://localhost:3000 并看到 hello world 页面。

除了 node_modules 中大量的代码外，我们的 Remix 应用程序只有一个文件：

├── app/
│   └── root.jsx
└── package.json
└── vite.config.js

自带服务器

remix vite:build 创建的 build/server 目录只是一个模块，您可以在 Express、Cloudflare Workers、Netlify、Vercel、Fastly、AWS、Deno、Azure、Fastify、Firebase 等服务器中运行它。

如果您不想设置自己的服务器，可以使用 remix-serve。这是一个由 Remix 团队维护的基于 express 的简单服务器。但是，Remix 专门设计用于在任何 JavaScript 环境中运行，以便您拥有自己的堆栈。预计许多（如果不是大多数）生产应用程序都将拥有自己的服务器。您可以在运行时、适配器和堆栈中阅读更多相关信息。

只是为了好玩，让我们停止使用 remix-serve，改用 express。

👉 安装 Express、Remix Express 适配器和 cross-env 以在生产模式下运行

npm i express @remix-run/express cross-env

# 不再使用这个
npm uninstall @remix-run/serve

👉 创建 Express 服务

touch server.js

import { createRequestHandler } from "@remix-run/express";
import express from "express";

// notice that the result of `remix vite:build` is "just a module"
import * as build from "./build/server/index.js";

const app = express();
app.use(express.static("build/client"));

// and your app is "just a request handler"
app.all("*", createRequestHandler({ build }));

app.listen(3000, () => {
  console.log("App listening on http://localhost:3000");
});

👉 使用 express 运行您的应用

node server.js

现在您拥有了自己的服务器，您可以使用服务器拥有的任何工具来调试您的应用。例如，您可以使用 chrome devtools 中的 Node.js 检查标志检查您的应用：

node --inspect server.js

开发工作流程

您无需一直停止、重建和启动服务器，而是可以使用 Vite 中间件模式在开发中运行 Remix。这样，您就可以使用 React Refresh（热模块替换）和 Remix 热数据重新验证即时反馈应用中的更改。

首先，为方便起见，在 package.json 中添加 dev 和 start 命令，它们将分别在开发和生产模式下运行您的服务器：

👉 在 package.json 中添加 scripts

{
  "scripts": {
    "dev": "node ./server.js",
    "start": "cross-env NODE_ENV=production node ./server.js"
  }
  // ...
}

👉 将 Vite 开发中间件添加到您的服务器

如果 process.env.NODE_ENV 设置为 "production"，则不会应用 Vite 中间件，在这种情况下，您仍将像之前一样运行常规构建输出。

import { createRequestHandler } from "@remix-run/express";
import express from "express";

const viteDevServer =
  process.env.NODE_ENV === "production"
    ? null
    : await import("vite").then((vite) =>
        vite.createServer({
          server: { middlewareMode: true },
        })
      );

const app = express();
app.use(
  viteDevServer
    ? viteDevServer.middlewares
    : express.static("build/client")
);

const build = viteDevServer
  ? () =>
      viteDevServer.ssrLoadModule(
        "virtual:remix/server-build"
      )
  : await import("./build/server/index.js");

app.all("*", createRequestHandler({ build }));

app.listen(3000, () => {
  console.log("App listening on http://localhost:3000");
});

👉 启动开发服务器

npm run dev

现在，您可以立即使用您的应用并收到反馈。试一试，更改 root.jsx 中的文本并观察！

控制服务器和浏览器条目

Remix 使用的是默认的魔术文件，大多数应用都不需要处理这些文件，但如果您想自定义 Remix 到服务器和浏览器的入口点，您可以运行 remix reveal，它们将被转储到您的项目中。

npx remix reveal

在 app/entry.client.tsx 上创建了入口文件 entry.client。
在 app/entry.server.tsx 上创建了入口文件 entry.server。

总结

恭喜，您可以将 Remix 添加到您的简历中！总结一下，我们了解到：

Remix 将您的应用编译成两部分：
您添加到自己的 JavaScript 服务器的请求处理程序
浏览器公共目录中的一堆静态资产
您可以携带自己的服务器和适配器部署到任何地方
您可以设置内置 HMR 的开发工作流程

一般来说，Remix 有点 大胆。只需几分钟的样板代码，但现在您拥有自己的堆栈了。

下一步是什么？

教程