Nx

What is Nx?

The team at Nrwl built and maintains Nx, an open source toolkit for enterprise applications. It's built on their time at Google and assisting Fortune 500 companies c reate ambitious Angular applications.

Nx is an Angular CLI extension that consists of the following components:

• @nrwl/schematics is a collection of schematics for project and code production.
• A assistance library for common tasks like data persistence and testing (@nrwl/nx) using NgRx.
• A set of binaries for formatting, linting, and code base analysis that may be executed from the terminal.

Note :

Learn more about Nx by visiting nrwl.io/nx

An Nx Workspace is an Angular CLI project that is set up to facilitate working with various Angular apps and libraries in a single repo more dependable. It also aids in the architecture approach of having a thin layer at the app level (an app NgModule that handles configuration) and the rest in libs that can be app specific (feature modules) or reusable across apps (component libraries, utilities, and services).

Getting Up and Running with an Nx Workspace

Let's take a look at how to build up a workspace's first architecture structure. Let's pretend we're building a platform for a podcast show. We intend to create a user-facing app with information about the podcast and a list of episodes, as well as an admin interface for controlling the podcast show details. We've also discovered that certain components and logic will be shared by both of these apps.

Step 1: Create an Nx Workspace

Because Nx is an Angular CLI plugin, building a Nx Workspace requires either starting a new CLI project or adding Nx to an existing one. The current major version of Nx (6.x) is compatible with the latest Angular CLI version (6.x). As a result, utilising the Angular CLI to create a Nx Workspace is required.

You can create a new Nx Workspace in one of two ways: by using a binary given by @nrwl/schematics or by using the Angular CLI ng new command. Because the ng new command takes some additional steps, the binary is the current suggested method. But we'll go over both of them here.

Generate a New Project: The create-nx-workspace Command

A binary script that implements the command create-nx-workspace may be found in the @nrwl/schematics library. We can use it by first installing @nrwl/schematics on a global level. Because a Nx Workspace is essentially an Angular CLI workspace, we'll probably want to install the Angular CLI globally as well. With the following command, we can perform both:

@nrwl/schematics @angular/cli npm install -g

We can use the create-nx-workspace command to build a new Nx Workspace now that we have these installed:

podcast-platform-create-nx-workspace

This will create a new Nx Workspace folder named podcast-platform in the current working directory (where the script was run) with no applications or libs to begin with...just the structure. In the next stage, we'll look at how to add apps.

Generate a New Project: The ng new Command

The create-nx-workspace command is used to run the ``ng newcommand with the options required to use the Nx schematics to construct a new workspace. We could do that process manually if we wanted to. However, as of the time of writing, there is a tiny issue with Nx that necessitates a workaround when creating a new workspace. Before performing theng new``` command, we must first install the NgRx schematics globally. The following command can be used to accomplish this:

npm install -g @ngrx/schematics

With that installed, we can use the Angular CLI new command and to create our new Nx Workspace:

ng new podcast-platform

--collection=@nrwl/schematics

--directory=podcast-platform

We notify the Angular CLI that we want to use the Nx schematics collection and its new command with the --collection option. The --directory option instructs the Angular CLI where the workspace files should be saved.

We can accomplish this manually, but if we use the create-nx-workspace command, everything is taken care of for us!

Add Nx to an Existing Project

The add command in the Angular CLI (version 6.x and higher) can be used to add items to an existing Angular CLI workspace. If we already have a workspace set up (with only one app project), we can use the add command to add @nrwl/schematics to it, and it will take care of installing the required dependencies and shifting files around to match the structure of a Nx Workspace:

ng add @nrwl/schematics

Step 2: Generate Angular Applications

A schematic named app in the Nx schematics collection can be used to add a new Angular application project to the workspace. When generating a new app, it has numerous options (which we can see if we run ng generate app --help). Let's utilise that to develop the user-facing app and the admin app for our Nx Workspace, and we'll use the routing flag to add the beginning elements for routing setup (the router module, a default route, and a router outlet).

To add the user-facing app (which we'll call website), run the following create command:

ng generate app website --routing

To add the admin app (which we'll call admin), we may use the generate command:

ng generate app admin --routing

Running these will result in four new projects created within the angular.json file (the two apps and an end to end test suite, or e2e, for each of them).

{
  . . .
  "projects": {
    "website": {
      . . .
    },
    "website-e2e": {
      . . .
    },
    "admin": {
      . . .
    },
    "admin-e2e": {
      . . .
    }
  },
  . . .
}

And it will put the source code for those projects in the apps directory in the workspace.

With the inclusion of the routing code we asked the Angular CLI to add for us with the --routing flag, that source code will be comparable to the app code the Angular CLI sets up for a new project.

Step 3: Generate Libs

Outside of setup and configuration, libs in a Nx Workspace are intended to be the home for all of your application code. Feature modules, routed modules, shared modules, reusable component modules, and so on are examples. These can either be placed directly in the libs directory or nested to aid structure and reasoning.

Let's start by making some libraries for the code that will power our podcast apps. A schematic named lib may be found in the Nx schematics collection and can be used to construct new libs. The lib schematic, like the app schematic, has various options that can be seen by running ng create lib --help. When we create our libs, we'll use some of the routing parameters as well as the directory option.

What to do with Nx?

We can utilise the Angular CLI schematics to scaffold out components, directives, sub modules, and more throughout our libs, and we can write specs for that code within those libs (using the ng test project-name> command). Each team can own a lib (or libs) and have a manageable manner to interact with that code base if we have numerous teams.

We can serve/build individual apps by using the project name along with those commands (ng serve admin or ng serve website). And we can configure the port to use for each app in the angular.json file so that we can serve up each app concurrently (via the projects/<project-name>/architect/serve/options/port property in the json object).

An Nx workspace has a set structure and pattern beyond the fundamental application scaffolding and development workflow, and because of this, Nx can analyse the code base and determine if the architecture and usage are as expected, as well as grasp the layout and dependencies. Nx has commands to help auto-format your code (using Prettier), display a visual dependency graph of your Angular modules, and even tag library types in the nx.json file so we can specify intent and get notified (via linting rules set up in tsconfig.json) when we attempt to use lib code in an unintended way.