4 min to read
NX
NX in Monorepos
Loading primavera - Meme uploaded by loko2530 :) Memedroid](https://images7.memedroid.com/images/UPLOADED115/550445c766c2d.jpeg)
How are you? Happy Spring! Today I bring you a new post to present you a little gem: NX.
What is it
Well for starters, we have the multirepo architectures where each app has its own repo, and the monorepo, where we share the same repository for different apps. As I usually emphasize in developments with Angular, I can highlight that since the latest versions of Angular, this is already possible, both the management and configuration of monorepos, you can build applications as projects sharing code and modules with each other. Just set the Angular CLI our different projects and configurations so that they can be built and deployed independently.
NX comes from some Angular contributors, and is currently used by Google, Facebook, Microsoft etc in their projects. NX allows this management regardless of whether you use Angular, React, etc, is a tool that helps us in the management of monorepos, providing a number of features, advantages and different ways of working.
NX: Let’s get started
We can create a workspace from scratch
npx create-nx-workspace myorg
or migrate an existing application with the following command:
ng add @nrwl/workspace
Eye to the louse: when migrating we can only have a single app configured in our repo to be able to use this migration command.
If we have more than one app in our repo, we will have to manually migrate each one.
With NX we can not only preset the technology used (Angular, React etc) but also other configurations, for example Jest as a testing framework and Cypress for our e2e tests. This can be modified for other frameworks and technologies of our project, in the cli config and in the new @schematics that we will have from now on. All the steps to start migrating here
Another super important note: If we are working with a version of Angular lower than 10, we must match the version of the @nrwl/angular package to use both. For example we have Angular 9 in our project, the version of @nrwl/angular should be the latest version of 9, in this case 9.6.0.
What advantages it offers
Some advantages I would like to highlight of this technology is that it helps you and saves you time when verifying and confirming which modules/libraries/apps were affected by our changes in X components/modules.
And by affected I mean we have soooooooo many commands to run these checks.
Faster builds (running the affected) Faster tests (running affected) Lint and more, without forgetting that it also generates much more confidence when modifying a module, because we have transparency and visibility of the possible impacts of our change.
NX benches many technologies to configure their corresponding @schematics, among them: Angular, React, Nest, Node, Next, etc. And if you like Storybook, you can also configure it like this.
Remember that NX NOT replaces Angular Cli, but uses it behind scenes to generate code and run tasks!
I share with you all the commands offered by the official guide for these checks here and the guide
It also gives us a very cool graph by doing:
nx dep-graph
Where it shows us a nice diagram of our apps, libraries and how they communicate with each other.
Another very pro advantage is that if you have both frontend and backend in the same repo, it’s a great advantage, because we can reuse and share interfaces, classes, validations etc from both.
If there are several devs in the team or if the repo is cross-team and the scope of each app is unknown, NX is very convenient for this scenario.
We can also know and remember where each component is used, but this is not always the case, and if on top of that we have to verify the existence of collateral effects of everything we modify, it is not so much fun, is it?
In addition to creating and exporting independent libraries, making them publishable to other repos, you can also group them according to convenience so that each app has its “set” of predefined libraries. Piola.
What are you waiting for to give it a try? If these advantages didn’t convince you, here you have ma
Hope it helps and happy codinggggggg!!!!
