We will be building out the beginning of two applications a customer portal and an admin portal.
1. Create a new Nx workspace in your workshop folder
Run the below command in a terminal to make a new nx workspace.
npx create-nx-workspace@latest
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 --collection=@nrwl/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)
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.
cd demo-app
cd code .
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.
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.