In this episode of Nx After Dark, we're creating an Nx workspace for an Angular 12 app called Energy Insights. We're also setting up a GitHub Actions workflow and connecting it to Nx Cloud.
Follow the instructions below to set up a similar workspace or browse the end result at github/LayZeeDK/energy-insights.
Prerequisites
- Node.js 14.x
- PNPM
Note that there's currently an issue with using Cypress with PNPM. Let me know if you figure out how to fix it. Until then, remove Cypress from the workspace or use either Yarn or NPM.
Create Nx workspace
# Install the Nx workspace generator
pnpm install --global create-nx-workspace
# Generate a blank Nx workspace
pnpm init nx-workspace my-workspace --preset=empty --pm=pnpm --npm-scope=my-workspace --nx-cloud
Configure Nx workspace
# Install the "json" utility
npm install --global json
# Set the base branch to "main"
json -I -f nx.json -e "this.affected.defaultBase = 'main';"
Add Angular capability
# Add Angular capability
pnpm add --save-dev @nrwl/angular
# Initialize Angular workspace
nx generate @nrwl/angular:init
Generate Angular app project
# Generate Angular app project
nx generate app my-app
See the video for examples of:
- Setting up generator defaults
- Creating a GitHub Actions CI workflow
- Setting up GitHub workflow triggers
- Connecting Nx Cloud for distributed computation caching
- Remove Cypress
Top comments (9)
Hi Lars,
To solve cypress issue add following to your .npmrc
Thanks, I've been trying to solve it lately and figured out the readPackage hook that makes it work locally on Windows. Unfortunately, Cypress still fails on the GitHub Ubuntu runner. Not sure why. Maybe because @nrwl/cypress depends on Webpack 4, not 5.
Hmm. Adding provided two lines to .npmrc solved it for me on all 3 platforms.
From github.com/LayZeeDK/temp-nx-angula...
Are you using Nx 12.3.5, Node.js 14.17.0, Cypress 7.4.0, and PNPM 6.x?
Yeah. Please try
pnpm add any-observable && pnpm iI've tried it in 3 different repos. It doesn't work :-/
That’s weird. After I explicitly added any-observable it started to work for new repo.
In a GitHub workflow? Please share a repo.