<div align="center"> <img src="./other/logo.svg" alt="Sandbox Logo" width="200"/>

.NET and Angular Sandbox

</div>

Some buzzwords that are used:

• Aspire
• .NET (Minimal) API
  • EF Core (with Migrations)
• Angular
• Redis with FusionCache (distributed hybrid caching with backplane synchronization)
• OpenTelemetry
  • Grafana Stack (Tempo, Loki)
  • Prometheus (and Blackbox)
• YARP
• Containers
• Azure Developer CLI (azd)
• Authentication with Keycloak
• Secrets OPerationS (SOPS)
• Renovate for automatic dependency updates
• Testing
  • Angular tests with Vitest
  • .NET unit tests with TUnit
  • .NET integration tests with Testcontainers
  • End-to-End Testing with Playwright

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

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

    subgraph "Internal Components"
        AngularApp["Angular Frontend<br>Sandbox.AngularWorkspace"]
        ApiService["API Service<br>Sandbox.ApiService<br>"]
        SqlDatabase["SQL Server Database"]
        Redis["Redis Cache<br>FusionCache with Backplane"]
        DbMigrations["Database Migrations<br>Sandbox.ApiService.Migrations"]

        Gateway --> AngularApp
        Gateway --> ApiService
        ApiService --> SqlDatabase
        ApiService --> Redis
        SqlDatabase -.-o DbMigrations
        Gateway -.-> Keycloak
    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 cache fill:#fcb,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 Keycloak auth,externalFacing;
    class AngularApp frontend;
    class ApiService backend;
    class SqlDatabase,DbMigrations database;
    class Redis cache;
    class OpenTelemetry monitoring;

Prerequisites

• .NET 10
• pnpm
• Containerization tool (podman, docker, etc)

[!NOTE] Windows Long Path Support

Windows has a default path length limitation of 260 characters that may cause errors during Git operations with this repository (e.g., "Filename too long" errors). To enable long path support, run one of the following commands (see git config core.longpaths):

System-wide (requires Administrator privileges):

git config --system core.longpaths true

User-level (no Administrator required):

git config --global core.longpaths true

Secret Management with SOPS

The project uses SOPS (Secrets Operations) to encrypt sensitive configuration values:

• Encrypted Configuration: appsettings.encrypted.json files contain encrypted secrets
• Selective Encryption: Only fields matching secret patterns (Secret, Password, Key, Token) are encrypted
• Development Friendly: Non-sensitive configuration remains in plain text for easy reading

SOPS Quick Start

$env:SOPS_AGE_KEY_FILE = "./config/sops/age/keys.txt"
sops --decrypt "config/appsettings.encrypted.json" > "Sandbox.AppHost/appsettings.json"
sops --encrypt "Sandbox.AppHost/appsettings.json" > "config/appsettings.encrypted.json"

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

Aspire dashboard

The Aspire dashboard provides a comprehensive view of all running services, their health status, and resource utilization in the development environment.

Grafana Stack with OpenTelemetry data

The monitoring stack uses Grafana to visualize OpenTelemetry data collected from all services, providing insights into application performance, logs, traces, and health metrics.

Authentication using Keycloak

Keycloak serves as the identity and access management solution, providing secure authentication and authorization for the application.

OpenAPI Specification with Scalar

Scalar provides an interactive API documentation interface generated from the OpenAPI specification, allowing developers to explore and test API endpoints.

Additional Resources

• github/awesome-copilot: A collection of custom instructions, agents, prompts, and skills for GitHub Copilot.

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