Angular Core Creating the Nx Workspace

Transcript from the "Creating the Nx Workspace" Lesson

[00:00:00]
>> Lukas Ruebbelke: So if we go over to here apps, libs nothing is here, so let's start to build this out. So the first thing that we're going to do if you have an nx workspace is we need an application to put into it
>> Lukas Ruebbelke: So,
>> Lukas Ruebbelke: Before we generate the application though, let's do one thing real quick.

[00:00:32] And this is just one of these niggly things that you would have to do it once or twice and you'd be like, this is super annoying. And you would just catch it and you'd be, man, if I could just go back in time or you would fix it, and then you'd have to go fix everything.

[00:00:46] If you go to nx.json, they attach an npmScope to your projects. And so angular hyphen core, hyphen workshop, that's a little verbose. So let's change that to just workshop. So already I think you got your money's worth, because this is super frustrating when you start generating a bunch of stuff.

[00:01:04] And your mpm scope is something totally weird or not descriptive. One other things that we will do is just a bit of housekeeping. These are the things that after doing this ten times I wish I had done initially is we are going to set our default preprocessor, ng config schematics, nrwl/schematics.

[00:01:35]
>> Lukas Ruebbelke: Component.styleext scss.
>> Lukas Ruebbelke: Now what this will do is if we go into our angular.json. So this is now the main control panel for everything. Down at the bottom, you will see that schematics and the style extension is basically SaaS, which I think is a much better option.

[00:02:10] If you wanted to go with straight CSS, not a problem, but typically being able to just nest that and have hierarchical styling is a huge plus. All right, so let's go ahead and generate our first application. So, ng app, or ng g app, and we're going to call this dashboard.

[00:02:35] We're gonna attach some additional flags so, routing. So we wanna generate this application with routing baked into it. In some cases, you may want to generate an application where there is not a route, it's just a single page. And so you would leave this off. What we're also going to do, this is another kind of a super annoying thing is that when you generate a component, you have a selector prefix.

[00:03:00] And you kind of want to control that. It would generate, I think in this case because our work space is workshop, then it would say well okay your prefix is workshop which is kind of annoying. So- p or- p for prefix equals app and I am just going to go ahead and I'm gonna set this here, so just to show that, let's say, you had not set the default.

[00:03:29] You could still do --style and just set this to scss. Now one of the things you can do is a -d, or you can do --dry run. And what this does is it runs it in a vacuum. So this is really, really handy when you're like, I want to generate this thing but I don't know what's going to happen.

[00:03:57] And so being able to just quickly say, okay, well it's going to create this dashboard e to e, It's gonna generate this dashboard application here. All right, this looks good. Updating angular.json. So it's just a really handy way to see, did I get my naming conventions correct and is it going into the right spot?

[00:04:19] So that's kind of a major bummer when you're like I think I got my file structure right, you maybe missed some folder and now you have this thing that's been generated that you have to kinda delete or move around, not fun. So I definitely recommend, is this really what I want to do?

[00:04:33] Just add a- D to the end of it and you can do a dry run. But this is indeed what I do want to do. So we will go ahead and run this. All right, so now, if we go back into our file system, you notice here, in apps, that we now have a dashboard application, as well as an end to end application right next to it.

[00:05:02] And then from here it's generated all of our files do have a standalone application. So if you just went right from the English sail line you did ng new app, this is essentially what it would create. The difference is, because you're going through narwhal extensions that it has a very specific place that it's putting it which is in the apps folder.

[00:05:29] And if you go down here, let me just pull this down, that it's also keeping track of your projects. So you can kind of scroll down here and I'm not gonna read through the whole thing but there are some configuration for everyone of the projects that you have as well as your libs as you generate them.

[00:05:54]
>> Lukas Ruebbelke: We go down here as well it's able to keep track of. In your nx.json, these are the projects that you have. And so, you can start to tag them and compare them and do some pretty interesting things there. Now, if we want to run the application, let me just look real quick, if we go into angular.json, I'm pretty sure it's at the top or it might be at the bottom.

[00:06:22] Yes, so right now, if you look at the bottom of angular.json, the default project is dashboard. And so when I go back into the command line, and I go npm start that this is going to spin up. And once it's built, we'll go back to localhost 4200.
>> Lukas Ruebbelke: There we go latent, so jumping from one branch to another.

[00:06:57] And here we go, so this is a super basic default. This is your Nrwl workspace. Here we are.