Projekt-opsætning

Læringsmål

• Oprette Blazor Web App med korrekt workload og .NET-version.
• Navigere i Components, wwwroot og Program.cs.
• Tilføje Docker support og forstå env-baseret konfiguration.
• Genkende typiske fejl ved første run (HTTPS, render mode, port).

Hvornår Docker tidligt? Før første deploy til Dokploy — så I opdager forkert port, manglende env og hardcoded localhost før censor-demo.

Sørg for at Visual Studio har workloaden ASP.NET and web development (inkl. Docker-support). Brug .NET 8 eller .NET 10 — undervisningsmaterialet følger Blazor Web App-skabelonen, ikke legacy Blazor Server-only templates.

Opret projektet med skabelonen Blazor Web App. Vælg HTTPS, «Configure for HTTPS», og interactivity: typisk Interactive Server globalt.

Filstruktur — interaktivt træ

Hvornår ny fil? Ny @page → Components/Pages. Genbrugeligt kort → Components/Shared. HTTP mod OpgaverAPI → Services/ + interface — ikke alt i Pages.

Program.cs forklaret

Program.cs er indgangen: DI-container, middleware pipeline, endpoint mapping.

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents();

// Senere: HttpClient til OpgaverAPI
builder.Services.AddHttpClient("opgaver", c =>
{
    c.BaseAddress = new Uri(builder.Configuration["OpgaverApi:BaseUrl"]!);
});

var app = builder.Build();

if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error", createScopeForErrors: true);
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseAntiforgery();
app.MapStaticAssets();
app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode();

app.Run();

MapRazorComponents<App> kobler routing til jeres komponenter. Antiforgery beskytter forms. Static assets serverer CSS fra wwwroot.

Checkliste før første API-kald: OpgaverApi:BaseUrl i config → AddHttpClient → breakpoint i service → F5 → Network viser korrekt host.

appsettings og secrets

{
  "OpgaverApi": {
    "BaseUrl": "https://api-opgaver.mercantec.tech"
  }
}

API-nøgler og OAuth secrets hører ikke i appsettings der committes — brug user secrets lokalt og env vars i Docker/Dokploy.

Docker

Højreklik projekt → Add → Docker Support. Dockerfile multi-stage build: restore, publish, runtime image. I Dokploy deployes typisk med docker compose up -d --build — samme mønster som APIer-repoet (web offentlig, api/db intern).

Typiske fejl ved første run

• HTTPS certificate — trust dev cert (dotnet dev-certs https --trust).
• Tom interaktiv side — mangler render mode eller AddInteractiveServerRenderMode.
• CORS — opstår når I kalder API fra forkert origin; Blazor Server kalder ofte server-side (mindre CORS), WASM kalder fra browser (CORS skal passe).
• Hardcoded localhost API — virker ikke i container; brug config.

Hvornår user secrets? Lokal udvikling på Windows — dotnet user-secrets set "OpgaverApi:DevKey" "...". Dokploy: samme nøgler som env på compose-service, aldrig i image layers.

Hvorfor det betyder noget: Uden styr på Program.cs og env ender Pokémon-base URL som localhost i Docker på Dokploy.

Baseret på MAGS Blazor-wiki og Microsoft Learn — Blazor.