DEV Community

Cover image for Setting up an Nx workspace with nx-dotnet
This is Learning profile image Lars Gyrup Brink Nielsen
Lars Gyrup Brink Nielsen for This is Learning

Posted on

Setting up an Nx workspace with nx-dotnet

#nx #dotnet #githubactions #github

In this episode of Nx After Dark, we're creating an Nx workspace for .NET project by using nx-dotnet. We're also setting up a GitHub Actions workflow.

Follow the instructions below to set up a similar workspace or browse the end result at github/LayZeeDK/nx-dotnet-workspace.

Prerequisites

  • .NET CLI
  • Node.js
  • PNPM
  • Nx CLI

Create Nx workspace 

# Install the Nx workspace generator
pnpm install --global create-nx-workspace
# Generate a blank Nx workspace
pnpm init nx-workspace nx-dotnet-workspace --preset=empty --pm=pnpm --npm-scope=dotnet --no-nx-cloud
Enter fullscreen mode Exit fullscreen mode

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';"
Enter fullscreen mode Exit fullscreen mode

Add .NET capability 

# Add nx-dotnet
pnpm add --save-dev @nx-dotnet/core
# Initialize nx-dotnet
nx generate @nx-dotnet/core:init
Enter fullscreen mode Exit fullscreen mode

Configure Nx generator defaults 

# Prefer nx-dotnet generators
json -I -f workspace.json -e "this.cli.defaultCollection = '@nx-dotnet/core';"
# Set defaults for nx-dotnet's "app" and "lib" generators
json -I -f workspace.json -e "this.generators = { '@nx-dotnet/core:app': { language: 'C#', tags: 'type:api', template: 'webapi', testTemplate: 'xunit' }, '@nx-dotnet/core:lib': { language: 'C#', template: 'classlib', testTemplate: 'xunit' } };"
Enter fullscreen mode Exit fullscreen mode

Create web API project 

# Generate web API and testing projects
nx generate app weather-api
# Tag testing project with "type:test"
json -I -f nx.json -e "this.projects['weather-api-test'].tags = ['type:test'].concat(this.projects['weather-api-test'].tags.slice(1));"
# Set weather-api as default Nx project
json -I -f workspace.json -e "this.defaultProject = 'weather-api';"
Enter fullscreen mode Exit fullscreen mode

Generate GitHub Actions CI workflow 

# Install GitHub Actions .NET template
dotnet new -i TimHeuer.GitHubActions.Templates::1.0.5
# Generate GitHub Actions CI workflow
dotnet new workflow
Enter fullscreen mode Exit fullscreen mode

Use Nx for Build job

  1. Remove the Restore step from .github/workflows/nx-dotnet-workspace.yaml.
  2. Add Setup Node.js step after Setup .NET Core SDK step: 
   - name: Setup Node.js
     uses: actions/setup-node@v1
     with:
       node-version: 12.x
   - name: Install PNPM
     run: npm install --global pnpm
   - name: Install Nx dependencies
     run: pnpm install
Enter fullscreen mode Exit fullscreen mode
  1. Change the run command of the Build step to: 
   pnpm build
Enter fullscreen mode Exit fullscreen mode
  1. Change the run command of the Test step to: 
   pnpm test
Enter fullscreen mode Exit fullscreen mode

Adjust NPM scripts

  1. Change the build script in package.json to:

    nx build --configuration=production

  2. Change the test script in package.json to:

    nx test weather-api-test

Dependency graph

No we can explore the dependency graph by running:

pnpm dep-graph
Enter fullscreen mode Exit fullscreen mode

or the affected depdency graph by running:

pnpm affected:dep-graph
Enter fullscreen mode Exit fullscreen mode

CI workflow

The Build workflow is run on every push to the main branch.

Remove the condition (if:) from the Build job to enable the manual workflow trigger. We are then able to use the Run workflow button from the Actions tab in our GitHub repository.

Top comments (0)

Read next

bytehide profile image

Console.WriteLine in C#: How To Use It

ByteHide -

ssukhpinder profile image

Day 10 of 30-Day .NET Challenge: File Paths

Sukhpinder Singh -

asimmon profile image

Running Ruby on Rails web apps with .NET Aspire

Anthony Simmon -

michaeljolley profile image

.NET AI Smart Components

Michael Jolley -