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

thangchung profile image

CoffeeShop App Infused with AI - Intelligent Apps Development

Thang Chung -

himanshu_fb2e29b6b2f52338 profile image

🎉 𝗚𝗶𝘁 𝗖𝗵𝗲𝗮𝘁 𝗦𝗵𝗲𝗲𝘁 𝗳𝗼𝗿 𝗛𝗮𝗰𝗸𝘁𝗼𝗯𝗲𝗿𝗳𝗲𝘀𝘁 2024! 🎉

Himanshu -

elanatframework profile image

CodeBehind 3.7 Released

elanatframework -

ashwingopalsamy profile image

Git: Set Up Commit Signing with GPG on Mac ✅

Ashwin Gopalsamy -