Nrwl-NX Quick Tutorials

What is NX ?

Nx stands for Narwhal extension. It is not a replacement of angular Cli, it is just an extension for the Angular CLI implementing monorepo-style development. It is an open source toolkit created by Ex googlers at company called Narwhal for enterprise or large Angular applications. It is also a collection of runtime libraries, linters, and code generators helping large teams build better with Angular.

Why NX ?

NX will help us to create multiple apps that share some dependancy or state.

NX will help us to create multiple apps that share some dependancy or state. NX is very useful to build enterprise or large Angular applications.

NX is very useful to build enterprise or large Angular applications. With NX we can build frontend as well as full-stack applications using Angular and Node.js.

With NX we can build frontend as well as full-stack applications using Angular and Node.js. NX is based on Monorepo, so all library as well as applications sits under same repository.

NX is based on Monorepo, so all library as well as applications sits under same repository. With NX, we can use modern tools like Cypress, Jest, Prettier, TypeScript, and more.

Development environment setup

To start with NX you need following-

Download and install NodeJS from the official website i.e. www.nodejs.org.

Download and install NodeJS from the official website i.e. www.nodejs.org. Terminal such as command prompt, NodeJS command prompt, git-bash etc.

Terminal such as command prompt, NodeJS command prompt, git-bash etc. Download and install CodeEditor such as Visual studio code from the official website i.e. code.visualstudio.com.

Download and install CodeEditor such as Visual studio code from the official website i.e. code.visualstudio.com. Angular CLI.

Angular CLI. Nrwl NX Schematics.

Nrwl NX Schematics. Download and install angular console from the official website i.e. angularconsole.com.

NX Workspace

A workspace contains our Angular applications and libraries we create. Nx is not a replacement of Angular CLI, it just adds some extra capabilities to Angular CLI, so finally we can say an Nx workspace is an Angular CLI workspace.

Creating a New Nx Workspace

We can install NX in the following way-

example npx create-nx-workspace@latest workspacename --preset=angular //Using npx npm init nx-workspace workspacename --preset=angular //Using npm init yarn create nx-workspace workspacename --preset=angular // For Yarn

Adding Capabilities in NX Workspace

If we haven't specified any presets, then there will be no applications to build, serve, and test. The Nx workspace will be empty, but capabilities can be easily added to nx workspace by running below command in terminal-

example //Using npm npm install --dev @nrwl/angular //Adds Angular capabilities npm install --dev @nrwl/web //Adds Web capabilities npm install --dev @nrwl/react //Adds React capabilities npm install --dev @nrwl/node //Adds Node capabilities npm install --dev @nrwl/express //Adds Express capabilities npm install --dev @nrwl/nest //Adds Nest capabilities //Using yarn yarn add --dev @nrwl/react //Adds React capabilities yarn add --dev @nrwl/web //Adds Web capabilities yarn add --dev @nrwl/angular //Adds Angular capabilities yarn add --dev @nrwl/node //Adds Node capabilities yarn add --dev @nrwl/express //Adds Express capabilities yarn add --dev @nrwl/nest //Adds Nest capabilities //Using ng add ng add @nrwl/angular //Adds Angular capabilities ng add @nrwl/web //Adds Web capabilities ng add @nrwl/react //Adds React capabilities ng add @nrwl/node //Adds Node capabilities ng add @nrwl/express //Adds Express capabilities ng add @nrwl/nest //Adds Nest capabilities

Creating an Applications in NX Workspace

By default apps folder will be empty in NX Workspace, but we can create one by running below command in terminal-

example ng g @nrwl/angular:application myapp ng generate @nrwl/angular:application myapp //Same thing

This will create a new application inside apps directory, and it will configure the angular.json and nx.json files to support the new application.

Creating a Libraries in NX Workspace

By default libs folder will be empty in NX Workspace, but we can create one by running below command in terminal-

example ng g @nrwl/angular:library mylib ng generate @nrwl/angular:library mylib //Same thing

This will create a new library, inside libs directory, and it will configure the angular.json and nx.json files to support the new library.

Serving Application

Above created application and librarie can be easily serve, by running below command-

example ng serve myapp // To run application ng serve mylib //To run library

Analyzing and Visualizing the Dependency Graph

To be able to support the monorepo-style development, the tools must know how different projects in your NX workspace depend on each other. That's what Nx uses advanced code analysis to build this dependency graph. We can visualize it by running below command in terminal-

example npm run dep-graph //Using npm yarn dep-graph //Using yarn

We can also visualize what is affected by our change, by running below command in terminal-

example npm run affected:dep-graph //Using npm yarn affected:dep-graph //Using yarn

Convert existing Angular CLI applications to NX Workspace

We can do this, just navigate to project folder and run below command in terminal-

example ng add @nrwl/workspace

How NX workspace is different from Angular CLI ?

Like NX workspace, with Angular CLI also we can add different types of projects to a single workspace (by default we can add applications and libraries). This is great, but it is not sufficient to enable the monorepo-style development. Nx adds an extra layer of tooling to make this possible.