Setting up an Angular 12 workspace with Nx and GitHub Actions

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 workspa…


This content originally appeared on DEV Community and was authored by Lars Gyrup Brink Nielsen

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


This content originally appeared on DEV Community and was authored by Lars Gyrup Brink Nielsen


Print Share Comment Cite Upload Translate Updates
APA

Lars Gyrup Brink Nielsen | Sciencx (2021-05-21T13:21:54+00:00) Setting up an Angular 12 workspace with Nx and GitHub Actions. Retrieved from https://www.scien.cx/2021/05/21/setting-up-an-angular-12-workspace-with-nx-and-github-actions/

MLA
" » Setting up an Angular 12 workspace with Nx and GitHub Actions." Lars Gyrup Brink Nielsen | Sciencx - Friday May 21, 2021, https://www.scien.cx/2021/05/21/setting-up-an-angular-12-workspace-with-nx-and-github-actions/
HARVARD
Lars Gyrup Brink Nielsen | Sciencx Friday May 21, 2021 » Setting up an Angular 12 workspace with Nx and GitHub Actions., viewed ,<https://www.scien.cx/2021/05/21/setting-up-an-angular-12-workspace-with-nx-and-github-actions/>
VANCOUVER
Lars Gyrup Brink Nielsen | Sciencx - » Setting up an Angular 12 workspace with Nx and GitHub Actions. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/05/21/setting-up-an-angular-12-workspace-with-nx-and-github-actions/
CHICAGO
" » Setting up an Angular 12 workspace with Nx and GitHub Actions." Lars Gyrup Brink Nielsen | Sciencx - Accessed . https://www.scien.cx/2021/05/21/setting-up-an-angular-12-workspace-with-nx-and-github-actions/
IEEE
" » Setting up an Angular 12 workspace with Nx and GitHub Actions." Lars Gyrup Brink Nielsen | Sciencx [Online]. Available: https://www.scien.cx/2021/05/21/setting-up-an-angular-12-workspace-with-nx-and-github-actions/. [Accessed: ]
rf:citation
» Setting up an Angular 12 workspace with Nx and GitHub Actions | Lars Gyrup Brink Nielsen | Sciencx | https://www.scien.cx/2021/05/21/setting-up-an-angular-12-workspace-with-nx-and-github-actions/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts