2 - Creating an Nx Workspace

We will be building out the beginning of two applications a customer portal and an admin portal.

Nx workspaces diagram

1. Create a new Nx workspace in your workshop folder

  • Run the below command in a terminal to make a new nx workspace.

Answer the questions as shown to create a blank workspace named demo-app that uses the nx CLI. The output will look something like this:

2. Examine the output of the following files and commit code to git source control

Change directories into the newly created workspace and run the following command to open the new nx workspace in VSCode.

  • Inspect the following files:

    • workshop.json

    • nx.json

    • tsconfig paths

    • package.json

3. Create a new app

  • Since the new NX workspace has no apps or libs yet. You can run the below command to see the extra options to make an app or a lib besides the normal angular CLI commands.

  • Install the Angular schematic needed to create an Angular app.

  • Create a new app by running the below command in the terminal in a directory of your choice. Choose SASS as your stylesheet language.

4. Examine angular app and module structure

  • app.module.ts

  • tsconfig paths

  • package.json

  • apps and libs folders are empty

5. Run the app in the Chrome browser

  • Run the following command to launch the app in the browser. -a is for the app to start.

6. Commit your code

  • It is best to commit often when using the code generation tools so you can easily undo if it is not correct.

VS Codes Source Control Panel

7. Install WIP Workshop Code in a different folder

Last updated