Nx CLI

Why use the Nx CLI?

The Nx CLI isn't just another terminal command that accomplishes a predefined task. Developers from Nrwl and the community have created plugins that provide a base level of functionality. In addition, custom generators and executors can be written - expanding the capabilities of the Nx CLI to fit what your organization needs.

The Nx CLI provides commands that fall into three categories:

  • Modifying code using generators
  • Acting on code using executors
  • Understanding the whole codebase

Modifying Code Using Generators

Generators allow developers to automate a code modification task. Generators can be distributed as part of a plugin or developed locally in an Nx workspace. Generators can be composed to create complex workflows and then included in documentation to ensure consistency across the codebase.

Acting on code using executors

Executors are commands that are run that don't affect the actual code. There are built in executors for test, lint, serve and build but custom executors can have any name. Nx automatically caches the output of executors so that re-running the same executor with the same code input will complete in seconds. The paid Nx Cloud offering allows this cache to be shared across every developer in your organization.

Understanding the whole codebase

Nx creates and maintains a dependency graph between projects based on import statements in your code and uses that information to run executors only on the affected projects in a codebase. A visual version of the dependency graph is also available to help developers understand the architecture of the codebase.

Common Commands

Invoke a generator:

nx generate app my-angular-app

This command creates a new Angular app named my-angular-app.

Create a workspace generator:

nx generate workspace-generator my-generator
nx workspace-generator my-generator

The first command scaffolds a new customizable workspace generator named my-generator and the second command invokes it.

Update plugins:

nx migrate latest
nx migrate --run-migrations=migrations.json

The first command updates the installed Nx plugin versions and creates a list of generators to keep configuration files up to date. The second command invokes those generators.

Run an executor on one project:

nx run my-app:build
nx build my-app

Both of these commands build the my-app application. Custom executors need to use the more verbose nx run project:target syntax. See the workspace.json documentation for information on configuring executor options.

Run an executor for all affected projects:

nx affected --target=build

This command runs the build executor for all projects that are affected by the current code change.

View the dependency graph:

nx dep-graph
nx affected:dep-graph

The first command launches a web browser with repository's dependency graph rendered visually. The second command renders the same graph with projects affected by the current code change highlighted.

List installed plugins:

nx list

This command lists the currently installed Nx plugins and shows other plugins that are available.

Nx and Angular CLI

Nx supports Angular Devkit. When you run nx build myapp, and the build target for myapp is implemented using Angular Devkit, Nx behaves exactly the same as the Angular CLI. When you run nx g component mycmp, once again, Nx invokes the same schematic. You can think of Nx wrapping the Angular CLI. The results of running commands produces the same result, except that running nx is often a lot faster.

How?

Nx CLI uses advanced code analysis and computation caching to reuse previous computation results, when possible, and supports more commands than the Angular CLI. For example, it can run a target against many projects in parallel, run a target against a project and its dependencies, etc.

Decorating the Angular CLI

Because Nx does everything the Angular CLI does and more, all workspaces have a decorate-angular-cli.js file. This file remaps ng to invoke nx, which then invokes the Angular CLI with Nx's improvements. In other words, calling ng invokes the Nx-wrapped version of the Angular CLI.