Setting up an Nx workspace with nx-dotnet

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.

An embedded webpage:Nx After Dark: Setting up an Nx workspace with nx-dotnet

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 generatorpnpm install --global create-nx-workspace# Generate a blank Nx workspacepnpm init nx-workspace nx-dotnet-workspace --preset=empty --pm=pnpm --npm-scope=dotnet --no-nx-cloud

Configure Nx workspace

# Install the "json" utilitynpm install --global json# Set the base branch to "main"json -I -f nx.json -e "this.affected.defaultBase = 'main';"

Add .NET capability

# Add nx-dotnetpnpm add --save-dev @nx-dotnet/core# Initialize nx-dotnetnx generate @nx-dotnet/core:init

Configure Nx generator defaults

# Prefer nx-dotnet generatorsjson -I -f workspace.json -e "this.cli.defaultCollection = '@nx-dotnet/core';"# Set defaults for nx-dotnet's "app" and "lib" generatorsjson -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' } };"

Create web API project

# Generate web API and testing projectsnx 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 projectjson -I -f workspace.json -e "this.defaultProject = 'weather-api';"

Generate GitHub Actions CI workflow

# Install GitHub Actions .NET templatedotnet new -i TimHeuer.GitHubActions.Templates::1.0.5# Generate GitHub Actions CI workflowdotnet new workflow

Use Nx for Build job

Remove the Restore step from .github/workflows/nx-dotnet-workspace.yaml.

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

Change the run command of the Build step to:
```
pnpm build
```
Change the run command of the Test step to:
```
pnpm test
```

Adjust NPM scripts

Change the build script in package.json to:
```
nx build --configuration=production
```
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

or the affected depdency graph by running:

pnpm affected:dep-graph

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.

Next article Setting up an Angular 12 workspace with Nx and GitHub Actions