Using Nx on an existing React and NPM workspace based monorepo

In this quick walkthrough, you’ll learn how to drop Nx into an existing npm or pnpm workspace and immediately benefit from project graph visualization, caching, and smart task orchestration, all without rewriting your setup.

You’ll start with a standard React monorepo containing a Vite app, a UI package, and utility functions. Then, using a single command (nx init), you’ll initialize Nx and see how it auto-detects your existing scripts, builds a dependency graph, and enables advanced features like affected commands and local caching.

We're also going to explore optional enhancements using Nx plugins for Vite and React. You’ll see how they help Nx infer tasks directly from your Vite config files, improve DX with the Nx Console VS Code extension, and leverage Nx plugin generators to scaffold code with a consistent structure.

What you’ll learn

• How to initialize Nx in an existing npm or pnpm monorepo
• How Nx understands your workspace structure and scripts
• How local caching and affected builds speed up development
• How optional Nx plugins improve DX without adding bloat
• How to scaffold new packages