Remix Indie Stack 教程
1. 项目的目录结构及介绍
Remix Indie Stack 是一个用于部署到 Fly 的 Remix 堆栈,包含 SQLite 认证、测试、代码检查、格式化等功能。以下是项目的目录结构及其介绍:
indie-stack/
├── app/ # 应用程序代码
│ ├── routes/ # 路由定义
│ ├── entry.client.tsx# 客户端入口文件
│ ├── entry.server.tsx# 服务器入口文件
│ └── root.tsx # 根组件
├── cypress/ # 端到端测试配置
├── mocks/ # 本地第三方请求模拟
├── public/ # 公共静态资源
├── test/ # 单元测试配置
├── Dockerfile # Docker 配置
├── .dockerignore # Docker 忽略文件
├── .env.example # 环境变量示例
├── .eslintrc.js # ESLint 配置
├── .gitignore # Git 忽略文件
├── .gitpod.Dockerfile # Gitpod Docker 配置
├── .gitpod.yml # Gitpod 配置
├── .npmrc # npm 配置
├── .prettierignore # Prettier 忽略文件
├── LICENSE.md # 许可证
├── README.md # 项目说明
├── cypress.config.ts # Cypress 配置
├── fly.toml # Fly 配置
├── package.json # 项目依赖和脚本
├── postcss.config.js # PostCSS 配置
├── prettier.config.js # Prettier 配置
├── remix.config.js # Remix 配置
├── remix.env.d.ts # Remix 环境类型定义
├── start.sh # 启动脚本
├── tailwind.config.ts # Tailwind CSS 配置
├── tsconfig.json # TypeScript 配置
└── vitest.config.ts # Vitest 配置
2. 项目的启动文件介绍
entry.client.tsx
客户端入口文件,负责客户端的渲染和状态管理。
entry.server.tsx
服务器入口文件,负责服务器的渲染和数据获取。
root.tsx
根组件,包含应用程序的全局布局和路由配置。
start.sh
启动脚本,用于启动应用程序。
3. 项目的配置文件介绍
remix.config.js
Remix 配置文件,包含路由、构建和其他配置选项。
package.json
项目依赖和脚本配置文件,包含项目的依赖包和各种脚本命令。
fly.toml
Fly 配置文件,用于部署和运行应用程序。
tsconfig.json
TypeScript 配置文件,包含 TypeScript 编译选项。
tailwind.config.ts
Tailwind CSS 配置文件,包含 Tailwind CSS 的配置选项。
prettier.config.js
Prettier 配置文件,用于代码格式化。
eslintrc.js
ESLint 配置文件,用于代码检查。
cypress.config.ts
Cypress 配置文件,用于端到端测试。
vitest.config.ts
Vitest 配置文件,用于单元测试。
通过以上介绍,您可以更好地理解和使用 Remix Indie Stack 项目。希望这份文档对您有所帮助!