.NET and Angular Sandbox

Some buzzwords that are used:

• Aspire
• .NET (Minimal) API
  • EF Core Migrations
• Angular
• OpenTelemetry
• YARP
• Containers
• Azure Developer CLI (azd)
• Authentication (WIP)

graph TD
    User["Browser (User)"] --> Gateway

    subgraph "External Facing Components"
        Gateway["API Gateway (YARP)<br>Sandbox.Gateway"]
        Auth0["Auth0<br>Authentication Provider"]
    end

    subgraph "Internal Components"
        AngularApp["Angular Frontend<br>Sandbox.AngularWorkspace"]
        ApiService["API Service<br>Sandbox.ApiService<br>[x2 replicas]"]
        SqlDatabase["SQL Server Database"]
        DbMigrations["Database Migrations<br>Sandbox.ApiService.Migrations"]
        KeyVault["Azure KeyVault<br>(Secrets Management)"]

        Gateway --> AngularApp
        Gateway --> ApiService
        ApiService --> SqlDatabase
        SqlDatabase -.-o DbMigrations
        Gateway -.-> KeyVault
        ApiService -.-> KeyVault
        Gateway -.-> Auth0
    end

    subgraph "Monitoring"
        OpenTelemetry["OpenTelemetry Collector<br>Metrics, Traces, Logs"]
        Gateway -.-> OpenTelemetry
        AngularApp -.-> OpenTelemetry
        ApiService -.-> OpenTelemetry
        SqlDatabase -.-> OpenTelemetry
    end

    classDef externalFacing fill:#f96,stroke:#333,stroke-width:3px,stroke-dasharray: 5 5;
    classDef gateway fill:#f9f,stroke:#333,stroke-width:2px;
    classDef frontend fill:#bbf,stroke:#333,stroke-width:1px;
    classDef backend fill:#bfb,stroke:#333,stroke-width:1px;
    classDef database fill:#fbb,stroke:#333,stroke-width:1px;
    classDef secrets fill:#9cf,stroke:#333,stroke-width:1px;
    classDef auth fill:#f99,stroke:#333,stroke-width:1px;
    classDef monitoring fill:#ffd,stroke:#333,stroke-width:1px;

    class Gateway gateway,externalFacing;
    class Auth0 auth,externalFacing;
    class AngularApp frontend;
    class ApiService backend;
    class SqlDatabase,DbMigrations database;
    class KeyVault secrets;
    class OpenTelemetry monitoring;

Loading

Prerequisites

• .NET 9
• pnpm - npnm is also fine but you need to install the dependencies manually (go to the Sandbox.AngularWorkspace folder and run npm install)
• Containerization tool (podman, docker, etc)

Run the project locally

Clone the project and run the dotnet run command in the root folder to start the project.

dotnet run --project ./Sandbox.AppHost

Result

While the project runs you should see the Aspire dashboard. The first time this can take a while to spin up the containers and download the images.

Navigating to the gateway opens the Angular app, which invokes the .NET API. Interacting with the application will generate traces that are sent to the Aspire dashboard, which can be looked at in real-time through the "Traces" tab in the dashboard.

With the corresponding logs for the traces.

Deploy to Azure

To deploy the project, make sure you have an Azure subscription and azd installed.

Then, run the following commands to provision the resources and deploy the project:

azd init
azd up