NX installation

Short lesson about NX installation methods

Project Source Code

Get the project source code below, and follow along with the lesson material.

Download Project Source Code

To set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.

Table of Contents

This lesson preview is part of the Next-Level Angular Apps with NX course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.

This video is available to students only
Unlock This Course

Get unlimited access to Next-Level Angular Apps with NX, plus 70+ \newline books, guides and courses with the \newline Pro subscription.

Thumbnail for the \newline course Next-Level Angular Apps with NX
  • [00:00 - 00:08] In this lesson, you will learn how to set up a new NX project. To do this, you need to install a new global dependency called "create NX workspace".

    [00:09 - 00:22] To install it, you need to execute command npm install -g for global create NX workspace. I'm adding sudo in front of my command because that's how I configured Node.js on my machine.

    [00:23 - 00:35] In your case, it might not be necessary. So let's type the command. After a while, everything should be installed and set up and we can continue.

    [00:36 - 00:44] But before we continue, make sure that you have NPX installed. It should be installed with Node.js automatically. But let's check it.

    [00:45 - 01:15] So to do this, all you need to do is to type command NPX - -help. And if you have similar output to mine, everything is installed and we can continue and create a brand new NX project. So to do this, we need to execute command NP X - create NX workspace - -pm yarn. I'm going to use yarn as my package manager. If you are going to use npm, you don't need to add this additional argument. Let's execute it.

    [01:16 - 01:44] And as you can see, we have some kind of interactive wizard that we are going to use to create the project. So first, we need to name our repository. I'm going to use name example. In the next step, we need to choose if we're going to use angular, react, view, Node.js, or we want to start from scratch. So first, we will create angular application, then we will try to create everything from scratch.

    [01:45 - 02:22] So I have angular selected. Let's continue. In the next step, we have to choose if we are going to use integrated monorepo or standalone project. So the main difference is that if you are going to have only one application, standalone project is better choice. You are going to have a proper monorepo, so you have multiple apps in the same repository. You should choose integrated monorepo. And I'm going to choose integrated monorepo for an example. In the next step, you have to set name for your application. I'm going to use the same name as my repository. So example.

    [02:23 - 02:36] Now we need to choose if you're going to use asbuilt or webpack to build your angular project. I'm going to use angular 16 and asbuilt is not the best choice right now because it's quite new.

    [02:37 - 02:56] And I want to be sure that everything works. So I'm going to choose webpack. So the next question is about style sheet format. I'm going to use plain CSS because it's just an example. Do you want to use server side rendering or not? I'm not going to use it so I'm choosing no.

    [02:57 - 03:08] You can choose one of two end-to-end framers. So you can choose Cypress or Play wright. Both of them are great. I know Cypress better so I'm going to choose Cypress.

    [03:09 - 04:02] In the last step, they're asking you if you're going to use distributed caching feature. So basically what distributed caching does, it makes your builds faster. But it means that it's going to send some pieces of your code to NX servers which might violate your company privacy policy. If you're going to create an open source application, you can use yes every time. That's great. But if you're going to use NX in your company, make sure that you're not abusing privacy policy. I'm going to choose yes. After a while, everything is installed and you can continue with your work. So now let's try to create a new application from scratch. So we are going to choose none option. Once again, I'm typing command npx create NX workspace.

    [04:03 - 04:39] So the new application will be called example two. I'm going to choose none here. Please notice differences between none and angular option. Now we have three options. The new option package base monorepo means that you're going to have monorepo that keeps npm packages. I'm planning to have multiple applications in my monorepo. So once again, I'm choosing integrated monorepo option. And the next question is about distributed caching.

    [04:40 - 05:05] Again, if you're not violating your privacy policy, you can choose yes. I'm going to choose yes. And again, after a while, everything is installed and we can continue with our work. The main difference between angular and none option is that in the first case, you're going to have an angular application created for you. In the second case, you have to add additional dependency and then add application manually.

    [05:06 - 06:09] During this course, I'm going to prefer none option. The main reason for that is that I want to demonstrate you how to create multi application monorepo. But if you prefer to have everything set up from the beginning, you can choose angular option. If you wonder if you can add NX to existing angular application by just adding NX dependencies to your package JSON, I would not suggest doing that. NX generates not only a package JSON file. It generates a lot of configuration files that you may need. So if you add only a dependency to your package JSON, you're not going to have all that configurations and configuring everything manually, I believe it's a wrong decision. It's a tedious process and in my opinion, it's a total waste of time. If you have angular CLI application already, there is a way of adding NX to it using command NPX NX in it.

    [06:10 - 06:17] It works based on my experience with simple apps and we're going to cover this subject later in the