ngx-starter-kit DIY Playbook从零手搓全栈Monorepo的完整教程【免费下载链接】ngx-starter-kit:a: Angular :rocket: NestJS :monkey: Starter Kit项目地址: https://gitcode.com/gh_mirrors/ng/ngx-starter-kitngx-starter-kit 是一个基于Angular NestJS PostgreSQL TypeScriptPANTS 技术栈的全栈 Monorepo 启动套件用 Nx 工作区统一管理前端 webapp、后端 API 与 30 个可复用库。本教程带你按官方 DIY Playbook 的思路从零手动搭建这个 Angular 全栈 Monorepo 的完整工程结构帮你彻底搞懂 Nx、Lerna 多包管理和前后端同仓的最佳实践。 一、项目全貌这个 Starter Kit 能给你什么在动手之前先看清这套全栈 Monorepo 的骨架心里才有底。目录角色说明apps/webapp/前端应用Angular 14 NGXS Nebular/Material UIapps/api/后端应用NestJS TypeORM OpenAPI 文档libs/可复用库auth、chat-box、grid、widgets 等 30 个tools/工具链自定义 schematics、构建脚本几个关键配置文件值得先认识根目录package.json定义start、build:prod、e2e、affected:*等全套 npm scriptsnx.jsonNx 工作区缓存与任务编排配置docker-compose.yml一键拉起本地 PostgreSQL 等依赖服务后端说明文档apps/api/README.md 核心理念一份代码库前端、后端、共享库全部同仓管理用 Nx 的依赖图dep graph精确计算哪些模块受影响、只需构建哪些模块。 二、环境准备最小版本清单搭建 Angular 全栈 Monorepo 前先按 DIY Playbook 的要求装好工具链。以下是官方验证过的最低版本软件最低版本是否可选Nodev13.5.0当前项目要求 v17.4.0必需Yarnv1.21.1必需Lernav3.20.2必需Angular CLIv9.0.0必需nrwl/workspacev9.0.0必需nestjs/cliv6.13.2必需commitizenv4.0.3可选安装全局 CLI 后把默认样式设为 SCSS让生成的组件风格统一ng config -g defaults.styleExtscss ng config -g schematics.schematics/angular:component.style scss️ 三、创建工作区最快脚手架步骤1. 创建 Nx 工作区ng new ngx-starter-kit --collectionnrwl/workspace --npm-scopengx-starter-kit \ --presetempty --stylescss --package-manageryarn --strict2. 生成前端应用 webappng g nrwl/angular:app webapp --routing --stylescss --tagsapp-module3. 生成 NestJS 后端应用 aping g nrwl/nest:app api --frontendProjectwebapp --tagsapi-module--frontendProjectwebapp是关键参数——它让 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.jsE2E 测试Cypress配置见apps/webapp/e2e/提交规范commitizen husky commitlint约定式提交 五、生成可复用库libs 目录玩法Monorepo 最大的价值就是库的复用。官方 Playbook 里用一条命令一个库地手搓了 30 多个共享库例如ng g lib ChatBox --tagspublic-module --publishabletrue --defaults -d ng g component chatBox --projectchat-box --flat -d ng g service services/chat --projectchat-box -d--publishabletrue表示该库将来可独立发布到 npm--tagspublic-module则用于区分可共享的内部模块。生成的库结构统一为src/lib/放实现、src/index.ts做统一出口ng-package.json声明打包方式——这正是 Angular 官方库的推荐组织方式。 六、运行、测试与部署开发命令大全场景命令启动前端开发服务器npm run start访问 http://localhost:4200使用 Mock 数据启动npm run start:mock生产构建npm run build:prod单元测试npm run test moduleE2E 测试npm run e2e只测受影响模块npm run affected:test查看依赖图npm run dep-graph打包体积分析ng run webapp:analyzeNx 的affected系列命令是全栈 Monorepo 的杀手锏提交代码后只需重新构建、测试受影响的模块CI 时间可以从十几分钟压缩到一两分钟。❓ 七、常见问题 FAQQ为什么前后端要放一个仓库A共享 TypeScript 类型、统一升级依赖、affected增量构建改一处前后端联调零成本。QNx 和 Lerna 什么关系ANx 管生成 构建 缓存Lerna 管版本 发布 npm 包两者互补lerna.json与nx.json各司其职。Q新手应该先学哪个目录A先看apps/webapp/前端入口→ 再看libs/auth/最小的状态管理示例→ 最后看apps/api/NestJS 后端由浅入深效率最高。Qmock 模式和真实后端区别Astart:mock用angular-in-memory-web-api拦截 HTTP 请求返回假数据数据在apps/webapp/src/app/in-memory-data.service.ts无需启动数据库即可开发前端。 八、总结至此你已经走完了一条从零搭建 Angular NestJS 全栈 Monorepo 的完整路径装工具链Node / Yarn / Nx / NestJS CLI建工作区ng new 生成 webapp、api 两个应用加技术栈NGXS、Nebular、TypeORM抽共享库libs/ 目录 publishable 库跑起来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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 ngx-starter-kit DIY Playbook：从零手搓全栈Monorepo的完整教程
ngx-starter-kit DIY Playbook从零手搓全栈Monorepo的完整教程【免费下载链接】ngx-starter-kit:a: Angular :rocket: NestJS :monkey: Starter Kit项目地址: https://gitcode.com/gh_mirrors/ng/ngx-starter-kitngx-starter-kit 是一个基于Angular NestJS PostgreSQL TypeScriptPANTS 技术栈的全栈 Monorepo 启动套件用 Nx 工作区统一管理前端 webapp、后端 API 与 30 个可复用库。本教程带你按官方 DIY Playbook 的思路从零手动搭建这个 Angular 全栈 Monorepo 的完整工程结构帮你彻底搞懂 Nx、Lerna 多包管理和前后端同仓的最佳实践。 一、项目全貌这个 Starter Kit 能给你什么在动手之前先看清这套全栈 Monorepo 的骨架心里才有底。目录角色说明apps/webapp/前端应用Angular 14 NGXS Nebular/Material UIapps/api/后端应用NestJS TypeORM OpenAPI 文档libs/可复用库auth、chat-box、grid、widgets 等 30 个tools/工具链自定义 schematics、构建脚本几个关键配置文件值得先认识根目录package.json定义start、build:prod、e2e、affected:*等全套 npm scriptsnx.jsonNx 工作区缓存与任务编排配置docker-compose.yml一键拉起本地 PostgreSQL 等依赖服务后端说明文档apps/api/README.md 核心理念一份代码库前端、后端、共享库全部同仓管理用 Nx 的依赖图dep graph精确计算哪些模块受影响、只需构建哪些模块。 二、环境准备最小版本清单搭建 Angular 全栈 Monorepo 前先按 DIY Playbook 的要求装好工具链。以下是官方验证过的最低版本软件最低版本是否可选Nodev13.5.0当前项目要求 v17.4.0必需Yarnv1.21.1必需Lernav3.20.2必需Angular CLIv9.0.0必需nrwl/workspacev9.0.0必需nestjs/cliv6.13.2必需commitizenv4.0.3可选安装全局 CLI 后把默认样式设为 SCSS让生成的组件风格统一ng config -g defaults.styleExtscss ng config -g schematics.schematics/angular:component.style scss️ 三、创建工作区最快脚手架步骤1. 创建 Nx 工作区ng new ngx-starter-kit --collectionnrwl/workspace --npm-scopengx-starter-kit \ --presetempty --stylescss --package-manageryarn --strict2. 生成前端应用 webappng g nrwl/angular:app webapp --routing --stylescss --tagsapp-module3. 生成 NestJS 后端应用 aping g nrwl/nest:app api --frontendProjectwebapp --tagsapi-module--frontendProjectwebapp是关键参数——它让 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.jsE2E 测试Cypress配置见apps/webapp/e2e/提交规范commitizen husky commitlint约定式提交 五、生成可复用库libs 目录玩法Monorepo 最大的价值就是库的复用。官方 Playbook 里用一条命令一个库地手搓了 30 多个共享库例如ng g lib ChatBox --tagspublic-module --publishabletrue --defaults -d ng g component chatBox --projectchat-box --flat -d ng g service services/chat --projectchat-box -d--publishabletrue表示该库将来可独立发布到 npm--tagspublic-module则用于区分可共享的内部模块。生成的库结构统一为src/lib/放实现、src/index.ts做统一出口ng-package.json声明打包方式——这正是 Angular 官方库的推荐组织方式。 六、运行、测试与部署开发命令大全场景命令启动前端开发服务器npm run start访问 http://localhost:4200使用 Mock 数据启动npm run start:mock生产构建npm run build:prod单元测试npm run test moduleE2E 测试npm run e2e只测受影响模块npm run affected:test查看依赖图npm run dep-graph打包体积分析ng run webapp:analyzeNx 的affected系列命令是全栈 Monorepo 的杀手锏提交代码后只需重新构建、测试受影响的模块CI 时间可以从十几分钟压缩到一两分钟。❓ 七、常见问题 FAQQ为什么前后端要放一个仓库A共享 TypeScript 类型、统一升级依赖、affected增量构建改一处前后端联调零成本。QNx 和 Lerna 什么关系ANx 管生成 构建 缓存Lerna 管版本 发布 npm 包两者互补lerna.json与nx.json各司其职。Q新手应该先学哪个目录A先看apps/webapp/前端入口→ 再看libs/auth/最小的状态管理示例→ 最后看apps/api/NestJS 后端由浅入深效率最高。Qmock 模式和真实后端区别Astart:mock用angular-in-memory-web-api拦截 HTTP 请求返回假数据数据在apps/webapp/src/app/in-memory-data.service.ts无需启动数据库即可开发前端。 八、总结至此你已经走完了一条从零搭建 Angular NestJS 全栈 Monorepo 的完整路径装工具链Node / Yarn / Nx / NestJS CLI建工作区ng new 生成 webapp、api 两个应用加技术栈NGXS、Nebular、TypeORM抽共享库libs/ 目录 publishable 库跑起来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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考