Step-by-Step: Handling Multiple Environments in Blazor WebAssembly with .NET 10

One of the breaking changes when moving a standalone Blazor WebAssembly app to .NET 10 is that the Properties/launchSettings.json file is no longer used to manage the environment. Instead, the environment must be set in the app’s project file (.csproj). As outlined in the migration guide, it looks like this

<WasmApplicationEnvironmentName>Staging</WasmApplicationEnvironmentName>

But what if you have multiple environments or need to switch between them dynamically? In one of my solutions, I use different build configurations—Development, Test, and Staging. There are also several projects: an API project, a shared project, and a Blazor WebAssembly project, all of which need to be built together using the same environment. Before migrating to .NET 10, the launchSettings.json file looked like this:

{
  "profiles": {
    "Development": {
      "commandName": "Project",
      "launchBrowser": true,
      "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
      "applicationUrl": "https://localhost:50034",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    },
    "Test": {
      "commandName": "Project",
      "applicationUrl": "https://localhost:50034",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Test"
      }
    },
    "Staging": {
      "commandName": "Project",
      "launchBrowser": true,
      "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
      "applicationUrl": "https://localhost:50034",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Staging"
      }
    }
  }
}

To make this work in .NET 10, you just need to remove the environmentVariables element, which is a pretty simple step.

{
  "profiles": {
    "Development": {
      "commandName": "Project",
      "launchBrowser": true,
      "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
      "applicationUrl": "https://localhost:50034"
    },
    "Test": {
      "commandName": "Project",
      "applicationUrl": "https://localhost:50034"
    },
    "Staging": {
      "commandName": "Project",
      "launchBrowser": true,
      "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
      "applicationUrl": "https://localhost:50034"
    }
  }
}

So, how do we make sure the correct environment variable is set? It’s actually not too difficult, though it’s not very well-documented. In the .csproj file, you’ll need to include the following entries:

<PropertyGroup Condition=" '$(RunConfiguration)' == 'Development' ">
  <WasmApplicationEnvironmentName>Development</WasmApplicationEnvironmentName>
</PropertyGroup>
<PropertyGroup Condition=" '$(RunConfiguration)' == 'Test' ">
  <WasmApplicationEnvironmentName>Test</WasmApplicationEnvironmentName>
</PropertyGroup>
<PropertyGroup Condition=" '$(RunConfiguration)' == 'Staging' ">
  <WasmApplicationEnvironmentName>Staging</WasmApplicationEnvironmentName>
</PropertyGroup>

Hopefully this helps those of you with the same or similar requirements in your projects.

Leave a comment Cancel reply