pos-system/apps/web-client-base-net

WebClientBase - Blazor Web App .NET 10

Base frontend web application cho GoodGo Platform được xây dựng với Blazor WebAssembly + BFF Pattern.

Architecture / Kiến trúc

┌─────────────────────────────────────────────────────────────────────┐
│                           Browser                                    │
│  ┌─────────────────────────────────────────────────────────────┐   │
│  │              Blazor WebAssembly Client                        │   │
│  └─────────────────────────────────────────────────────────────┘   │
└────────────────────────────────┬────────────────────────────────────┘
                                 │ /api/*
                                 ▼
┌─────────────────────────────────────────────────────────────────────┐
│                    BFF (Backend for Frontend)                        │
│                   WebClientBase.Server + YARP                        │
│  ┌─────────────────────────────────────────────────────────────┐   │
│  │ Routes:  /api/iam/**    → iam-service                        │   │
│  │          /api/merchants/** → merchant-service                │   │
│  │          /api/catalog/**   → catalog-service                 │   │
│  │          /api/orders/**    → order-service                   │   │
│  └─────────────────────────────────────────────────────────────┘   │
└────────────────────────────────┬────────────────────────────────────┘
                                 │ Internal Network
                                 ▼
┌─────────────────────────────────────────────────────────────────────┐
│                        Microservices                                 │
│   ┌──────────┐   ┌──────────┐   ┌──────────┐   ┌──────────┐        │
│   │   IAM    │   │ Merchant │   │ Catalog  │   │  Order   │        │
│   │ :5101    │   │  :5102   │   │  :5103   │   │  :5104   │        │
│   └──────────┘   └──────────┘   └──────────┘   └──────────┘        │
└─────────────────────────────────────────────────────────────────────┘

Tech Stack

Layer	Technology
Client	Blazor WebAssembly (.NET 10)
BFF	ASP.NET Core + YARP Reverse Proxy
Shared	Class Library với Data Annotations
Styling	CSS Variables, Dark Mode

Project Structure / Cấu trúc dự án

web-client-base-net/
├── WebClientBase.slnx              # Solution file
├── src/
│   ├── WebClientBase.Client/       # Blazor WebAssembly
│   │   ├── Layout/                 # MainLayout, NavMenu
│   │   ├── Pages/                  # Razor pages
│   │   └── wwwroot/css/            # Design System CSS
│   ├── WebClientBase.Server/       # BFF with YARP Proxy
│   │   ├── Program.cs              # YARP configuration
│   │   └── yarp.json               # Routes configuration
│   └── WebClientBase.Shared/       # Shared Library
│       └── DTOs/                   # Data Transfer Objects
└── Dockerfile

Getting Started / Bắt đầu

# Navigate to project
cd apps/web-client-base-net

# Restore packages
dotnet restore

# Run BFF Server (hosts Blazor client + YARP proxy)
dotnet run --project src/WebClientBase.Server

# Open browser
# http://localhost:5091

BFF Routes Configuration

Routes được cấu hình trong yarp.json:

Client Route	Proxied To	Description
/api/iam/**	http://localhost:5101/	Identity & Access Management
/api/merchants/**	http://localhost:5102/	Merchant Service
/api/catalog/**	http://localhost:5103/	Catalog Service
/api/orders/**	http://localhost:5104/	Order Service

Note: Addresses có thể override qua environment variables trong production.

Related Skills

• API Aggregation - BFF Pattern
• Project Rules