企业官网建设流程全解析

ngx-starter-kit DIY Playbook：从零手搓全栈Monorepo的完整教程

【免费下载链接】ngx-starter-kit:a: Angular :rocket: NestJS :monkey: Starter Kit项目地址: https://gitcode.com/gh_mirrors/ng/ngx-starter-kit

ngx-starter-kit 是一个基于Angular + NestJS + PostgreSQL + TypeScript（PANTS 技术栈）的全栈 Monorepo 启动套件，用 Nx 工作区统一管理前端 webapp、后端 API 与 30+ 个可复用库。本教程带你按官方 DIY Playbook 的思路，从零手动搭建这个 Angular 全栈 Monorepo 的完整工程结构，帮你彻底搞懂 Nx、Lerna 多包管理和前后端同仓的最佳实践。

🧭 一、项目全貌：这个 Starter Kit 能给你什么？

在动手之前，先看清这套全栈 Monorepo 的骨架，心里才有底。

几个关键配置文件值得先认识：

• 根目录package.json：定义start、build:prod、e2e、affected:*等全套 npm scripts
• nx.json：Nx 工作区缓存与任务编排配置
• docker-compose.yml：一键拉起本地 PostgreSQL 等依赖服务
• 后端说明文档：apps/api/README.md

💡 核心理念：一份代码库，前端、后端、共享库全部同仓管理，用 Nx 的依赖图（dep graph）精确计算"哪些模块受影响、只需构建哪些模块"。

📋 二、环境准备：最小版本清单

搭建 Angular 全栈 Monorepo 前，先按 DIY Playbook 的要求装好工具链。以下是官方验证过的最低版本：

安装全局 CLI 后，把默认样式设为 SCSS，让生成的组件风格统一：

ng config -g defaults.styleExt=scss ng config -g schematics.@schematics/angular:component.style scss

🏗️ 三、创建工作区：最快脚手架步骤

1. 创建 Nx 工作区

ng new ngx-starter-kit --collection=@nrwl/workspace --npm-scope=ngx-starter-kit \ --preset=empty --style=scss --package-manager=yarn --strict

2. 生成前端应用 webapp

ng g @nrwl/angular:app webapp --routing --style=scss --tags=app-module

3. 生成 NestJS 后端应用 api

ng g @nrwl/nest:app api --frontendProject=webapp --tags=api-module

--frontendProject=webapp是关键参数——它让 Nx 知道 api 依赖 webapp，从而在依赖图中自动建立前后端关系。

4. 直接克隆现成项目（省时方案）

如果只想先跑起来再研究结构，可以克隆仓库对照源码学习：

git clone https://gitcode.com/gh_mirrors/ng/ngx-starter-kit my-project cd my-project npm install --force

📦 四、添加核心技术栈：依赖一把梭

状态管理与 UI

# NGXS 状态管理 yarn add @ngxs/store @ngxs/router-plugin @ngxs/form-plugin @ngxs/storage-plugin # Nebular UI 主题 ng add @nebular/theme

后端增强

apps/api/README.md中列出了后端的完整技术选型：TypeORM 做 ORM、@nestjsx/crud 标准化 REST 接口、Swagger 自动生成 API 文档、Jest + SuperTest 做接口测试。本地开发可用 Docker 一键起数据库：

docker-compose up postgres

测试与质量

• 单元测试：Jest（每个项目根下的jest.config.js）
• E2E 测试：Cypress，配置见apps/webapp/e2e/
• 提交规范：commitizen + husky + commitlint（约定式提交）

📚 五、生成可复用库：libs 目录玩法

Monorepo 最大的价值就是库的复用。官方 Playbook 里用一条命令一个库地"手搓"了 30 多个共享库，例如：

ng g lib ChatBox --tags=public-module --publishable=true --defaults -d ng g component chatBox --project=chat-box --flat -d ng g service services/chat --project=chat-box -d

--publishable=true表示该库将来可独立发布到 npm；--tags=public-module则用于区分可共享的内部模块。生成的库结构统一为src/lib/放实现、src/index.ts做统一出口，ng-package.json声明打包方式——这正是 Angular 官方库的推荐组织方式。

🚀 六、运行、测试与部署：开发命令大全

Nx 的affected系列命令是全栈 Monorepo 的"杀手锏"：提交代码后只需重新构建、测试受影响的模块，CI 时间可以从十几分钟压缩到一两分钟。

❓ 七、常见问题 FAQ

Q：为什么前后端要放一个仓库？A：共享 TypeScript 类型、统一升级依赖、affected增量构建，改一处前后端联调零成本。

Q：Nx 和 Lerna 什么关系？A：Nx 管"生成 + 构建 + 缓存"，Lerna 管"版本 + 发布 npm 包"，两者互补，lerna.json与nx.json各司其职。

Q：新手应该先学哪个目录？A：先看apps/webapp/（前端入口）→ 再看libs/auth/（最小的状态管理示例）→ 最后看apps/api/（NestJS 后端），由浅入深效率最高。

Q：mock 模式和真实后端区别？A：start:mock用angular-in-memory-web-api拦截 HTTP 请求返回假数据（数据在apps/webapp/src/app/in-memory-data.service.ts），无需启动数据库即可开发前端。

🎯 八、总结

至此，你已经走完了一条从零搭建 Angular + NestJS 全栈 Monorepo 的完整路径：

1. 装工具链（Node / Yarn / Nx / NestJS CLI）
2. 建工作区（ng new+ 生成 webapp、api 两个应用）
3. 加技术栈（NGXS、Nebular、TypeORM）
4. 抽共享库（libs/ 目录 + publishable 库）
5. 跑起来（affected 增量构建 + Docker 起数据库）

想继续深入，建议精读docs/introduction/playbook.md中的完整步骤，以及docs/目录下的概念文档（concepts/state、store、select），把 NGXS 的状态管理思想吃透，这套 Starter Kit 才能真正变成你的生产力工具。

【免费下载链接】ngx-starter-kit:a: Angular :rocket: NestJS :monkey: Starter Kit项目地址: https://gitcode.com/gh_mirrors/ng/ngx-starter-kit