全栈启动套件（fullstack-starterkit）使用指南

最新推荐文章于 2024-09-25 08:26:17 发布

雷竹榕

最新推荐文章于 2024-09-25 08:26:17 发布

阅读量323

点赞数 4

本文链接：https://blog.csdn.net/gitblog_01156/article/details/142475849

版权

本指南将引导您深入了解fullstack-starterkit，一个基于GraphQL、Node.js和React，使用TypeScript强力驱动的全栈开发框架。它旨在加速新项目的启动过程，并通过遵循最佳实践来保障项目的可扩展性和易维护性。

fullstack-starterkit项目按照模块化原则设计，确保清晰的逻辑划分：

/backend: 包含后端服务的所有代码。
- packages: 利用Yarn Workspaces进行模块化的包管理，包括db(数据库相关，使用Prisma ORM)、graphql(包含了API定义和类型)。
- config: 存放配置文件，用于数据库连接、服务配置等。
- tests: 单元测试和集成测试文件。
- index.ts: 应用入口点。
/web: 前端React应用程序。
- src: 包括所有前端源码。
  - assets: 静态资源。
  - graphql: 包含自动生成的GraphQL操作和类型。
  - pages: 应用页面组件。
  - components: 公共UI组件。
  - hooks: 自定义React Hooks。
  - theme: 有关主题配置。
- public: 静态资源公开目录。
- index.tsx: React应用入口。
根目录: 包含全局配置文件如.gitignore, package.json, .env.template等，以及脚手架级别的指令。

后端主要通过backend/index.ts作为启动点。通过Docker或本地环境执行不同的命令启动：

前端在web目录下启动，主要通过web/index.tsx与ReactDOM一起加载应用。启动方法分为：

.env: 位于backend和web各自目录下的.env文件用于存放环境变量，例如数据库连接字符串、API密钥等。这些应根据.env.template创建并填写相应值。
package.json: 在根目录及backend、web子目录中都有，定义了项目依赖、脚本命令和开发工具配置。特别是根目录的scripts部分控制着整体构建和部署流程。
config: 后端目录下的config文件夹含有数据库配置等关键设定。
graphql-codegen.yml: 如在backend中可能存在的，用于配置GraphQL代码生成规则，自动化创建TypeScript类型和Apollo客户端所需的查询。