React Academy · Lesson

Nx Affected Commands & Caching

Run only tests and builds affected by a change, and speed up CI with Nx Cloud distributed caching.

Nx Affected Commands & Caching is a free React Academy lesson on CoddyKit — lesson 3 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.

The Affected Concept

Nx tracks the dependency graph of your monorepo. When you change a file, Nx computes which projects are affected (directly modified or depend on modified projects) and runs tasks only for those.

Running Affected Tests

Run tests only for projects affected by changes since the main branch.

# Compare to main branch:
npx nx affected --target=test --base=origin/main --head=HEAD

# Shorthand (uses nx.json defaultBase):
npx nx affected --target=test

Running Affected Builds

Build only affected projects — essential for CI to avoid rebuilding the entire monorepo on every PR.

npx nx affected --target=build

# With parallel workers:
npx nx affected --target=build --parallel=3

Affected Lint and E2E

Apply the same pattern to linting and E2E tests.

npx nx affected --target=lint
npx nx affected --target=e2e

How Nx Determines What Is Affected

Nx hashes all source files, package.json files, and config files. A project is affected if any of its own files changed, or if any project it imports from changed.

Local Computation Cache

Nx caches task outputs (build artifacts, test results) in .nx/cache. Running the same task with unchanged inputs restores from cache instantly — outputs, even terminal logs, are replayed.

# First run (builds):
$ npx nx build web  → Builds in 28s, cached

# Second run (no changes):
$ npx nx build web  → Cache hit! [existing outputs match] 0ms

# Clear cache if needed:
$ npx nx reset

Nx Cloud Remote Cache

Nx Cloud shares the cache across team members and CI. If a colleague already built a project with the same inputs, your CI hits the remote cache instead of rebuilding — even on a fresh machine.

# Connect workspace to Nx Cloud:
npx nx connect-to-nx-cloud

# Set CI environment variable:
# NX_CLOUD_ACCESS_TOKEN=<token>

Cache Inputs Configuration

Configure which files are cache inputs for a target in project.json. Exclude files that don't affect build output (e.g., README, test fixtures) to maximize cache hits.

// project.json
{
  "targets": {
    "build": {
      "inputs": [
        "default",  // source files
        "^default"  // upstream dependency source files
      ],
      "outputs": ["{workspaceRoot}/dist/apps/web"]
    }
  }
}

Task Distribution (Nx Agents)

Nx Cloud Agents distribute affected tasks across multiple CI machines in parallel, dramatically reducing CI wall-clock time for large monorepos.

Nx Console VS Code Extension

The Nx Console extension provides a GUI for running Nx commands, visualizing the project graph, and generating code — without memorizing CLI flags.

Visualizing the Task Graph

nx graph --task=build shows the task dependency graph including which tasks depend on which other tasks — helpful for understanding build order.

npx nx graph --task=build

Quick Check

What determines whether an Nx task is a cache hit?

Recap

nx affected --target=X runs tasks only for changed projects and their dependents. Nx caches outputs by hashing inputs — replaying results instantly. Nx Cloud extends this to a shared remote cache across machines. Use --parallel=N to run tasks concurrently for faster CI.

Frequently asked questions

Is the “Nx Affected Commands & Caching” lesson free?

Yes — the full text of “Nx Affected Commands & Caching” 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 “Nx Affected Commands & Caching”?

Run only tests and builds affected by a change, and speed up CI with Nx Cloud distributed caching. 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 3 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Nx Affected Commands & Caching” 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