本指南将让你熟悉运行 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
# install runtime dependencies
npm i @remix-run/node @remix-run/react @remix-run/serve isbot@4 react react-dom
# install dev dependencies
npm i -D @remix-run/dev 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
文件夹(浏览器版本),其中包含一些构建工件。(这些都是 可配置的。)
👉 使用 remix-serve
运行应用程序
首先,你需要在 package.json
中将类型指定为模块,以便 remix-serve
可以运行你的应用程序。
{
"type": "module"
// ...
}
现在你可以使用 remix-serve
运行你的应用程序
# note the dash!
npx remix-serve build/server/index.js
你应该能够打开 https://127.0.0.1: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
# not going to use this anymore
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 https://127.0.0.1:3000");
});
👉 使用 Express 运行你的应用
node server.js
现在你拥有了自己的服务器,你可以使用服务器的任何工具来调试你的应用。例如,你可以使用 Node.js inspect 标志 使用 Chrome 开发者工具检查你的应用
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 https://127.0.0.1:3000");
});
👉 启动开发服务器
npm run dev
现在你可以在应用上工作,并获得即时反馈。试一下,更改 root.jsx
中的文本,看看效果!
Remix 正在使用一些默认的魔术文件,大多数应用不需要更改它们,但是如果你想自定义 Remix 到服务器和浏览器的入口点,你可以运行 remix reveal
,它们将被转储到你的项目中。
npx remix reveal
Entry file entry.client created at app/entry.client.tsx.
Entry file entry.server created at app/entry.server.tsx.
恭喜,你可以把 Remix 添加到你的简历中了!总结一下,我们已经学习了:
总的来说,Remix 有点“袒露”。一些样板代码,但现在你拥有了自己的技术栈。
下一步是什么?