用于部署到 Fly 的 Remix Stack，包含 SQLite、身份验证、测试、代码检查、格式化等。

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

Remix Indie Stack

The Remix Indie Stack

了解更多关于 Remix Stacks 的信息。

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

Stack 中包含什么

使用 Docker 进行 Fly 应用部署
生产就绪的 SQLite 数据库
用于 Fly 备份区域回退的健康检查端点
用于合并到生产和暂存环境时部署的 GitHub Actions
使用基于 cookie 的会话进行电子邮件/密码身份验证
使用 Prisma 进行数据库 ORM 操作
使用 Tailwind 进行样式设计
使用 Cypress 进行端到端测试
使用 MSW 进行本地第三方请求模拟
使用 Vitest 和 Testing Library 进行单元测试
使用 Prettier 进行代码格式化
使用 ESLint 进行代码检查
使用 TypeScript 进行静态类型检查

不喜欢 stack 中的某些部分？ Fork 它，更改它，然后使用 npx create-remix --template your/repo! 让它成为你自己的。

快速开始

点击此按钮创建一个 Gitpod 工作区，其中已设置好项目并预先安装了 Fly

开发

首先运行此 stack 的 remix.init 脚本，并将它对项目所做的更改提交到你的项目中。
```
npx remix init
git init # if you haven't already
git add .
git commit -m "Initialize project"
```
初始设置
```
npm run setup
```
启动开发服务器
```
npm run dev
```

这会以开发模式启动你的应用，并在文件更改时重建资源。

数据库种子脚本会创建一个新用户，其中包含一些你可以用来入门的数据

电子邮件: [email protected]
密码: racheliscool

部署

此 Remix Stack 带有两个 GitHub Actions，用于处理将你的应用自动部署到生产和暂存环境。

在首次部署之前，你需要做一些事情

安装 Fly
注册并登录 Fly
```
fly auth signup
```
注意： 如果你有多个 Fly 帐户，请确保你登录到 Fly CLI 的帐户与浏览器中登录的帐户相同。在你的终端中，运行 fly auth whoami 并确保电子邮件与登录到浏览器的 Fly 帐户匹配。
在 Fly 上创建两个应用程序，一个用于暂存，一个用于生产
```
fly apps create indie-stack-template
fly apps create indie-stack-template-staging
```
注意： 请确保此名称与你的 fly.toml 文件中设置的 app 相匹配。否则，你将无法部署。
- 初始化 Git。
```
git init
```
创建一个新的 GitHub 存储库，然后将其添加为你的项目的远程存储库。 不要急于推送你的应用程序！
```
git remote add origin <ORIGIN_URL>
```
将 FLY_API_TOKEN 添加到你的 GitHub 存储库。为此，请转到 Fly 上的用户设置并创建一个新的令牌，然后使用名称 FLY_API_TOKEN 将其添加到你的存储库机密中。
将 SESSION_SECRET 添加到你的 fly 应用机密中，为此你可以运行以下命令
```
fly secrets set SESSION_SECRET=$(openssl rand -hex 32) --app indie-stack-template
fly secrets set SESSION_SECRET=$(openssl rand -hex 32) --app indie-stack-template-staging
```
如果你没有安装 openssl，你还可以使用 1Password 生成随机机密，只需将 $(openssl rand -hex 32) 替换为生成的机密即可。

为你的暂存和生产环境的 sqlite 数据库创建一个持久卷。运行以下命令

fly volumes create data --size 1 --app indie-stack-template
fly volumes create data --size 1 --app indie-stack-template-staging

现在一切都已设置好，你可以提交并将你的更改推送到你的存储库。每次提交到你的 main 分支都会触发部署到你的生产环境，而每次提交到你的 dev 分支都会触发部署到你的暂存环境。

连接到你的数据库

sqlite 数据库位于你已部署的应用程序中的 /data/sqlite.db。你可以通过运行 fly ssh console -C database-cli 连接到实时数据库。

获取部署帮助

如果你在部署到 Fly 时遇到任何问题，请确保你已按照上述所有步骤操作，如果已操作，则将有关你的部署（包括你的应用程序名称）的尽可能多的详细信息发布到 Fly 支持社区。他们通常在那里响应很快，并且希望可以帮助解决你的任何部署问题和疑问。

GitHub Actions

我们使用 GitHub Actions 进行持续集成和部署。任何进入 main 分支的内容都会在运行测试/构建等操作后部署到生产环境。 dev 分支中的任何内容都将部署到暂存环境。

测试

Cypress

我们在此项目中使用 Cypress 进行端到端测试。你可以在 cypress 目录中找到它们。在进行更改时，请在 cypress/e2e 目录中添加到现有文件或创建新文件以测试你的更改。

我们使用 @testing-library/cypress 以语义方式选择页面上的元素。

要在开发中运行这些测试，请运行 npm run test:e2e:dev，它将启动应用程序的开发服务器以及 Cypress 客户端。确保数据库在 docker 中运行，如上所述。

我们有一个实用程序，用于测试已通过身份验证的功能，而无需通过登录流程

cy.login();
// you are now logged in as a new user

我们还有一个实用程序，可以在测试结束时自动删除用户。只需确保将其添加到每个测试文件中

afterEach(() => {
  cy.cleanupUser();
});

这样，我们就可以保持你的本地数据库干净，并使你的测试彼此隔离。

Vitest

对于实用程序和单个组件的较低级别测试，我们使用 vitest。我们通过 @testing-library/jest-dom 提供了特定于 DOM 的断言帮助程序。

类型检查

此项目使用 TypeScript。建议为你的编辑器设置 TypeScript，以获得非常好的编辑器内体验，包括类型检查和自动完成功能。要在整个项目中运行类型检查，请运行 npm run typecheck。

代码检查

此项目使用 ESLint 进行代码检查。它在 .eslintrc.cjs 中配置。

格式化

我们在此项目中使用 Prettier 进行自动格式化。建议安装编辑器插件（例如 VSCode Prettier 插件）以在保存时进行自动格式化。还有一个 npm run format 脚本，你可以运行它来格式化项目中的所有文件。