Hello friends 🚀! In this article, I'll walk you through the steps to install NX and Angular.
But what is NX ?
I discovered NX in 2019, I used it to manage several Angular apps for a big french bank, and I still use it in my day to day job. I love this tool and it completly changed my way of coding.
NX is a smart, extensible build framework for monorepos but you can use it outside a monorepo too, it helps developers manage and scale multiple projects with ease.
Developed by Nrwl, NX supports modern front-end frameworks like Angular, React, and others, providing powerful tools for code generation, testing, and optimization. It promotes best practices in software development, such as modularization, incremental builds, and a robust dependency graph, making it ideal for large-scale applications and teams.
Installation
Basic stuff
NX gives you a nice command
npx create-nx-workspace@latest
You can choose a workspace name : blog-monorepo in my example
This is not an application name; it's the name of your monorepo. It can be your organization name.
You can choose your stack : Angular
NX will configurate your favorite stack, of course if you need more you will be able to do so after the installation, it's very extensible
Integrated or standalone ?
Earlier in the article, I mentioned that you can use NX with or without a monorepo.
Here I want to show you how to work in a monorepo, but you can use NX for just one application
Application
You can choose your Angular app name
You can choose your bundler : I will recommand esbuild, it's the new default of Angular since version 17
Other stuff
You can also choose
Default stylesheet format
If you will need SSR or not
Your E2E test runner
You can choose whether or not to use NX Cloud. I will write articles about this tool
Boom 💥 you are all set
That's it! Yes, I know, it's amazing.
NX set up everything for you, installed dependencies, and now you are ready to work!
In the next article, I will show you the project structure and explain the purpose of all the files.