Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    Create a New Nx Workspace

    Paul HallidayPaul Halliday
    angularAngular

    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.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss