Setting Up a Full-Stack Web Application Using Nx Workspace

3 min readApr 29, 2022

An usual full-stack application has front-end side with web server and back-end side with application server both. In this article, we are creating a web api with .NET 6 and web application with Angular 13. Most importantly, we are doing this with a NX workspace.

If you are not familiar with NX environment and monorepo architecture, you can start from the article below.

Building Enterprise Web Applications with Monorepo Architecture

During modern software development, developers want to see clear environment, scalable and brighter future like end…

medium.com

Requirements

Creating a Nx Workspace

> npx create-nx-workspace@latest
Need to install the following packages:
  create-nx-workspace@latest
Ok to proceed? (y) y
√ Workspace name (e.g., org name)     · my-workspace
> apps              [an empty workspace with no plugins with a layout that works best for building apps]
  core              [an empty workspace with no plugins set up to publish npm packages (similar to yarn workspaces)]
  ts                [an empty workspace with the JS/TS plugin preinstalled]
  react             [a workspace with a single React application]
  angular           [a workspace with a single Angular application]
  next.js           [a workspace with a single Next.js application]
  nest              [a workspace with a single Nest application]
  express           [a workspace with a single Express application]
  web components    [a workspace with a single app built using web components]
  react-native      [a workspace with a single React Native application]
  react-express     [a workspace with a full stack application (React + Express)]
  angular-nest      [a workspace with a full stack application (Angular + Nest)]
√ Use Nx Cloud? (It's free and doesn't require registration.) · No>  NX   Nx is creating your v13.10.0 workspace.To make sure the command works reliably in all environments, and that the preset is applied correctly,
   Nx will run "pnpm install" several times. Please wait.√ Installing dependencies with pnpm
√ Nx has successfully created the workspace.

Configuring .NET Environment

> npm i --save-dev @nx-dotnet/core

Creating a .NET Web API

> npm i --save-dev @nx-dotnet/core
> npx nx g @nx-dotnet/core:app my-api --test-template nunit --language C#
√ What template should the project be initialized with? (https://docs.microsoft.com/en-us/dotnet/core/tools/dotnet-new#template-options) · webapi

If everthing goes well, you can serve it with that command below.

> npx nx serve my-api

Creating a .NET Class Library

> npx nx g @nx-dotnet/core:lib library-a --template classlib --test-template none --language C#
> npx nx g @nx-dotnet/core:lib library-b --template classlib --test-template none --language C#
> npx nx g @nx-dotnet/core:lib shared--template classlib --test-template none --language C#

Configuring Boundaries Without ESLint

Currently, we have three class libraries and one web api application. If we do not use ESLint, NX added similar support to nx-dotnet for this configurations. We can use .nx-dotnet.rc.json file.

{
"nugetPackages": {},
"moduleBoundaries": [
 {
  "onlyDependOnLibsWithTags": ["type:a"],
  "sourceTag": "type:app"
 },
 {
  "onlyDependOnLibsWithTags": ["type:a", "type:b", "type:shared"],
  "sourceTag": "type:a"
 },
 {
  "onlyDependOnLibsWithTags": ["type:b", "type:shared"],
  "sourceTag": "type:b"
 },
 {
  "onlyDependOnLibsWithTags": ["type:shared"],
   "sourceTag": "type:shared"
 }
]
}

In this case, if we add shared library to app as a project reference, we can not build. Let us see.

> nx build my-api
> ...
> Checking module boundaries for my-api
  my-api cannot depend on shared. Project tag {"onlyDependOnLibsWithTags":["type:library"],"sourc

Adding Project Reference And Dep-Graph

> dotnet add apps/my-api/MyWorkspace.MyApi.csproj reference libs/library-a/MyWorkspace.LibraryA.csproj
> dotnet add libs/library-a/MyWorkspace.LibraryA.csproj reference libs/library-b/MyWorkspace.LibraryB.csproj
> dotnet add libs/library-a/MyWorkspace.LibraryA.csproj reference libs/shared/MyWorkspace.Shared.csproj
> dotnet add libs/library-b/MyWorkspace.LibraryB.csproj  reference libs/shared/MyWorkspace.Shared.csproj
> nx dep-graph

Creating an Angular Application

> npm i @nrwl/angular
> nx g @nrwl/angular:app my-angular-app

You can find entire code below.

https://stackblitz.com/github/wmailnyxa?file=package.json

Resources