Nx React Repository

✨ A repository showcasing key Nx features for React monorepos ✨

📦 Project Overview

This repository demonstrates a production-ready React monorepo with:

• 2 Applications

  • shop - React e-commerce application with product listings and detail views
  • api - Backend API serving product data

• 7 Libraries

  • @org/shop-feature-products - Product listing feature (React)
  • @org/shop-feature-product-detail - Product detail feature (React)
  • @org/shop-data - Data access layer for shop features
  • @org/shop-shared-ui - Shared UI components
  • @org/models - Shared data models
  • @org/api-products - API product service library
  • @org/shared-test-utils - Shared testing utilities

• E2E Testing

  • shop-e2e - Playwright tests for the shop application

🚀 Quick Start

# Clone the repository
git clone <your-fork-url>
cd <your-repository-name>

# Install dependencies
npx install

# Serve the React shop application (this will simultaneously serve the API backend)
npx nx serve shop

# ...or you can serve the API separately
npx nx serve api

# Build all projects
npx nx run-many -t build

# Run tests
npx nx run-many -t test

# Lint all projects
npx nx run-many -t lint

# Run e2e tests
npx nx e2e shop-e2e

# Run tasks in parallel

npx nx run-many -t lint test build e2e --parallel=3

# Visualize the project graph
npx nx graph

⭐ Featured Nx Capabilities

This repository showcases several powerful Nx features:

1. 🔒 Module Boundaries

Enforces architectural constraints using tags. Each project has specific dependencies it can use:

• scope:shared - Can be used by all projects
• scope:shop - Shop-specific libraries
• scope:api - API-specific libraries
• type:feature - Feature libraries
• type:data - Data access libraries
• type:ui - UI component libraries

Try it out:

# See the current project graph and boundaries
npx nx graph

# View a specific project's details
npx nx show project shop --web

Learn more about module boundaries →

2. 🎭 Playwright E2E Testing

End-to-end testing with Playwright is pre-configured:

# Run e2e tests
npx nx e2e shop-e2e

# Run e2e tests in CI mode
npx nx e2e-ci shop-e2e

Learn more about E2E testing →

3. ⚡ Vitest for Unit Testing

Fast unit testing with Vitest for React libraries:

# Test a specific library
npx nx test shop-data

# Test all projects
npx nx run-many -t test

Learn more about Vite testing →

4. 🔧 Self-Healing CI

The CI pipeline includes nx fix-ci which automatically identifies and suggests fixes for common issues:

# In CI, this command provides automated fixes
npx nx fix-ci

This feature helps maintain a healthy CI pipeline by automatically detecting and suggesting solutions for:

• Missing dependencies
• Incorrect task configurations
• Cache invalidation issues
• Common build failures

Learn more about self-healing CI →

📁 Project Structure

├── apps/
│   ├── shop/           [scope:shop]    - React e-commerce app
│   ├── shop-e2e/                       - E2E tests for shop
│   └── api/            [scope:api]     - Backend API
├── libs/
│   ├── shop/
│   │   ├── feature-products/        [scope:shop,type:feature] - Product listing
│   │   ├── feature-product-detail/  [scope:shop,type:feature] - Product details
│   │   ├── data/                    [scope:shop,type:data]    - Data access
│   │   └── shared-ui/               [scope:shop,type:ui]      - UI components
│   ├── api/
│   │   └── products/    [scope:api]    - Product service
│   └── shared/
│       ├── models/      [scope:shared,type:data] - Shared models
│       └── test-utils/  [scope:shared]           - Testing utilities
├── nx.json             - Nx configuration
├── tsconfig.json       - TypeScript configuration
└── eslint.config.mjs   - ESLint with module boundary rules

🏷️ Understanding Tags

This repository uses tags to enforce module boundaries:

Project	Tags	Can Import From
shop	scope:shop	scope:shop, scope:shared
api	scope:api	scope:api, scope:shared
shop-feature-products	scope:shop, type:feature	scope:shop, scope:shared
shop-data	scope:shop, type:data	scope:shared
models	scope:shared, type:data	Nothing (base library)

📚 Useful Commands

# Project exploration
npx nx graph                                    # Interactive dependency graph
npx nx list                                     # List installed plugins
npx nx show project shop --web                 # View project details

# Development
npx nx serve shop                              # Serve React app
npx nx serve api                               # Serve backend API
npx nx build shop                              # Build React app
npx nx test shop-data                          # Test a specific library
npx nx lint shop-feature-products              # Lint a specific library

# Running multiple tasks
npx nx run-many -t build                       # Build all projects
npx nx run-many -t test --parallel=3          # Test in parallel
npx nx run-many -t lint test build            # Run multiple targets

# Affected commands (great for CI)
npx nx affected -t build                       # Build only affected projects
npx nx affected -t test                        # Test only affected projects

🎯 Adding New Features

Generate a new React application:

npx nx g @nx/react:app my-app

Generate a new React library:

npx nx g @nx/react:lib my-lib

Generate a new React component:

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

Generate a new API library:

npx nx g @nx/node:lib my-api-lib

You can use npx nx list to see all available plugins and npx nx list <plugin-name> to see all generators for a specific plugin.

Nx Cloud

Nx Cloud ensures a fast and scalable CI pipeline. It includes features such as:

• Remote caching
• Task distribution across multiple machines
• Automated e2e test splitting
• Task flakiness detection and rerunning

Install Nx Console

Nx Console is an editor extension that enriches your developer experience. It lets you run tasks, generate code, and improves code autocompletion in your IDE. It is available for VSCode and IntelliJ.

Install Nx Console »

🔗 Learn More

• Nx Documentation
• React Monorepo Tutorial
• Module Boundaries
• Docker Integration
• Playwright Testing
• Vite with React
• Nx Cloud
• Releasing Packages

💬 Community

Join the Nx community:

• Discord
• X (Twitter)
• LinkedIn
• YouTube
• Blog