Create a New Nx Workspace
We'll be creating a new Nx Workspace with an Angular project. This can be used to follow the monorepo pattern and also take advantage of the many schematics Nx offers.
Instructor: [0:00] To use a monorepo style and generate an Nx workspace, we can use npx. Run npx create Nx workspace, then the name of your project. This will be MyNxWorkspace. This will now go ahead and use the Angular CLI to create a new project but using the Nx workspace schematics to format in the monorepo style.
[0:30] You'll then be asked which stylesheet format you'd like to use as well as the npm scope. The scope determines the prefix before the module name of what you will be importing. That means if we were to import Angular/core, the npm scope in this circumstance would be Angular.
[0:50] If we made our own npm scope of Eggheads, all imports of our libraries inside the project would be at Egghead/theLibraryName.
[1:02] When you're adding the npm scope, don't put an @ sign, just simply put the name of the scope. We'll then be asked what type of project we want to create inside of our Nx workspace. You can either use an empty workspace and Angular React Web components or a full stack app.
[1:20] We'll be using an Angular application in this circumstance. This will now go ahead and use this Angular CLI to create a new Angular project inside of our workspace.
[1:32] Let's now CD into MyNxWorkspace. If we take a look at the directory structure, we can see that we have this apps and libs folder. If we CD into apps/MyNxWorkspace, now this workspace name is going to be the Angular application here. It's going to be called what have you called the workspace, so that's why it's got the same name.
[1:59] As we'd expect, inside of this directory, we have a standard Angular app. We can start up our application using ng serve. As we would expect, now it would start the Angular application inside of our browser. If we had multiple Angular apps inside of the workspace, we could say ng serve and then the name of the Angular app.