模板
On this page

模板和堆栈

¥Templates and Stacks

刚开始使用 Remix?最新版本的 Remix 现已是 React Router v7。如果你想使用最新的框架功能,你应该使用 React Router 模板 创建你的项目。

使用 create-remix 生成新项目时,你可以选择模板或堆栈来快速启动并运行。模板是帮助你快速启动和运行的极简起点。"技术栈" 是更完整、更接近生产级架构的模板(可能包含测试、数据库、持续集成和部署配置等方面)。

¥When using create-remix to generate a new project, you can choose a Template or a Stack to quickly get up and running. Templates are minimal starting points to get you up and running. "Stacks" are templates that are more-complete and closer to production-ready architectures (potentially including aspects such as testing, database, CI, and deployment configurations).

模板

¥Templates

如果你运行 create-remix 而不提供 --template 选项,你将获得一个使用 Remix 应用服务器 的基本模板。

¥If you run create-remix without providing the --template option, you'll get a basic template using the Remix App Server.

npx create-remix@latest

如果你不想使用 TypeScript,可以安装更简单的 JavaScript 模板:

¥If you are not interested in using TypeScript, you can install the simpler JavaScript template instead:

npx create-remix@latest --template remix-run/remix/templates/remix-javascript

如果你是第一次尝试 Remix,这是一个很好的起点。你可以随时自行扩展此起点,或稍后迁移到更高级的模板。

¥This is a great place to start if you're just looking to try out Remix for the first time. You can always extend this starting point yourself or migrate to more advanced templates later.

官方模板

¥Official Templates

如果你希望更好地控制服务器或希望部署到非 Node 运行时(例如 ArcCloudflareDeno),那么你可以尝试 Remix 代码库中的 官方模板 之一:

¥If you want more control over your server or wish to deploy to a non-node runtime—such as Arc, Cloudflare, or Deno — then you can try one of our official templates from the Remix repository:

npx create-remix@latest --template remix-run/remix/templates/cloudflare
npx create-remix@latest --template remix-run/remix/templates/cloudflare-workers
npx create-remix@latest --template remix-run/remix/templates/express
npx create-remix@latest --template remix-run/remix/templates/remix
npx create-remix@latest --template remix-run/remix/templates/remix-javascript

## SPA Mode
npx create-remix@latest --template remix-run/remix/templates/spa

## Classic Remix Compiler
npx create-remix@latest --template remix-run/remix/templates/classic-remix-compiler/arc
npx create-remix@latest --template remix-run/remix/templates/classic-remix-compiler/cloudflare-pages
npx create-remix@latest --template remix-run/remix/templates/classic-remix-compiler/cloudflare-workers
npx create-remix@latest --template remix-run/remix/templates/classic-remix-compiler/deno
npx create-remix@latest --template remix-run/remix/templates/classic-remix-compiler/express
npx create-remix@latest --template remix-run/remix/templates/classic-remix-compiler/fly
npx create-remix@latest --template remix-run/remix/templates/classic-remix-compiler/remix
npx create-remix@latest --template remix-run/remix/templates/classic-remix-compiler/remix-javascript

第三方模板

¥Third-Party Templates

一些托管服务提供商维护他们自己的 Remix 模板。更多信息,请参阅下面列出的官方集成指南。

¥Some hosting providers maintain their own Remix templates. For more information, see their official integration guides listed below.

示例

¥Examples

我们还提供了一个 社区驱动的示例代码库,其中每个示例展示了不同的 Remix 功能、模式、工具、托管服务提供商等。你可以以类似的方式使用这些插件来安装工作示例:

¥We also provide a community-driven examples repository, with each example showcasing different Remix features, patterns, tools, hosting providers, etc. You can use these in a similar manner to install the working example:

npx create-remix@latest --template remix-run/examples/basic

技术栈

¥Stacks

当模板更接近于生产就绪的应用,以至于它提供了关于 CI/CD 管道、数据库和托管平台的意见时,Remix 社区将这些模板称为 "stacks"。

¥When a template is closer to being a production-ready application, to the point that it provides opinions about the CI/CD pipeline, database, and hosting platform, the Remix community refers to these templates as "stacks".

官方提供了几个技术栈,但你也可以自己创建(详情请阅读下文)。

¥There are several official stacks provided, but you can also make your own (read more below).

阅读功能公告博客帖子在 YouTube 上观看 Remix Stacks 视频

¥Read the feature announcement blog post and watch Remix Stacks videos on YouTube.

官方技术栈

¥Official Stacks

官方技术栈已准备好生产应用所需的常用功能,包括:

¥The official stacks come ready with common things you need for a production application, including:

  • 数据库

    ¥Database

  • 自动部署流水线

    ¥Automatic deployment pipelines

  • 身份验证

    ¥Authentication

  • 测试

    ¥Testing

  • Linting/格式化/TypeScript

    ¥Linting/Formatting/TypeScript

剩下的就是一切都已完全设置好,你可以开始使用 Remix 构建任何你想要的精彩 Web 体验。以下是官方技术栈:

