Step 5 - Add the PWA

CAUTION: I replaced my personal crblazordemo acr and ramboe.io domain from the video with your-acr and your.domain

1 - Add the PWA wasm project to the Solution

dotnet new blazorwasm -n BlazorDemo.Frontend.Pwa --pwa

--pwa adds the static files and html we need to have the pwa experience

Set Project References for infra and ui

dotnet reference add BlazorDemo.Frontend.Shared.Ui/BlazorDemo.Frontend.Shared.Ui.csproj --project BlazorDemo.Frontend.Pwa/BlazorDemo.Frontend.Pwa.csproj

dotnet reference add BlazorDemo.Frontend.Shared.Infrastructure/BlazorDemo.Frontend.Shared.Infrastructure.csproj --project BlazorDemo.Frontend.Pwa/BlazorDemo.Frontend.Pwa.csproj

Update sln

dotnet sln add **/*.csproj

Code

BlazorDemo.Frontend.Pwa/Program.cs

...

var uriString = builder.Configuration.GetValue<string>("ApiUrl");
var baseUrl = new Uri(uriString);

builder
    .Services.AddHttpClient<HttpWeatherClient>()
    .ConfigureHttpClient(c => c.BaseAddress = baseUrl);

BlazorDemo.Frontend.Pwa/BlazorDemo.Frontend.Pwa.csproj

dotnet package add Microsoft.Extensions.Http --project BlazorDemo.Frontend.Pwa

add support for AddHttpClient()

wwwroot/appsettings.Production.json

{
  "ApiUrl": "https://blazordemo-api.your.domain"
}

wwwroot/appsettings.json

{
  "ApiUrl": "http://localhost:<YOURPORT>/"
}

add custom layout > App.razor

@using BlazorDemo.Frontend.Shared.Ui
<Router AppAssembly="@typeof(App).Assembly" NotFoundPage="typeof(Pages.NotFound)">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(CustomLayout)"/>
        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
    </Found>
</Router>

Make the API allow cross-origin resource sharing

BlazorDemo.Backend.Api/Program.cs

Add cors with policy to DI container

builder.Services.AddCors(options =>
{
    options.AddPolicy(
        "AllowAll",
        policy =>
        {
            policy
                .AllowAnyOrigin()
                .AllowAnyHeader()
                .AllowAnyMethod();
        }
    );
});

use cors policy from DI container

app.UseCors("AllowAll");

2 - Hosting

put repo in azure

In this demo we serve the PWA via Caddy since the PWA is just static files that don't rely on kestrel. This part of the tutorial works also for any other web app consisting of static files only.

BlazorDemo.Frontend.Pwa/Caddyfile

:80 {
    root * /srv
    encode zstd gzip

    try_files {path} /index.html
    file_server
}

BlazorDemo.Frontend.Pwa/Dockerfile

FROM mcr.microsoft.com/dotnet/sdk:10.0 AS build
WORKDIR /src

COPY . .

RUN dotnet restore BlazorDemo.Frontend.Pwa/BlazorDemo.Frontend.Pwa.csproj
RUN dotnet publish BlazorDemo.Frontend.Pwa/BlazorDemo.Frontend.Pwa.csproj -c Release -o /app/publish

FROM caddy:2
COPY BlazorDemo.Frontend.Pwa/Caddyfile /etc/caddy/Caddyfile
COPY --from=build /app/publish/wwwroot /srv

CLI

docker build -t your-acr.azurecr.io/ramboe/blazordemo-frontend-wasm:latest -f BlazorDemo.Frontend.Pwa/Dockerfile .

docker push your-acr.azurecr.io/ramboe/blazordemo-frontend-wasm:latest

include new repo in infrastructure

SolutionItems/Caddyfile

blazordemo-frontend-wasm.your.domain {
  reverse_proxy wasm:80
}   

Remember to add A-Record in your domain provider >

SolutionItems/docker-compose.yml

# ... append this

    wasm:
        image: "your-acr.azurecr.io/ramboe/blazordemo-frontend-wasm:latest"
        restart: always
        container_name: "blazordemo-frontend-wasm"
        environment:
            - ASPNETCORE_ENVIRONMENT=Production
        ports:
            - "80"
        networks:
            - caddy

update remote machine

1. update Caddyfile and docker-compose.yaml with rsync
2. docker-compose pull
3. browse https://blazordemo-frontend-wasm.your.domain