Chương 1: NX Monorepo Guide
Đây là Phần 2 của series NX Monorepo. Sau khi hiểu các concepts kiến trúc từ Phần 1, giờ là lúc áp dụng kiến thức đó bằng cách xây dựng NX workspace của riêng bạn từ đầu.
Làm theo từng bước với hướng dẫn framework-agnostic hoạt động với bất kỳ tech stack nào, React, Angular, Vue, Node.js, hoặc bất kỳ framework nào được hỗ trợ bởi NX plugins.
Yêu cầu
Nội dung bài hướng dẫn
8 phần • khoảng 2 giờ
Chào mừng đến với Phần 2 của series NX Monorepo! Trong Phần 1, chúng ta đã cover các architecture concepts và patterns. Giờ là lúc đưa kiến thức đó vào thực tế bằng cách build NX workspace của riêng bạn từ đầu.
Chúng ta sẽ Build gì
Đến cuối hướng dẫn này, bạn sẽ tạo được một NX workspace được cấu hình đầy đủ với:
Mở terminal và chạy lệnh:
Lệnh interactive này sẽ hướng dẫn bạn qua các bước:
my-org)Hiểu về Presets
| Preset | Lệnh | Phù hợp nhất cho |
|---|---|---|
| apps | --preset=apps | Workspace trống để thêm technologies dần dần |
| ts | --preset=ts | TypeScript setup tối thiểu, linh hoạt tối đa |
| react | --preset=react | React application với Vite hoặc Webpack |
| next | --preset=next | Next.js application |
| express | --preset=express | Express backend application |
| angular | --preset=angular | Angular application |
Trong tutorial này, chúng ta recommend bắt đầu với apps preset để có sự linh hoạt tối đa:
Sau khi tạo, workspace của bạn sẽ trông như thế này:
Trước khi bắt đầu build, hãy setup các tools giúp bạn productive hơn.
1. NX Console (VSCode Extension)
NX Console cung cấp giao diện trực quan cho tất cả các NX operations:
Ctrl+Shift+X / Cmd+Shift+X)Các tính năng chính:
2. NX MCP Server (AI Assistant Integration)
Nếu bạn sử dụng AI assistants như Claude hoặc Cursor, NX MCP Server cho phép chúng hiểu workspace của bạn:

Nguồn: NX
Những tiến bộ gần đây trong AI (như Cursor, Windsurf, và MCP servers) đã thay đổi cách chúng ta làm việc với monorepos. Nx phù hợp để dùng cùng AI vì:
Tuy nhiên, chúng ta không thể chỉ dựa vào AI.
Để dùng tốt các công cụ này, ta phải hiểu phần cốt lõi của Nx:
Tutorial này được thiết kế để cung cấp cho bạn kiến thức sâu sắc đó. Chúng tôi không chỉ đưa cho bạn các lệnh copy-paste; chúng ta đang xây dựng mental model về Nx để bạn có thể tự tin chỉ đạo các AI agents xây dựng các architectures phức tạp, scalable.
Cấu hình cho Claude Desktop (claude_desktop_config.json):
Chia sẻ với mọi người
Về tác giả
NAB, Lead Engineer
Mình là Vũ, hiện là Lead Engineer ở NAB (National Australia Bank). Mình bắt đầu ở mảng Home Lending, giờ đang lead một team làm sản phẩm cho HICAPS, dịch vụ point-of-sale claiming bảo hiểm sức khỏe tư nhân lớn nhất ở Úc. Trước NAB, mình từng làm ở các startup và nhiều team khác với đa dạng stack.
Upskills là nơi mình chia sẻ những kiến thức thực tế từ công việc, để giúp bạn build và ship dự án tốt hơn. Ngoài tutorial, sắp tới sẽ có thêm nhiều nội dung: project showcase, interview prep, và các AI tool, như những resource cho hành trình học của bạn. Mình rất vui được chia sẻ những kiến thức và kinh nghiệm đã học được trong suốt quá trình làm việc, và có thể chia sẻ thêm nhiều điều thú vị cùng nhau khi chúng ta tiếp tục build những thứ hay ho.
Các bài deep-dive về web development thực tế, một đến hai tuần một số, viết bởi engineer thực sự có kinh nghiệm build sản phẩm. Không sáo rỗng, không câu view.
Chúng tôi tôn trọng quyền riêng tư. Hủy đăng ký bất cứ lúc nào.
monorepo/├── apps/ # Thin, deployable entry points│ ├── web-app/ # Main Web App│ ├── mobile-app/ # Main Mobile app│ ├── api-server/ # Nodejs Backend API│ └── admin-dashboard/ # Admin App│├── libs/ # Where the actual code lives│ ├── web-modules/ # App-specific feature modules│ │ └── src/│ │ ├── feature-auth/│ │ ├── feature-dashboard/
npx create-nx-workspace@latest
npx create-nx-workspace@latest my-org --preset=apps
my-org/├── apps/ # Applications của bạn nằm ở đây├── libs/ # Libraries của bạn nằm ở đây (sẽ tạo sau)├── nx.json # NX workspace configuration├── tsconfig.base.json # Shared TypeScript config & path aliases├── package.json # Dependencies và scripts└── .gitignore
# Install globallynpm install -g nx-mcp# Or add to your projectnpm install -D nx-mcp
{"mcpServers": {"nx-mcp": {"command": "npx","args": ["-y", "nx-mcp"],"cwd": "/path/to/your/nx-workspace"}}}