Like all good problems, it started with a tweet:

JT is trying to run a Blazor application, usingappsettings.json but load a different one depending on what environment is being deployed to. Given that Blazor has the feature built in to load different configs based on theASPNETCORE_ENVIRONMENT environment variable, it’s something that isdoable, but how do we do it?

Understanding Static Web Apps config

On SWA we haveapplication configuration and you might think this is the starting point for what you want to do. But this is not quite right, this is actually used to control the configuration for the Azure Functions backend that you use, not the frontend for your application.

In fact, there’s no way to directly control the client “environment” once it’s deployed, as the application is built before it gets to Azure, that’s one of the jobs of the GitHub Actions step,azure/static-web-apps-deploy (or you can do it yourselflike I showed here). So generally speaking, if you want to inject “environment” information, you have to do it at build time.

Blazor app settings

The caveat to that last statement is Blazor doesn’tquite work like that, it it will load theappsettings.json file at runtime (you’ll see it in the network tab of the browser devtools), so how do we control that?

Well, digging through the Blazor docs, I can acrossthis page and it shows there are two ways to control the environment of the Web Assembly application, either viamanually starting the Blazor application, or viaa custom header.

Personally, I think the header approach is the better of the two, as it doesn’t require a code change to the files generated by Blazor, but I do wish it was anX- header, given it’s not a standard header.

Customizing headers in SWA

So, we’re going to want to customize the headers of the SWA application, and we can do that with thestaticwebapp.config.json file with the following:

{"globalHeaders":{"Blazor-Environment":"<your environment here>"}}

Add this file to your repo, or add theglobalHeaders section to your existing config file, add some transformation logic to set the environment value during built and deploy!

Note - if you don’t want to do it on all requests, you can use theheaders section of an individual route, but I found it’s easier to do it globally.

Summary

And with that, we can control the Blazor environment on our SWA application.

By using thestaticwebapp.config.json file we’re able to set the custom header that Blazor needs to know what environment it’s running under, and control the settings that the WASM application will load up when it runs.