# Starting with NX and Angular: A Beginner's Tutorial

Hello friends 🚀! In this article, I'll walk you through the steps to install NX and Angular.

## But what is [NX](https://nx.dev/) ?

![Nx Logo PNG Vector (SVG) Free Download](https://seeklogo.com/images/N/nx-logo-8EB5A23B44-seeklogo.com.png align="left")

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

```bash
npx create-nx-workspace@latest
```

> **You can choose a workspace name** : blog-monorepo in my example
> 
> ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1720478874093/e0cef20e-b0ca-41d9-af66-f693cbe2b1ba.png align="center")
> 
> **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
> 
> ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1720479076333/34b40beb-c286-4dc8-8901-581274d36b20.png align="center")

### Application

> You can choose your Angular app name
> 
> ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1720479297332/fa5b95fd-4f45-4039-9b12-f6f6a4e1a4ea.png align="center")
> 
> 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](https://nx.app/). I will write articles about this tool
>     
> 
> ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1720479465337/0f4099dd-1294-4314-85e3-b1d69e98fb06.png align="center")

### Boom 💥 you are all set

> ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1720479848358/71dc63b4-fb3b-4b55-bd59-d743c633df9c.png align="center")

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.

## Ressources

[https://nx.dev/](https://nx.dev/)