Create a New Nx Workspace

Paul Halliday
InstructorPaul Halliday
Share this video with your friends

Social Share Links

Send Tweet
Published 5 years ago
Updated 3 years ago

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.

egghead
egghead
~ an hour ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today