¥What you're left with is everything completely set up for you to just get to work building whatever amazing web experience you want to build with Remix. Here are the official stacks:

  • Blues 堆栈:部署到使用长期运行 Node.js 服务器和 PostgreSQL 数据库的边缘(分布式)服务器。适用于服务于数百万用户的大型快速生产级应用。

    ¥The Blues Stack: Deployed to the edge (distributed) with a long-running Node.js server and PostgreSQL database. Intended for large and fast production-grade applications serving millions of users.

  • Indie 堆栈:部署到使用持久化 SQLite 数据库的长期运行 Node.js 服务器。此堆栈非常适合包含你控制的动态数据的网站(博客、营销、内容网站)。它也是一个完美的、低复杂度的引导程序,适用于 MVP、原型和概念验证,以后可以轻松更新到 Blues 技术栈。

    ¥The Indie Stack: Deployed to a long-running Node.js server with a persistent SQLite database. This stack is great for websites with dynamic data that you control (blogs, marketing, content sites). It's also a perfect, low-complexity bootstrap for MVPs, prototypes, and proof-of-concepts that can later be updated to the Blues stack easily.

  • Grunge 堆栈:部署到使用 DynamoDB 进行持久化的 Node.js 无服务器函数。适用于希望在 AWS 基础架构上部署服务于数百万用户的生产级应用的人员。

    ¥The Grunge Stack: Deployed to a serverless function running Node.js with DynamoDB for persistence. Intended for folks who want to deploy a production-grade application on AWS infrastructure serving millions of users.

你可以在运行 create-remix 时提供 --template 选项来使用这些堆栈,例如:

¥You can use these stacks by providing the --template option when running create-remix, for example:

npx create-remix@latest --template remix-run/blues-stack

是的,这些是以音乐流派命名的。🤘 继续前进。

¥Yes, these are named after music genres. 🤘 Rock on.

社区技术栈

¥Community Stacks

你可以 浏览 GitHub 上的社区技术栈列表

¥You can browse the list of community stacks on GitHub.

运行 create-remix 时,可以通过将 GitHub 用户名/仓库组合传递给 --template 选项来使用社区技术栈,例如:

¥Community stacks can be used by passing the GitHub username/repo combo to the --template option when running create-remix, for example:

npx create-remix@latest --template :username/:repo

如果你想与社区分享你的技术栈,请记得使用 remix-stack 主题进行标记,以便其他人可以找到它 - 是的,我们建议你以音乐子类型命名你自己的技术栈(不是 "rock",而是 "indie"!)。

其他信息

¥Other Information

私有模板

¥Private Templates

如果你的模板位于私有 GitHub 仓库中,你可以通过 --token 选项传递 GitHub 令牌:

¥If your template is in a private GitHub repo, you can pass a GitHub token via the --token option:

npx create-remix@latest --template your-private/repo --token yourtoken

令牌只需要 repo 访问

¥The token just needs repo access.

本地模板

¥Local Templates

你可以为 --template 选项提供一个本地目录或磁盘上的 tarball,例如:

¥You can provide a local directory or tarball on disk to the --template option, for example:

npx create-remix@latest --template /my/remix-stack
npx create-remix@latest --template /my/remix-stack.tar.gz
npx create-remix@latest --template /my/remix-stack.tgz
npx create-remix@latest --template file:///Users/michael/my-remix-stack.tar.gz

自定义模板提示

¥Custom Template Tips

依赖版本

¥Dependency Versions

如果你将 package.json 中的任何依赖设置为 *,Remix CLI 会将其更改为已安装 Remix 版本的语义版本插入符号:

¥If you set any dependencies in package.json to *, the Remix CLI will change it to a semver caret of the installed Remix version:

-   "remix": "*",
+   "remix": "^2.0.0",

这使你不必定期将模板更新到该特定软件包的最新版本。当然,如果你希望手动管理该软件包的版本,则不必输入 *

¥This allows you to not have to regularly update your template to the latest version of that specific package. Of course, you do not have to put * if you'd prefer to manually manage the version for that package.

自定义初始化

¥Customize Initialization

如果模板根目录下有一个 remix.init/index.js 文件,则该文件将在项目生成并安装依赖后执行。这让你有机会在模板初始化过程中执行任何你想做的事情。例如,在 Blues 堆栈中,app 属性必须是全局唯一的,因此我们使用 remix.init/index.js 文件将其更改为为项目创建的目录名称和几个随机字符。

¥If the template has a remix.init/index.js file at the root then that file will be executed after the project has been generated and dependencies have been installed. This gives you a chance to do anything you'd like as part of the initialization of your template. For example, in the blues stack, the app property has to be globally unique, so we use the remix.init/index.js file to change it to the name of the directory that was created for the project and a couple random characters.

你甚至可以使用 remix.init/index.js 向开发者询问更多问题以获取其他配置(使用类似 inquirer 的工具)。有时,你需要安装依赖才能执行此操作,但这些依赖仅在初始化期间有用。在这种情况下,你还可以创建一个包含依赖的 remix.init/package.json,Remix CLI 会在运行脚本之前安装这些依赖。

¥You could even use remix.init/index.js to ask further questions to the developer for additional configuration (using something like inquirer). Sometimes, you'll need dependencies installed to do this, but those deps are only useful during initialization. In that case, you can also create a remix.init/package.json with dependencies and the Remix CLI will install those before running your script.

运行初始化脚本后,remix.init 文件夹将被删除,因此你无需担心它会弄乱已完成的代码库。

¥After the init script has been run, the remix.init folder gets deleted, so you don't need to worry about it cluttering up the finished codebase.

请注意,用户可以选择不运行 remix.init 脚本。如果要手动执行此操作,则需要运行 remix init

Remix v2.17 中文网 - 粤ICP备13048890号