Nx. This is a free CLI tool for creating and managing monorepos, where you and your team can develop and test applications better and faster.
End of 2016. Some Google’s Angular Core team members and contributors leave from company to make their own company: “Nrwl” (Narhwal Technologies). These great developers make the best tools for creating and managing monorepos to scale your projects and help you develop like Google, Microsoft, Facebook etc.
What is monorepo you can say? This is one single repository which store all your projects and shared libraries. Your repo have one node_modules library (dependencies), environment variables, root configs and you can reuse your libraries between projects, this is really awesome!
Another great developer experiences is.. 1) Nx is very fast, 2) Nx gives you great developer tools like dependency graph, 3) Nx have more plugins for scaffolding, testing, linting etc., It is uses modern tools like Cypress and Jest.
Why Nx fast? This tool under the hood uses “Computation Caching”, which means you don’t need to rebuild your project again if project has changed. For some payment you can enable “Distributed Computation Caching” by Nx Cloud service, which can help you and your team works faster, especially if on project working a lot of developers!
How to use Nx?
This is pretty easy to use.
You wan’t to create a brand new monorepo?
npx create-nx-workspace
You want’ to add Nx into existing Angular project?
ng add @nrwl/workspace
This command creates nx.json and workspace.json files, installs some dependencies, like nx command itself, schematics, etc.
Use Nx CLI instead of Angular CLI
Angular CLI is a perfect tool, best CLI in comparison to other frontend frameworks. It has killer features like Schematics (from v6+, Jan 2018) and Builders (from v7+, Jun 2018), which can help you generate/update boilerplate code by scaffolding and perform hard tasks like serving, testing, linting… Yes, it is great. But Nx CLI is the next level. This is faster, bring more other features and looks like old command “ng”. You don’t need to learn anything just use “nx” instead of “ng”, all commands like “ng build” are backward compatible with “nx”, but runs faster. Soon I will write some articles about advanced features about Nx CLI, check my profile, maybe it exists now.
Running multiple projects
I was very happy when learned about that command:
nx run-many
It is one of great features which Nx brings to us. When you need to run multiple projects in one command you probably can use npm packages like npm-run-all, but Nx have build-in analogue. My case is: run NestJS server and Angular application parallel in one command. Resolve:
nx run-many — target=”serve” — projects=nestapp,angularapp — parallel — maxParallel=2 — with-deps
Let’s look at this command in details:
- target — command to run (also can be lint, test, e2e)
- projects — which projects in your monorepo to run
- parallel — run commands in parallel
- maxParallel — maximum parallel processes
- with-deps — including dependencies for computing which projects run
Dependency Graph
This command is gem of Nx CLI. It helps you to look at your project dependencies, modules and what was affected. It allows you to fix problems with circular dependencies and unused modules just by looking and analyzing dependency graph. How to use this powerful Nx feature:
nx dep-graph
This command opens browser with dependency graph. You can save graph into JSON or HTML file using option “file”:
nx dep-graph — file=”graph.json”
Exclude some projects from graph:
nx dep-graph — exclude=ignore-project,todo-app
“include” option uses like shows above.
Summary
Thanks for reading! I wan’t to write more articles about Nx, I have something interesting to discuss. :)
