Xây dựng NX Workspace

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:

• Nhiều applications
• Shared libraries với boundaries phù hợp
• Caching và task pipelines được tối ưu hóa
• Một foundation sẵn sàng cho bất kỳ tech stack nào

Tạo Workspace đầu tiên của bạn

Mở terminal và chạy lệnh:

npx create-nx-workspace@latest

Lệnh interactive này sẽ hướng dẫn bạn qua các bước:

1. Workspace name - Đây sẽ là root directory của bạn (ví dụ: my-org)
2. Package manager - npm, yarn, hoặc pnpm
3. Preset - Chọn dựa trên nhu cầu của bạn (xem bên dưới)
4. CI provider - Tùy chọn GitHub Actions, CircleCI, v.v.
5. Remote caching - NX Cloud để collaboration trong team

Hiểu về Presets

Trong tutorial này, chúng ta recommend bắt đầu với apps preset để có sự linh hoạt tối đa:

npx create-nx-workspace@latest my-org --preset=apps

Cấu trúc Workspace ban đầu

Sau khi tạo, workspace của bạn sẽ trông như thế này:

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

Setup Tooling cần thiết

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:

1. Mở VSCode Extensions (Ctrl+Shift+X / Cmd+Shift+X)
2. Tìm kiếm "Nx Console"
3. Cài đặt official extension từ Nrwl

Các tính năng chính:

• Project tree trực quan với quick actions
• Form-based generator UI hiển thị tất cả options
• Integrated task runner
• Project graph visualization

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:

# Install globally
npm install -g nx-mcp

# Or add to your project
npm install -D nx-mcp

Nx trong kỷ nguyên AI

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 có vị thế độc đáo để tận dụng điều này vì:

1. Context & Metadata: Nx cung cấp sự hiểu biết sâu sắc về project graph của bạn, giúp AI điều hướng và hiểu các mối quan hệ tốt hơn so với trong polyrepos.
2. Consistency: Generators và boundaries nghiêm ngặt giúp AI tạo ra code tuân thủ các patterns của tổ chức bạn.
3. Reliability: Khả năng dry-run generators cho phép AI "suy nghĩ trước khi hành động," giảm thiểu lỗi.

Tuy nhiên, chúng ta không thể chỉ dựa vào AI.

Để thực sự tận dụng các công cụ này, ta phải hiểu các cốt lõi quan trọng của Nx:

• Cách đọc Project Graph để verify sự hiểu biết của AI.
• Cách cấu hình task pipelines để AI không làm hư build chain của bạn.
• Cú pháp của generators để sửa AI khi nó đi lệch hướng.

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):

{
  "mcpServers": {
    "nx-mcp": {
      "command": "npx",
      "args": ["-y", "nx-mcp"],
      "cwd": "/path/to/your/nx-workspace"
    }
  }
}