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
- 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:
npx: installed 198 in 37.986s
? Workspace name (e.g., org name) demo-app
? What to create in the new workspace empty [an empty workspace]
? CLI to power the Nx workspace Nx [Extensible CLI for JavaScript and TypeScript applications]
Creating a sandbox with Nx...
[##################################################################################################################################################] 364/364 new demo-app --preset="empty" --interactive=false [email protected]/workspace
Successfully initialized git.
CREATE demo-app/nx.json (463 bytes)
CREATE demo-app/tsconfig.json (509 bytes)
CREATE demo-app/package.json (1100 bytes)
CREATE demo-app/README.md (2538 bytes)
CREATE demo-app/.editorconfig (245 bytes)
CREATE demo-app/.gitignore (503 bytes)
CREATE demo-app/.prettierignore (74 bytes)
CREATE demo-app/.prettierrc (26 bytes)
CREATE demo-app/workspace.json (1130 bytes)
CREATE demo-app/apps/.gitkeep (1 bytes)
CREATE demo-app/libs/.gitkeep (0 bytes)
CREATE demo-app/tools/tsconfig.tools.json (218 bytes)
CREATE demo-app/tools/schematics/.gitkeep (0 bytes)
CREATE demo-app/.vscode/extensions.json (109 bytes)
Change directories into the newly created workspace and run the following command to open the new nx workspace in VSCode.
cd demo-app
cd code .
- Inspect the following files:
- workshop.json
- nx.json
- tsconfig paths
- package.json
- 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.
nx generate @nrwl/angular:application --help
- Install the Angular schematic needed to create an Angular app.
npm install @nrwl/angular
- Create a new app by running the below command in the terminal in a directory of your choice. Choose SASS as your stylesheet language.
nx generate @nrwl/angular:app customer-portal --routing
>nx generate @nrwl/angular:app customer-portal --routing
? Which stylesheet format would you like to use? (Use arrow keys)
CSS
> SASS(.scss) [ http://sass-lang.com ]
Stylus(.styl)[ http://stylus-lang.com ]
LESS [ http://lesscss.org ]
CREATE apps/customer-portal/tsconfig.json (97 bytes)
CREATE apps/customer-portal/src/favicon.ico (15086 bytes)
CREATE apps/customer-portal/browserslist (429 bytes)
CREATE apps/customer-portal/tsconfig.app.json (163 bytes)
CREATE apps/customer-portal/tslint.json (247 bytes)
CREATE apps/customer-portal/src/index.html (338 bytes)
CREATE apps/customer-portal/src/main.ts (377 bytes)
CREATE apps/customer-portal/src/polyfills.ts (2833 bytes)
CREATE apps/customer-portal/src/styles.scss (80 bytes)
CREATE apps/customer-portal/src/assets/.gitkeep (0 bytes)
CREATE apps/customer-portal/src/environments/environment.prod.ts (52 bytes)
CREATE apps/customer-portal/src/environments/environment.ts (663 bytes)
CREATE apps/customer-portal/src/app/app.module.ts (419 bytes)
CREATE apps/customer-portal/src/app/app.component.html (3017 bytes)
CREATE apps/customer-portal/src/app/app.component.spec.ts (1051 bytes)
CREATE apps/customer-portal/src/app/app.component.ts (226 bytes)
CREATE apps/customer-portal/src/app/app.component.scss (2088 bytes)
CREATE apps/customer-portal/jest.config.js (369 bytes)
CREATE apps/customer-portal/tsconfig.spec.json (233 bytes)
CREATE apps/customer-portal/src/test-setup.ts (30 bytes)
CREATE apps/customer-portal-e2e/tslint.json (97 bytes)
CREATE apps/customer-portal-e2e/cypress.json (430 bytes)
CREATE apps/customer-portal-e2e/tsconfig.e2e.json (188 bytes)
CREATE apps/customer-portal-e2e/tsconfig.json (137 bytes)
CREATE apps/customer-portal-e2e/src/fixtures/example.json (80 bytes)
CREATE apps/customer-portal-e2e/src/integration/app.spec.ts (422 bytes)
CREATE apps/customer-portal-e2e/src/plugins/index.js (832 bytes)
CREATE apps/customer-portal-e2e/src/support/app.po.ts (47 bytes)
CREATE apps/customer-portal-e2e/src/support/commands.ts (1068 bytes)
CREATE apps/customer-portal-e2e/src/support/index.ts (599 bytes)
UPDATE package.json (1958 bytes)
UPDATE workspace.json (9408 bytes)
UPDATE nx.json (750 bytes)
UPDATE tslint.json (2311 bytes)
- app.module.ts
- tsconfig paths
- package.json
- apps and libs folders are empty
- Run the following command to launch the app in the browser. -a is for the app to start.
nx serve customer-portal
- It is best to commit often when using the code generation tools so you can easily undo if it is not correct.
git add .
git commit -m "generated customer-portal Angular app"

VS Codes Source Control Panel
git clone "https://github.com/duncanhunter/WIP-Demo-App-NDC-Oslo-2018-Enterprise-Angular-applications-with-ngrx-and-nx.git"
cd WIP-Demo-App-NDC-Oslo-2018-Enterprise-Angular-applications-with-ngrx-and-nx
npm install