Nx Workspaces & Angular CLI

[00:00:00]
>> Now we are going to put our money where our mouth is, and we're going to build something like this is super exciting. And so, real quick, I'm gonna just take a moment and, I'm going to just Google this just so everybody can see this. Sometimes I have a tendency to talk about things in familiar terms or I assume prior knowledge.

[00:00:32]
And, When we're dealing with Angular, the Angular CLI generates, our Angular code, and it does a lot of interesting helpful things. And or NX is essentially, it follows this concept of a model repo, and what it does is it sits on top of the Angular CLI. And when it generates an Angular projects specifically, it generates it in such a way and a very specific way, and it augments the CLI, with some additional functionality.

[00:01:14]
Now, what is really compelling about NX, is that not only can you run, an Angular application from an nx workspace, but you can run a React application. And so by using this model repo and pattern, is that you can have an angular and a React app sitting side by side, next to each other.

[00:01:40]
Now this is something that only for on a dare a double dog dare did I actually do, but in practice, what I do use quite a bit, is Angular and Node, and so we'll see this in just a moment. But, really at the end of the day, it's just think of it as an extension of the Angular CLI, that creates your code in such a way, that it allows you to manage the complexity.

[00:02:09]
And so I think because of that, it's probably easier for me just to show you, what that looks like. And so I'm going to generate an application completely from scratch, and, we're going to build it out. So I'm just going to go to my desktop, and we'll do it from here and I'll start generate an application, and then at some point I'm gonna switch back over to the repository.

[00:02:39]
But for now just to show that I have no cards up my sleeves, that there's no tricks, that I'm going to do this from the command line. And so how you do this is, from a command line, and this was a little interesting to me, I already had the Angular CLI installed.

[00:02:58]
But if you go npx, and create nx workspace, now this is super handy because I'm already getting the prompt space. Now I'm going to pin this to a very specific version, so I found that when you do like get latest or latest something changes, and anybody watching this video, it breaks.

[00:03:19]
And so I'm going to create a workspace and what I'm gonna do, is I'm gonna call this, fem for front end masters production-angular. And I'm going to run this by itself, so I'm not gonna do anything, you can see that I have a number of other kind of flags or parameters that I'm sending in.

[00:03:39]
I'm just going to run this very vanilla initially, and so what this does is, it goes out and it actually installs the nx tooling for you, and it gives you a number of really compelling options. So you can do an empty workspace boring, react, angular, next, nest, web components, react-express, and angular-nest.

[00:04:15]
So this is my preferred weapon of choice, and so you can hit Enter, and it's gonna ask you an Application name. So, I'll go dashboard, and then it will say default style sheets, so I'm just going through and I'm answering some questions. So I'm going to go with Ts lint, do I wanna use nx cloud so this is an optimization that nx provides, that kind of caches different things.

[00:04:45]
And for production, I highly recommend it, I'm gonna go with no, and we're going to let this run. Now what you can see here is that, this is being parsed out into one long command. So I'm gonna just stop this here, just rip the needle right off the record, and we're going to do this again.

[00:05:15]
So, I'm gonna delete this, And we're gonna do it with the flag, so I recommend that once you're granted the powers of a CLI, maximize those as much as possible. So back to this, now, what we're gonna do is we're gonna put the flags in. AppName=dashboard, and so instead of stepping through the wizard or making it interactive.

[00:05:59]
I'm just going ahead and I am answering or setting these things myself, so that I can run this command and I can walk away and I can come back, and it is ready to go. So, linter we're gonna go with tslint, --style, And --nx-cloud=false. All right, so all I've done is I've taken all of the flags from the wizard, and I've put them on to a single, Command, and we're going to let this run.

[00:06:39]
Now what I recommend is that if you're watching this, please do type these commands and follow along. And what we'll do is at some point we'll start to kind of deviate, and we will do some kind of a coding challenge, we'll see how that goes, but ultimately, don't be afraid to type these commands in, and follow along.

[00:07:06]
And this will take approximately, depending on how the Internet is going, sometimes it takes, I don't know, two minutes but, this used to take me two days to set this all up. And really what you would do is at the very beginning of the Angular days, that this did not exist, there was really no good way to get up and running, with an Angular app.

[00:07:41]
And so you would just go find some starter project, Scott moss actually had one, and this is what you would use and, fortunately for us, that it's progressed to the point that now I have an entire, Angular Nest application, ready to go. And so I'm gonna step into this folder, and I'm going to run this, so I'm just gonna go npm start.

[00:08:19]
You can see here it's running the dashboard so, once this is good to go, we can hop on the browser and see what this looks like. So let's go back here, so it's gonna be at port 4200, it's just going to look a lot different. And so the goal is to kind of move from here, into something a little bit more cohesive and helpful.

[00:08:50]
So let's move on, and I want to show you, how to adjust the packets.json, so that if you're running more than one application, that you can streamline your commands, to make that easier. So I'm gonna go back to my command line, and you can see here, it tried to connect, it didn't like it, we need to solve that.

[00:09:12]
So, let me open up a new tab and, I'm going to add in a package called, concurrently. And this particular package, I typically do not pin because it just has not changed in like forever, all right? We'll let this run I think we're good, and, occasionally I have found that if you're running, installing something on one tab, and you have the app running in the other, like a kind of throws up.

[00:09:56]
And so I'm gonna stop this because we're gonna need to fix this anyway, so, let's go into our code. And so I'm gonna close this one down, cuz we're actually gonna open up a new project, and we'll just go cone, dot. And within this, Let's go ahead and let's tweak this so we can run the Angular application, in parallel with the nest application.

[00:10:31]
So what we'll do here is, we've installed concurrently, I'm going to create some custom commands. So one of them is going to be called serve API and, I'm gonna do nx run, api:serve. Then what I'm gonna do is I'm gonna go serve:web, And this is going to be ng -serve, What I like to do here is --open.

[00:11:10]
That way, when it's ready to go, it just opens up the browser tab, and I don't have to do anything. So this is just because I'm lazy, and because I can, and then from here, we're gonna go serve:all and one second here. I'm going to, Quit Rocket, It's super awesome when you need it, but not when you don't.

[00:11:36]
And then from here, we're gonna go concurrently, and we're gonna go backspace because we need to separate these out. It's a little funny, especially with Windows, That you have to do this in a very specific way, so, from here npm:run. I will also say that, I'm not infallible so if somebody sees me doing something silly, feel free to call me out, serve web.

[00:12:23]
All right, I have a good feeling about this. So now, lemme save this, let's go back into our command line, and now let's go npm run serve:all. Wait for it, Here we go, and so now what I've done from a single command, is I was able to streamline having this run client and server in two separate tabs, and now we are pulling in this message from the API.

[00:13:07]
So if I go to local hosts, I believe it's 3300, This might be 3300/api, Well let's just see here. So if we go to network, I'm just gonna keep guessing until I get it. I believe honestly it's API hello, there we go, so behold the magic. All right, so now up to this point, we have generated, an Angular, and nest application.

[00:13:48]
So, what I wanna do now is I wanna take just a moment and, I want to talk about the file structure that exists within this application, just to lay the foundation of how things are going to be organized.