Upskills Community
Upskills
upskills.dev
Join our community on Discord to get help about the tutorials and ask your questions.
@upskillsdev
Checkout our GitHub to find the source code and submit any issues or feature requests.
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 • approximately 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 leverage this because:
However, AI is an accelerator, not a pilot.
To truly leverage these tools, you—the developer—must understand the vital 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):
Section 1: Creating Your Workspace
About the author
NAB, Software Engineer
Hi, I'm Vu, a Software Engineer at NAB (National Australia Bank) with a love for creating web and mobile apps that don't just look cool but feel great to use. I've had the chance to work with some awesome companies over the years, picking up new tricks and tackling many kinds of challenges along the way.
Now, I'm thrilled to share what I've learned and help others through fun, interactive coding tutorials!
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/│ │ └── feature-settings/│ ├── ui/ # Shared UI components│ │ └── src/│ │ ├── button/│ │ ├── card/│ │ └── modal/│ ├── shared/ # Shared types, utils, constants│ │ └── src/│ │ ├── types/│ │ ├── utils/│ │ └── constants/│ └── db/ # Database layer│ └── src/│ ├── prisma/│ └── queries/│├── tools/ # Custom scripts and generators├── nx.json # NX workspace configuration├── tsconfig.base.json # Path aliases configuration└── package.json # Dependencies and scripts
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"}}}