|
1 | 1 | # Nx + Angular + .NET 10.0 |
2 | 2 |
|
3 | | -This is basic demo of how to use a full stack [Nx monorepo](https://nx.dev/getting-started/tutorials/angular-monorepo-tutorial) with [Angular](https://angular.dev) and .NET 10.0 with [Microsoft.AspNetCore.SpaServices.Extensions](https://docs.microsoft.com/en-us/aspnet/core/client-side/spa/angular) and a demo Azure pipeline for Azure DevOps. |
| 3 | +A full-stack demo using an [Nx monorepo](https://nx.dev) with [Angular](https://angular.dev) (zoneless, signals) and a .NET 10.0 Web API backend. Deployed to Azure App Service with automated PR preview deployments via Azure Static Web Apps. |
4 | 4 |
|
5 | | -## Demo |
| 5 | +## Tech stack |
6 | 6 |
|
7 | | -See a live demo here: [https://angularclinetcorengrxstarter.azurewebsites.net/](https://angularclinetcorengrxstarter.azurewebsites.net/) |
| 7 | +**Frontend** |
8 | 8 |
|
9 | | -## Getting Started? |
| 9 | +- [Angular 21](https://angular.dev) — zoneless change detection, standalone components, signals |
| 10 | +- [NgRx Signal Store](https://ngrx.io/guide/signals) — reactive state management |
| 11 | +- [Angular Material](https://material.angular.io) — UI component library |
| 12 | +- [Tailwind CSS v4](https://tailwindcss.com) — utility-first styling |
| 13 | +- [Angular PWA](https://angular.dev/ecosystem/service-workers) — service worker & offline support |
10 | 14 |
|
11 | | -- **Make sure you have at least Node 24.x or higher (w/ pnpm 10+) installed!** |
12 | | -- **This repository uses ASP.NET 10.0, which has a hard requirement on .NET SDK 10.0.x. Please install these items from [https://dotnet.microsoft.com/download](https://dotnet.microsoft.com/download)** |
| 15 | +**Backend** |
13 | 16 |
|
14 | | -## Visual Studio 2022 |
| 17 | +- [.NET 10.0](https://dotnet.microsoft.com) Web API |
| 18 | +- [ASP.NET Core Identity](https://learn.microsoft.com/en-us/aspnet/core/security/authentication/identity) — bearer token authentication |
| 19 | +- [Entity Framework Core](https://learn.microsoft.com/en-us/ef/core/) with Azure SQL |
15 | 20 |
|
16 | | -Make sure you have .NET 10.0 installed and/or the latest VS2026. |
| 21 | +**Tooling** |
17 | 22 |
|
18 | | -## Visual Studio Code |
| 23 | +- [Nx](https://nx.dev) — monorepo build system with affected commands |
| 24 | +- [Vitest](https://vitest.dev) — unit tests |
| 25 | +- [Playwright](https://playwright.dev) — end-to-end tests |
| 26 | +- [pnpm](https://pnpm.io) — package manager |
19 | 27 |
|
20 | | -> Note: Make sure you have the C# extension & .NET Debugger installed. |
| 28 | +## Demo |
21 | 29 |
|
22 | | - pnpm install |
| 30 | +Live demo: [https://angularclinetcorengrxstarter.azurewebsites.net/](https://angularclinetcorengrxstarter.azurewebsites.net/) |
23 | 31 |
|
24 | | -## Serve Development App |
| 32 | +## Getting started |
25 | 33 |
|
26 | | -``` |
27 | | -pnpm start |
28 | | -``` |
| 34 | +**Prerequisites** |
29 | 35 |
|
30 | | -Both the api (dotnet) and web app (Angular) will build and run in dev mode. Open your browser on http://localhost:4200/ to see the Angular app, or https://localhost:60254/swagger to see the api documentation generated by Swagger. |
| 36 | +- Node 24.x+ with pnpm 10+ |
| 37 | +- .NET SDK 10.0.x — [download](https://dotnet.microsoft.com/download) |
31 | 38 |
|
32 | | -## Serve Production App (PWA enabled) |
| 39 | +**Install dependencies** |
33 | 40 |
|
| 41 | +```bash |
| 42 | +pnpm install |
34 | 43 | ``` |
35 | | -pnpm serve:prod |
| 44 | + |
| 45 | +## Serve development app |
| 46 | + |
| 47 | +```bash |
| 48 | +pnpm start |
36 | 49 | ``` |
37 | 50 |
|
| 51 | +Starts both the .NET API and Angular app in dev mode. Open [http://localhost:4200](http://localhost:4200) for the app, or [https://localhost:60254/swagger](https://localhost:60254/swagger) for the API docs. |
| 52 | + |
38 | 53 | ## Lint |
39 | 54 |
|
40 | | -``` |
| 55 | +```bash |
41 | 56 | pnpm lint |
42 | 57 | ``` |
43 | 58 |
|
44 | | -## Unit Tests |
45 | | - |
46 | | -Run unit tests by executing: |
| 59 | +## Unit tests |
47 | 60 |
|
48 | | -``` |
| 61 | +```bash |
49 | 62 | pnpm test |
50 | 63 | ``` |
51 | 64 |
|
52 | | -Please note that for test coverage you need dotnet-coverage to be installed: |
| 65 | +Coverage requires `dotnet-coverage`: |
53 | 66 |
|
54 | | -``` |
| 67 | +```bash |
55 | 68 | dotnet tool install --global dotnet-coverage |
56 | 69 | ``` |
57 | 70 |
|
58 | | -More information is available on https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-test |
59 | | - |
60 | | -## End-to-end Tests |
| 71 | +## End-to-end tests |
61 | 72 |
|
62 | | -Run e2e tests by executing: |
63 | | - |
64 | | -``` |
| 73 | +```bash |
65 | 74 | pnpm e2e |
66 | 75 | ``` |
67 | 76 |
|
68 | | -## Build Production App |
| 77 | +## Build for production |
69 | 78 |
|
70 | | -Build the production Angular app and Publish the release .NET app, run: |
71 | | - |
72 | | -``` |
| 79 | +```bash |
73 | 80 | pnpm build:prod |
74 | 81 | ``` |
75 | 82 |
|
76 | | -The contents of the. `/dist` folder should now contain something that can be deployed to and Azure web service or IIS instance. |
| 83 | +Builds the Angular app and publishes the .NET project to `/dist`, ready to deploy to Azure App Service. |
0 commit comments