Merge pull request #7 from secure-web-apps/feature/complete-update-to-angular-cli

Feature/complete update to angular cli

Author: damienbod

.github/workflows/deploy-to-azure.yml

@@ -43,7 +43,7 @@ jobs:
         working-directory: ui
         run: npm install --force
 
-      - name: ui-nx-build
+      - name: ui-angular-cli-build
         working-directory: ui
         run: npm run build
 

.github/workflows/dotnet-and-npm-build.yml

@@ -25,7 +25,7 @@ jobs:
         working-directory: ui
         run: npm install --force
 
-      - name: ui-nx-build
+      - name: ui-angular-cli-build
         working-directory: ui
         run: npm run build
 

README.md

@@ -18,6 +18,8 @@
 [![Maintainability Rating](https://sonarcloud.io/api/project_badges/measure?project=secure-web-apps_EndToEndSecurityWeb&metric=sqale_rating&token=0d4ca287da2bcdd568de817048e1ff5ee611afe0)](https://sonarcloud.io/summary/overall?id=secure-web-apps_EndToEndSecurityWeb)
 [![Vulnerabilities](https://sonarcloud.io/api/project_badges/measure?project=secure-web-apps_EndToEndSecurityWeb&metric=vulnerabilities&token=0d4ca287da2bcdd568de817048e1ff5ee611afe0)](https://sonarcloud.io/summary/overall?id=secure-web-apps_EndToEndSecurityWeb)
 
+Secure Web application using ASP.NET Core, Angular, SonarQube Cloud and Terraform. Furthermore .NET Aspire is used for local development.
+
 This repository hosts the source code for our .NET User Group Switzerland tour.
 
 ## Introduction
@@ -30,6 +32,21 @@ This repository hosts the source code for our .NET User Group Switzerland tour.
 
 [ASP.NET Core/Angular](https://github.com/damienbod/bff-aspnetcore-angular)
 
+### Local development
+
+For local development environment setup proceed as follows:
+
+1. Check out the repository
+1. Install Angular CLI latest globally `npm install -g @angular/cli latest`
+1. Open `Bff.sln` in Visual Studio 2022 or later
+1. Set `Bff.AppHost` as startup project
+1. Run the project (F5)
+1. Open URL of `bffmicrosoftentraid-server` from the Aspire dashboard (usually `https://localhost:5001`)
+
+![BFF development](https://github.com/secure-web-apps/EndToEndSecurityWeb/blob/main/images/images/bff-arch-development_01.drawio.png)
+
+### Production
+
 ![BFF production](https://github.com/secure-web-apps/EndToEndSecurityWeb/blob/main/images/bff-arch-production_01.drawio.png)
 
 ## Agenda
@@ -41,22 +58,21 @@ This repository hosts the source code for our .NET User Group Switzerland tour.
   - Microsoft Entra ID
     - `Microsoft.Identity.Web`
     - Microsoft Graph 5 for profile data
-    - Profile data in UI (UserController)
+    - Profile data in UI (`UserController`)
 - Secure APIs
 - Session Security
 - DevSecOps
   - [build](.github/workflows/dotnet-and-npm-build.yml)
   - [deploy (IaC & app)](.github/workflows/deploy-to-azure.yml)
   - [quality (SonarQube Cloud)](.github/workflows/quality.yml)
-  - Analysis for different technical stacks (.csproj)
-  - sonar badges, build badges
+  - Analysis for different technical stacks (`.NET`, `JavaScript/TypeScript`, `Hashicorp Terraform`)
+  - Sonar badges, GitHub Actions workflows badges
 
 ## Other topics
 
 - What's missing for a production setup?
-  - infrastructure automation (terraform/bicep)
-  - authorization
-  - data requirements
+  - Authorization
+  - Data requirements
 
 ## Angular CLI Updates
 
@@ -70,15 +86,15 @@ ng update @angular/cli @angular/core
 
 ## History
 
-- 2025-10-31 Updated to Angular CLI and Angular 20.3.0, using vite in dev
-- 2025-10-31 Updated packages, added terraform, sonar SCA, SAST, improve pipelines
-- 2025-08-30 Updated packages, Angular 20
-- 2025-01-01 .NET 9, Angular 19
+- 2024-10-06 Angular 18.2.7, updated security headers
 - 2024-10-17 Updated security headers performance, updated packages
-- 2024-10-06 Updated Angular 18.2.7, updated security headers
+- 2025-01-01 .NET 9, Angular 19
+- 2025-08-30 Angular 20, updated packages
 - 2025-10-27 Updated NuGet packages
 - 2025-10-28 Updated frontend packages, added integration tests, added GitHub Actions workflows
 - 2025-10-30 Fixed deployment to Azure App Service, reverted Angular due to CSP nonce issues
+- 2025-10-31 Updated to Angular CLI and Angular 20.3.0, using vite in dev
+- 2025-10-31 Updated packages, added terraform, sonar SCA, SAST, improved GitHub Actions workflows
 
 ## Links
 

tests/BffMicrosoftEntraID.Server.IntegrationTests.csproj

@@ -12,8 +12,7 @@
       <PrivateAssets>all</PrivateAssets>
       <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
     </PackageReference>
-    <PackageReference Include="FluentAssertions" Version="8.8.0" />
-	<PackageReference Include="Microsoft.AspNetCore.Mvc.Testing" Version="9.0.10" />
+    <PackageReference Include="Microsoft.AspNetCore.Mvc.Testing" Version="9.0.10" />
     <PackageReference Include="Microsoft.NET.Test.Sdk" Version="18.0.0" />
     <PackageReference Include="xunit" Version="2.9.3" />
     <PackageReference Include="xunit.runner.visualstudio" Version="3.1.5">

ui/certs/Readme.md

@@ -1,18 +1,14 @@
-This certificate is only an example. Please use your own.
+# Installing Development Certificates
 
-Double click the pfx on a windows mc and use the 1234 password to install. 
+> [!IMPORTANT]
+> The certificate in this folder is for illustrative purposes only. Please use your own certificate.
 
-Add the certificates to the nx project for example in the **/certs** folder
+1. Double-click the `pfx` on a Windows machine and use the password `1234` to install.
+1. Add the certificates to the Angular CLI project, for example in the **/certs** folder.
+1. Update the `ui\angular.json` file to point to the certificate files:
 
-Update the nx project.json file:
-
-```json
-"serve": {
-    "executor": "@angular-devkit/build-angular:dev-server",
-    "options": {
-    "browserTarget": "ui:build",
-    "sslKey": "certs/dev_localhost.key",
-    "sslCert": "certs/dev_localhost.pem",
-    "port": 4201
-},
-```
+   ```json
+   "sslKey": "certs/dev_localhost.key",
+   "sslCert": "certs/dev_localhost.pem",
+   "port": 4201
+   ```