A complete point-wise Nx guide for beginners and experienced developers covering monorepos, workspace structure, nx.json, caching, affected commands, Nx Cloud, generators, executors, module boundaries, and CI.
Published: Jan 2019 Updated: May 2026
@nx/* packages for new work instead of older @nrwl/* packages.| Topic | Monorepo with Nx | Polyrepo |
|---|---|---|
| Repository | Many apps and libraries live in one repository. | Each app or package usually has its own repository. |
| Shared code | Shared directly through workspace libraries. | Shared by publishing packages or copying logic. |
| Cross-project change | One atomic commit can update app and library together. | Changes often need multiple pull requests across repos. |
| Tooling | Commands, linting, tests, builds, and versions stay consistent. | Tooling and versions can drift over time. |
| CI | Nx can run only affected projects and replay cached outputs. | CI often rebuilds more than necessary. |
| Dependency versions | Teams can keep one dependency version policy. | Different repos may use different versions. |
| Feature | Meaning | Why it matters |
|---|---|---|
| Smart Caching | Nx stores task outputs by input hash. | Repeated builds, tests, and lint runs become much faster. |
| Affected Commands | Nx finds projects touched by a change. | CI runs only the work that can be impacted. |
| Project Graph | Visual map of apps, libraries, and dependencies. | Teams can understand architecture and import relationships. |
| Nx Agents | Distributed CI workers from Nx Cloud. | Large pipelines run across multiple machines. |
| Atomizer | Splits large test work into smaller tasks. | Long e2e or unit test suites finish faster in CI. |
| Project Crystal | Plugins infer tasks from config files. | Less manual target configuration is needed. |
| Flakiness Detection | Nx Cloud can identify unstable tasks. | CI failures become easier to diagnose. |
nx graph.myworkspace/
apps/
web/
api/
libs/
shared/ui/
shared/data-access/
feature/auth/
tools/
nx.json
package.json
tsconfig.base.jsonapps/: deployable applications such as Angular apps, React apps, APIs, and e2e projects.libs/: reusable libraries used by one or more apps.tools/: workspace scripts, custom generators, and automation utilities.nx.json: workspace-level Nx configuration.package.json: dependencies and npm scripts.tsconfig.base.json: TypeScript base config and path aliases such as @myorg/shared-ui.The nx.json file controls caching, named inputs, task pipelines, target defaults, plugins, and the default base branch.
{
"$schema": "./node_modules/nx/schemas/nx-schema.json",
"defaultBase": "main",
"namedInputs": {
"default": ["{projectRoot}/**/*", "sharedGlobals"],
"production": ["default", "!{projectRoot}/**/*.spec.ts"]
},
"targetDefaults": {
"build": {
"dependsOn": ["^build"],
"inputs": ["production", "^production"],
"cache": true
},
"test": {
"inputs": ["default", "^production"],
"cache": true
},
"lint": {
"inputs": ["default"],
"cache": true
}
},
"plugins": [
"@nx/angular/plugin",
"@nx/eslint/plugin"
]
}defaultBase: branch used by affected commands when no base is passed.namedInputs: reusable groups of files used for cache hashing.targetDefaults: default behavior for build, test, lint, and custom targets.dependsOn: ["^build"]: build dependencies first.cache: true: allows Nx to cache and replay the task output.| Library type | Responsibility | Example |
|---|---|---|
| Feature | Business workflows, route screens, smart/container components. | libs/feature-auth |
| UI | Presentational components with no business logic. | libs/shared/ui |
| Data Access | API calls, services, state management, repositories, DTO mapping. | libs/shared/data-access |
| Utility | Pure helpers, constants, validators, types, formatters. | libs/shared/utils |
| API / Node | Backend libraries, DTOs, server utilities, contracts. | libs/api/orders |
# Angular workspace
npx create-nx-workspace@latest myworkspace --preset=angular
# React workspace
npx create-nx-workspace@latest myworkspace --preset=react
# Empty workspace
npx create-nx-workspace@latest myworkspace --preset=emptynpx nx@latest initnpm install --save-dev @nx/angular
npm install --save-dev @nx/react
npm install --save-dev @nx/node
npm install --save-dev @nx/express
npm install --save-dev @nx/nest
npm install --save-dev @nx/nextnx g @nx/angular:application myapp
nx g @nx/angular:library mylib
nx g @nx/react:application my-react-app
nx g @nx/node:application my-api| Command | Use |
|---|---|
nx serve myapp | Serve an app locally. |
nx build myapp | Build an app. |
nx test myapp | Run tests for a project. |
nx lint myapp | Lint a project. |
nx graph | Open dependency graph. |
nx show projects | List all projects. |
nx run-many --target=build | Run build for all or selected projects. |
nx migrate latest | Migrate Nx and plugins to the latest version. |
npx nx connect | Connect workspace to Nx Cloud. |
nx reset | Clear local cache and reset the Nx daemon. |
Nx compares your current branch with a base branch, finds changed files, walks the project graph, and runs tasks only for projects that are directly or indirectly impacted.
nx affected --target=build
nx affected --target=test
nx affected --target=lint
nx affected --target=build --base=main
nx affected --target=build --base=HEAD~1
nx affected:graph
nx affected --target=build --parallel=3| Cache type | Meaning | Benefit |
|---|---|---|
| Local cache | Stored on your machine, usually under .nx/cache. | Repeated local tasks can replay instantly. |
| Remote cache | Shared through Nx Cloud. | Team members and CI can reuse each other's task outputs. |
| Task hash | Hash created from source files, config, dependencies, and inputs. | Nx knows when cached output is still valid. |
| Cache replay | Nx restores terminal output and generated files. | Fast feedback without rerunning deterministic work. |
{
"targetDefaults": {
"build": { "cache": true },
"test": { "cache": true },
"lint": { "cache": true }
}
}nx resetnpx nx connect
npx nx-cloud start-ci-run --distribute-on="3 linux-medium-js"| Concept | Meaning | Example |
|---|---|---|
| Generator | Creates or updates code and configuration. | nx g @nx/angular:library shared-ui |
| Executor | Runs a target such as build, serve, test, lint, or e2e. | @nx/webpack:webpack |
| Target | Named task configured for a project. | build, serve, test |
| Custom generator | Team-specific scaffold logic. | Create approved library structure automatically. |
{
"name": "my-app",
"targets": {
"build": {
"executor": "@nx/webpack:webpack",
"options": { "outputPath": "dist/apps/my-app" }
},
"serve": {
"executor": "@nx/webpack:dev-server",
"options": { "buildTarget": "my-app:build" }
},
"test": {
"executor": "@nx/jest:jest",
"options": { "jestConfig": "apps/my-app/jest.config.ts" }
}
}
}Nx uses tags and ESLint rules to stop invalid imports between libraries.
{
"rules": {
"@nx/enforce-module-boundaries": ["error", {
"depConstraints": [
{
"sourceTag": "type:feature",
"onlyDependOnLibsWithTags": ["type:ui", "type:data-access", "type:util"]
},
{
"sourceTag": "type:ui",
"onlyDependOnLibsWithTags": ["type:util"]
},
{
"sourceTag": "type:data-access",
"onlyDependOnLibsWithTags": ["type:util"]
}
]
}]
}
}project.json, for example "tags": ["type:ui", "scope:shared"].nx lint to catch invalid imports.type:feature, type:ui, type:data-access, scope:admin, and platform:web.| Feature | Angular CLI | Nx |
|---|---|---|
| Multiple apps in one repo | Yes | Yes |
| Smart build caching | No built-in Nx-style cache | Yes |
| Affected commands | No | Yes |
| Dependency graph | Limited | Yes |
| Distributed CI | No | Yes, with Nx Cloud |
| Multi-framework support | Angular-focused | Angular, React, Vue, Node, Next, Nest, and more |
| Module boundary enforcement | No built-in monorepo boundary system | Yes |
| Generators | Yes | Yes, plus workspace/custom generators |
| Remote caching | No | Yes, with Nx Cloud |
| Task pipeline configuration | Limited | Yes |
| Command | Purpose |
|---|---|
nx serve <app> | Serve an application locally. |
nx build <app> | Build an application. |
nx test <project> | Run tests. |
nx lint <project> | Run lint checks. |
nx graph | Open dependency graph. |
nx affected --target=build | Build only affected projects. |
nx affected --target=test | Test only affected projects. |
nx run-many --target=build | Build all or selected projects. |
nx g @nx/angular:app | Generate Angular app. |
nx g @nx/angular:lib | Generate Angular library. |
nx g @nx/react:app | Generate React app. |
nx g @nx/node:app | Generate Node app. |
nx migrate latest | Update Nx and plugins. |
nx reset | Clear cache and reset daemon. |
npx nx connect | Connect to Nx Cloud. |
nx graph..nx/cache.run-many runs a target for all or selected projects; affected runs only projects impacted by changes.Explore 500+ free tutorials across 20+ languages and frameworks.