¥Templates and Stacks
使用 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 运行时(例如 Arc、Cloudflare 或 Deno),那么你可以尝试 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
¥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
¥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
。