Chapter 1: NX Monorepo Guide
This is Part 2 of our NX Monorepo series. Now that you understand the architecture concepts from Part 1, it's time to put that knowledge into practice by building your own NX workspace from scratch.
Follow along step-by-step with a framework-agnostic guide that works with any tech stack, React, Angular, Vue, Node.js, or any other framework supported by NX plugins.
Prerequisites
Tutorial Content
8 sections • about 2 hours
Welcome to Part 2 of our NX Monorepo series! In Part 1, we covered the architecture concepts and patterns. Now it's time to put that knowledge into practice by building your own NX workspace from scratch.
What We'll Build
By the end of this guide, you'll have created a fully configured NX workspace with:
Open your terminal and run:
This interactive command will guide you through:
my-org)Understanding Presets
| Preset | Command | Best For |
|---|---|---|
| apps | --preset=apps | Empty workspace to add technologies incrementally |
| ts | --preset=ts | Minimal TypeScript setup, maximum flexibility |
| react | --preset=react | React application with Vite or Webpack |
| next | --preset=next | Next.js application |
| express | --preset=express | Express backend application |
| angular | --preset=angular | Angular application |
For this tutorial, we recommend starting with the apps preset for maximum flexibility:
After creation, your workspace looks like this:
Before we start building, let's set up the tools that will make you productive.
1. NX Console (VSCode Extension)
NX Console provides a visual interface for all NX operations:
Ctrl+Shift+X / Cmd+Shift+X)Key features:
2. NX MCP Server (AI Assistant Integration)
If you use AI assistants like Claude or Cursor, the NX MCP Server enables them to understand your workspace:

Source: NX
Recent advancements in AI (like Cursor, Windsurf, and MCP servers) have transformed how we work with monorepos. Nx is uniquely positioned to take advantage of this because:
However, AI is an accelerator, not a pilot.
To get the most out of these tools, you, the developer, must understand the core of Nx. You need to know:
This tutorial is designed to give you that deep knowledge. We aren't just giving you copy-paste commands; we are building your mental model of Nx so you can confidently direct your AI agents to build complex, scalable architectures.
Configure for Claude Desktop (claude_desktop_config.json):
Share this tutorial
About the author
NAB, Lead Engineer
I'm Vu, a Lead Engineer at NAB (National Australia Bank). I started on Home Lending products and now lead a team building for HICAPS, Australia's largest point of sale claiming service for private health insurance. Before NAB, I worked at startups and across a range of teams and stacks.
Upskills is where I share practical, real-world knowledge to help you build and ship projects better. Beyond tutorials, more content is coming: project showcases, interview prep, and AI tools as resources for your learning journey. I'm excited to share what I've learned and keep learning together as we build cool things.
Practical web development deep-dives, every other week, written by an engineer who ships them. No fluff, no hot takes.
We respect your privacy. Unsubscribe anytime.
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/ # Your applications go here├── libs/ # Your libraries go here (created later)├── nx.json # NX workspace configuration├── tsconfig.base.json # Shared TypeScript config & path aliases├── package.json # Dependencies and 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"}}}