React Academy · Lesson

Creating an Nx Monorepo with React Apps

Scaffold an Nx workspace, add React apps, and understand the project graph.

Creating an Nx Monorepo with React Apps is a free React Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the React Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Why Nx?

Nx is a smart build system for monorepos. It provides affected-based task running (only build/test what changed), caching (never rerun unchanged tasks), and generators for scaffolding apps and libraries.

Creating a New Nx Workspace

Scaffold a new Nx workspace pre-configured for React.

# Create workspace:
npx create-nx-workspace@latest myorg --preset=react-monorepo
# or for Next.js:
npx create-nx-workspace@latest myorg --preset=next

Workspace Structure

Nx organizes code into apps/ (deployable applications) and libs/ (shared libraries). Each project has its own project.json with task targets.

myorg/
  apps/
    web/           # React SPA
    admin/         # Admin React SPA
    api/           # NestJS backend
  libs/
    ui/            # shared UI components
    data-access/   # data fetching hooks
    utils/         # shared utilities
  nx.json          # workspace config
  package.json     # single package.json

Adding a React App

Use the Nx React generator to add a new app with all configuration pre-wired.

# Add a new React app:
npx nx generate @nx/react:app customer-portal

# Add a Next.js app:
npx nx generate @nx/next:app marketing

Running Tasks

Run build, test, lint, and serve for individual projects or all projects.

# Serve a specific app:
npx nx serve web

# Build all apps:
npx nx run-many --target=build --all

# Test a specific library:
npx nx test ui

Project Graph

nx graph opens an interactive visualization of all apps and libraries and their dependencies — see which projects depend on which libs.

npx nx graph

Nx Caching

Nx caches task outputs locally. Rerunning an unchanged task hits the cache instantly. Nx Cloud extends caching to a remote cache shared across team members and CI.

# First run: builds and caches
npx nx build web  # ~30s

# Second run (no changes): cache hit
npx nx build web  # <1s — served from cache

Task Pipelines

Define task dependencies in nx.json. Running build automatically runs build for all upstream dependencies first.

// nx.json
{
  "targetDefaults": {
    "build": {
      "dependsOn": ["^build"], // run dependency builds first
      "cache": true
    },
    "test": {
      "cache": true
    }
  }
}

Tags for Enforcement

Tag projects (e.g., scope:ui, type:app) and use ESLint rules to prevent apps from importing other apps' internal code.

// project.json
{
  "tags": ["scope:web", "type:app"]
}

// .eslintrc.json
{
  "rules": {
    "@nx/enforce-module-boundaries": ["error", {
      "depConstraints": [
        { "sourceTag": "type:app", "onlyDependOnLibsWithTags": ["type:lib"] }
      ]
    }]
  }
}

TypeScript Path Aliases

Nx automatically configures tsconfig.base.json with path aliases so you import shared libs as @myorg/ui instead of deep relative paths.

// tsconfig.base.json (auto-generated)
{
  "compilerOptions": {
    "paths": {
      "@myorg/ui": ["libs/ui/src/index.ts"],
      "@myorg/utils": ["libs/utils/src/index.ts"]
    }
  }
}

// Usage in apps:
import { Button } from '@myorg/ui';

Quick Check

What does nx affected --target=build do in an Nx monorepo?

Recap

Create an Nx workspace with create-nx-workspace. Use nx generate for apps and libs, nx serve/build/test for tasks, and nx affected in CI to only process changed projects. Caching ensures unchanged tasks return instantly.

Frequently asked questions

Is the “Creating an Nx Monorepo with React Apps” lesson free?

Yes — the full text of “Creating an Nx Monorepo with React Apps” is free to read here on the web, and the React Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the React Academy course, upgrade to CoddyKit PRO.

What will I learn in “Creating an Nx Monorepo with React Apps”?

Scaffold an Nx workspace, add React apps, and understand the project graph. You practise React Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start React Academy?

No prior experience is required. React Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Creating an Nx Monorepo with React Apps” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this React Academy lesson?

Yes. Every React Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to React Academy