97 lines
5.5 KiB
Markdown
97 lines
5.5 KiB
Markdown
# 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
|
|
|
|
```bash
|
|
# 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](../../.agent/skills/api-aggregation/SKILL.md) - BFF Pattern
|
|
- [Project Rules](../../.agent/skills/project-rules/SKILL.md)
|