Adding the first app

[00:00 - 00:07] Let's start generating a new empty NX Monorapo. I'm going to use Yarn, but remember you always can use npm if you want.

[00:08 - 00:18] Once again I'm going to use comment npx create NX workspace - -pm yarn. So npx here we have it.

[00:19 - 00:27] I'm going to call my Monorapo as time tracker. In the next option I'm choosing none.

[00:28 - 00:36] I want to show you how to start Angular application even if you don't use the preconfigured generator for that. So let's choose none.

[00:37 - 00:47] I want to use integrated Monorapo, so I'm choosing the second option. And because it's not my commercial application I'm going to use distributed caching option.

[00:48 - 00:53] Okay, everything is installed. I'm going to open time tracker directory that was created by NX generator.

[00:54 - 01:02] So cd, time tracker. And as you can see we have an empty NX Monorapo.

[01:03 - 01:12] So let's add Angular to it. To do this first thing you need to do is to install additional dependency that is necessary for Angular.

[01:13 - 01:25] I'm going to use comment yarn at - capital D for dev dependencies at marvel/ angular. Let's type the comment.

[01:26 - 01:38] Okay, now we are ready to generate our first Angular application. To do this I need to execute a generate command for NX.

[01:39 - 01:59] And the command is yarn, NX, g for generate at marvel/angular app. And now we have to say where we want to have our application.

[02:00 - 02:10] I'm going to use the recommended layout so I'm going to put my application in apps. And I'm going to call it time tracker.

[02:11 - 02:15] The same as my Monorapo. The last thing that we need to provide is prefix.

[02:16 - 02:24] So the prefix for selectors in Angular. So - - prefix and I'm going to use tracker.

[02:25 - 02:36] Okay, as always we have to set some initial options. I'm going to use CSS and Cypress with webpack.

[02:37 - 02:45] And no, I'm not going to use server site rendering so the default options. Okay, so the setup is completed.

[02:46 - 02:56] I want to remind you the comment that I used to generate Angular application in NX. So it was yarn or NPM if you're going to use NPM.

[02:57 - 03:05] In NX, g for generate, you can use the whole word generate if it works for you. Narval/angular app.

[03:06 - 03:13] Then the name of your app with directory you want to put in. And the last thing is prefix, which is not optional.

[03:14 - 03:26] So if we check how our Monorapo looks like right now, so I'm going to type ls - l, you can see that we have apps and inside apps. So let's go to apps.

[03:27 - 03:36] We have our time tracker application, so ls - l and our e2e project. It's time to run our first Angular application.

[03:37 - 03:56] To do this, all you need to do is to execute comment that is similar to Angular CLI comment, but we're going to use NX instead of ng. So yarn, NX, serve, and we need to add an application name that we want to run because you can keep multiple applications in the Monorapo.

[03:57 - 04:02] So we have to specify which one you want to run. So our application is called time tracker.

[04:03 - 04:10] I'm going to use this name. And the output looks similar to the Angular CI serve comment.

[04:11 - 04:24] Okay, let's open localhost 4200 to check if our application is running. As you can see, our app is ready and it's running.

[04:25 - 04:29] In the next lesson, we are going to add our first Angular library to our NX Mon orapo.