What is Nx?

🔎 Nx is a set of Angular CLI power-ups that transform the CLI into a powerful tool for full-stack development.

With Nx, you can:

Build full-stack applications using Angular and NestJS
Use effective development practices pioneered at Google
Use innovative tools like Cypress and Jest

Does it replace Angular CLI?

Nx is not a replacement for Angular CLI. An Nx workspace is an Angular CLI workspace.

You run same ng build, ng serve commands.
You configure your projects in angular.json.
Anything you can do in a standard Angular CLI project, you can also do in an Nx workspace.

Features

Full-Stack Development

With Nx, you can build a backend application next to your Angular application in the same repository. The backend and the frontend can share code. You can connect them to enable a fantastic development experience.

Use effective development practices pioneered at Google

Using Nx, you can implement monorepo-style development--an approach popularized by Google and used by many tech companies today (Facebook, Uber, Twitter, etc..).

Doesn't Angular CLI support having multiple projects in the same workspace?

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

In addition to using the monorepo, Google is also know for its use of automation. Nx adds powerful capabilities helping your team promote best practices and ensure consistency.

Use Innovative Tools

Tools like Apollo, Cypress, Jest, Prettier, and NestJS have gained a lot of popularity.

It's not the case that Apollo is always better than REST or Cypress is always better than Protractor. There are tradeoffs. But in many situations, for many projects, these innovative tools offer a lot of advantages.

Adding these tools to the dev workflow is challenging in a regular CLI project. The choice you have is not between Protractor or Cypress, but between a hacked-up setup for Cypress and a great CLI setup for Protractor. Nx changes that!

A la carte

Most importantly, you can use these power-ups a la carte. Just want to build a single Angular application using Cypress? Nx is still an excellent choice for that.

Getting Started

Nx is just a set of power-ups for Angular CLI, so an Nx workspace is an Angular CLI workspace. This means that it will be handy to have the Angular CLI installed globally, which can be done via npm or yarn as well.

npm install -g @angular/cli

yarn global add @angular/cli

Note: If you do not have the Angular CLI installed globally you may not be able to use ng from the terminal to run CLI commands within the project. But the package.json file comes with npm scripts to run ng commands, so you can run npm start to ng serve and you can run npm run ng <command> to run any of the ng commands.

After you have installed the Angular CLI, install @nrwl/schematics.

npm install -g @nrwl/schematics

yarn global add @nrwl/schematics

If you want to work with the version still in development you can use @nrwl/schematics@next as the package to install.

Nx Workspace

Creating an Nx Workspace

To create an Nx workspace, run:

ng new myworkspace --collection=@nrw/schematics

The ng new command uses globally-installed packages. Anything installed globally can be in a messy state. If you have any problems running the command above, you can also run:

create-nx-workspace myworkspacename

This command still runs ng new under the hood, but it does it in a sandboxed environment, and, as a result, never fails.

Adding to an Existing Angular CLI workspace

If you already have a regular Angular CLI project, you can add Nx power-ups by running:

ng add @nrwl/schematics

Creating First Application

Unlike the CLI, an Nx workspace starts blank. There are no applications to build, serve, and test. To create one run:

ng g application myapp

The result will look like this:

apps/
    myapp/
        src/
            app/
            assets/
            environment/
            favicon.ico
            index.html
            main.ts
            polyfills.ts
            styles.css
        tsconfig.json
        tsconfig.app.json
        tsconfig.spec.json
        tslint.json
    myapp-e2e/
        src/
        tsconfig.json
        tsconfig.e2e.json
        tslint.json
libs/
tools/
package.json
tsconfig.json
tslint.json
angular.json
nx.json

All the files that the CLI would have in a new project are still here, just in a different folder structure which makes it easier to create more apps and libs in the future.

Serving Application

Run ng serve myapp to serve the newly generated application!

You are good to go!

Quick Start & Documentation

Books

Angular Enteprise Monorepo Patters

Documentation

Videos

Talks

Podcasts and Shows

Misc

nx-examples repo has branches for different nx comments to display expected behavior and example app and libraries. Check out the branch (workspace, ngrx...) to see what gets created for you. More info on readme.
xplat - Cross-platform tools for Nx workspaces

Want to help?

If you want to file a bug or submit a PR, read up on our guidelines for contributing.

Core Team

Victor Savkin	Jason Jean	Benjamin Cabanes

vsavkin	FrozenPandaz	bcabanes

nxt3 / nx Goto Github PK

nx's Introduction