nx-monorepo

Nx Monorepo

Overview

Provides guidance for Nx monorepo management in TypeScript/JavaScript projects. Covers workspace creation, project generation, task execution, caching strategies, Module Federation, and CI/CD integration.

When to Use

Use this skill when:

• Creating a new Nx workspace or initializing Nx in an existing project
• Generating applications, libraries, or components with Nx generators
• Running affected commands or executing tasks across multiple projects
• Setting up CI/CD pipelines for Nx projects (GitHub Actions, CircleCI, etc.)
• Configuring Module Federation with React or Next.js
• Implementing NestJS backend applications within Nx
• Managing TypeScript package libraries with buildable and publishable libs
• Setting up remote caching or Nx Cloud
• Optimizing monorepo build times and caching strategies
• Debugging dependency graph issues or circular dependencies

Trigger phrases: "create Nx workspace", "Nx monorepo", "generate Nx app", "Nx affected", "Nx CI/CD", "Module Federation Nx", "Nx Cloud"

Instructions

Workspace Creation

1. Create a new workspace with interactive setup:

   npx create-nx-workspace@latest
   

   Follow prompts to select preset (Integrated, Standalone, Package-based) and framework stack.

2. Initialize Nx in an existing project:

   nx@latest init
   

3. Create with specific preset (non-interactive):

   npx create-nx-workspace@latest my-workspace --preset=react
   

   Verify: nx show projects lists the new workspace projects

Project Generation

1. Generate a React application:

   nx g @nx/react:app my-app
   

2. Generate a library:

   # React library
   nx g @nx/react:lib my-lib
   
   # TypeScript library
   nx g @nx/js:lib my-util
   

   Verify: nx show projects lists the new lib

3. Generate a component in lib:

   nx g @nx/react:component my-comp --project=my-lib
   

4. Generate NestJS backend:

   nx g @nx/nest:app my-api
   

   Verify: nx show projects lists my-api and nx run my-api:build succeeds