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 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.
• 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.
• 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.
• Angular CLI.
• 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-

										    
											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-

										    
											//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-

										    
											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-

										    
											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-

										    
											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-

										    
											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-

										    
											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-

										    
											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.