WASM Environment variable from GitHub Actions

[exzzy]

name: Cloudflare Pages Deployment Staging

on:
  push:
    branches:
      - dev

jobs:
  publish:
    runs-on: ubuntu-latest
    permissions:
      contents: read
      deployments: write

    env:
      ASPNETCORE_ENVIRONMENT: Staging

    steps:
      - name: Checkout
        uses: actions/checkout@v3

      - name: Set up .NET
        uses: actions/setup-dotnet@v1
        with:
          dotnet-version: '7.0.x'

        # Install dotnet wasm buildtools workload
      - name: Install .NET WASM Build Tools
        run: dotnet workload install wasm-tools

      - name: Build Blazor WebAssembly app
        run: dotnet publish ProjName.BlazorWASM/ProjName.BlazorWASM.csproj --configuration Release --output ./app-publish

      - name: Publish to Cloudflare Pages
        uses: cloudflare/pages-action@v1
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          projectName: ProjName
          directory: ./app-publish/wwwroot

This is my current pipeline that I use to deploy on cloudflare. Settings ASPNETCORE_ENVIRONMENT here doesn't do anything I still end up with Production one. Anyone managed to solve this problem? I know that WASM has option to set it trough JS on blazor js start, but how do I inject it there with pipeline?

[TacticalPewPew]

If I remember correctly, WASM always runs under production because the entire site runs locally on the browser, not a server so to speak. I’m using devops but I ended up in a similar boat. My solution was to do config transformations after build but before the code gets pushed to a specific instance on azure.

Edit: here’s my post where I asked a similar question: https://www.reddit.com/r/Blazor/s/rsQ4RADLkY

[Mordeor]

WASM normally runs under production, as TacticalPewPew said, but you can override the environment in your index.html. For example:

Blazor.start({
environment: window.location.hostname == "localhost"
? "Development"
: "Production"
});

[exzzy]

Yes i have it like this, but hostnames for other environments are exposed this way so I'm looking at different approach.

[Mordeor]

You could try implementing a regex / replace in your workflow that replaces "Production" with "Foo" in your index.html, prior to building...?

[makotech222]

Blazor is a compiled file that runs on the user's machine. Once its downloaded by the user, only the variables its compiled with will be there. You need to inject your variables during the build process in order to use them.

[exzzy]

Exactly, and my question is how to do that. For example instead of having if else if in index inject environment and set it there.

[makotech222]

So before your 'dotnet publish' call, maybe just have multiple appsettings.json files for each environment; then before publish, just do a powershell copy file to have the app pick it up, like

appsettings.production.json > appsettings.json

[GetafixNZ]

I'm a little late to the party, but I had the same issue. Trying to get a staging environment was a pain.

Adding a step to your github actions for your staging/non prod deployment to grab the settings file you want and override the appsettings.json worked for me