用于部署到 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！让它成为你自己的。

快速入门

点击此按钮创建一个带有项目设置和预安装 Fly 的 Gitpod 工作区

开发

首先运行此 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 脚本，您可以运行它来格式化项目中的所有文件。