Migrating app to Blazor

[otto1999haertel]

• Creating PWA by switching from server site to client site architecture

• Use Blazor WebAssembly (WASM) for client activity

• Create manifest.json in root path of app (FuelDistanceCalculator) and link it with main page (Layout.cshtml )

• Create service worker in root path and register it in JS of Main page

• seperating front from backend and introducing microservices => introducing new docker container

• Berechnung Server: rohe Datenabfrage aller Tankstellen und Geo-Daten

• Berechnung Client: Sortierung von Ergebnissen, Berechnung der Gesamtkosten, Berechnung der Durchschnitsskosten pro Ort

• Client cache via IndexedDB oder LocalStorage

• getting startet: dotnet new blazorwasm -o MeineBlazorApp --pwa

• Docker adaptation:

• services:
  blazor-frontend:
  build: ./MeineBlazorApp
  ports:
  - "8080:80"
  api-backend:
  // Dein bestehendes Backend

• convert .cshtml zu .razor

• authentifizierung client seitig per jws token

• add wwwroot/manifest.json

• API Calls per Server (inkl. API Keys/ Rate Limits) => Multithreading/ schwere Berechnungen auf Server belassen

• Architektur: Frontend (UI Logik, ruft API vom Backend auf), Backend (sensible Logik, API aufrufe, Caching, Multithreading)

• Architektur mit SignalR: Komponenten mit unterschiedlichen Render-Modi (Client, Server, Hybrid..) => nicht notwendig, außer ich brauche Entzeit Updated

• Docker bleibt größtenteils erhalen: Hinzufügen einer Blazor WASM Frontend & fuelgo-web-app wird zu API

Angepasste docker-compose Datei:
`version: '3.8'

services:
redis:
image: redis:latest
container_name: redis
restart: always
volumes:
- redis_data:/data
networks:
- fuel-network

db:
image: postgres:latest
container_name: fuelgo-postgres
environment:
POSTGRES_USER: postgres
POSTGRES_PASSWORD: example
POSTGRES_DB: FuelDatabase
volumes:
- postgres-data:/var/lib/postgresql/data
networks:
- fuel-network

api-backend:
build:
context: ./backend
dockerfile: Dockerfile
container_name: fuelgo-api
environment:
- ASPNETCORE_ENVIRONMENT=${MODE_TYPE}
- ConnectionStrings__DefaultConnection=Host=db;Port=5432;Username=postgres;Password=example;Database=FuelDatabase
- REDIS_HOST=redis:6379
# Füge API-Keys hinzu, z. B. via Secrets oder Environment-Variablen
- EXTERNAL_API_KEY1=${EXTERNAL_API_KEY1}
- EXTERNAL_API_KEY2=${EXTERNAL_API_KEY2}
depends_on:
- db
- redis
networks:
- fuel-network
deploy:
resources:
limits:
cpus: '1.00'

blazor-frontend:
build:
context: ./frontend
dockerfile: Dockerfile
container_name: fuelgo-blazor
networks:
- fuel-network

nginx:
image: nginx:latest
container_name: fuelgo-nginx
restart: always
ports:
- "80:80"
- "443:443"
volumes:
- ./nginx/default.conf:/etc/nginx/conf.d/default.conf:ro
- ${CERT_CRT_PATH}:/etc/nginx/certs/cert.crt:ro
- ${CERT_KEY_PATH}:/etc/nginx/certs/cert.key:ro
depends_on:
- api-backend
- blazor-frontend
networks:
fuel-network:
ipv4_address: 172.19.0.5

networks:
fuel-network:
driver: bridge
ipam:
config:
- subnet: 172.19.0.0/24

volumes:
postgres-data:
redis_data:`

• Zwei Docker files für aüi-backend & balzor-frontend

• Verzeichnisstruktur:
  fuelgo/
  ├── frontend/ # Blazor WASM App
  │ ├── Program.cs
  │ ├── App.razor
  │ ├── wwwroot/
  │ │ ├── manifest.json
  │ │ ├── service-worker.js
  │ │ └── icons/
  │ └── Pages/
  ├── backend/ # .NET Web API Projekt
  │ ├── Controllers/
  │ ├── Services/
  │ └── Data/
  ├── nginx/
  │ └── default.conf
  ├── docker-compose.yml
  ├── .env
  └── README.md

• Anpassung der nginx config: hinzufügen von location/ Abschnitten