Load different appsettings.json into Window object in Blazor WebAssembly

Question

I'm currently working on a .NET Standard 2.1 Blazor WebAssembly application. I try to load different appsettings.{Environment}.json configurations into my Window namespace (JavaScript).

Therefore I follow along this blog post:

https://jkdev.me/blazor-appsettings/

So far so good: I added 3 appsettings.*.json files into my wwwroot directory:

appsettings.json:

{
  "App": {
    "Message": "Hello World!"
  }
}

appsettings.Development.json:

{
  "App": {
    "Environment": "Development"
  }
}

appsettings.Staging.json:

{
  "App": {
    "Environment": "Staging"
  }
}

In my program.cs Main method I build my new configuration settings like this:

public class Program
{
    public static async Task Main(string[] args)
    {
        var builder = WebAssemblyHostBuilder.CreateDefault(args);
        builder.RootComponents.Add<App>("app");

        ConfigureServices(builder.Services);

        await builder.Build().RunAsync();
    }

    private static void ConfigureServices(IServiceCollection services)
    {
        services.AddSingleton(
             provider =>
                 {
                     var config = provider.GetService<IConfiguration>();

                     return config.GetSection("App").Get<AppConfiguration>();
                 });

    }
}

public class AppConfiguration
{
    public string Environment { get; set; }
}

Further on I try to load the correct appsettings.json according to a set environment variable (here in a script), therefore I need to override the Blazor boot process like this:

<script src="_framework/blazor.webassembly.js" autostart="false"></script>
<script>
    const environmentName = 'Staging';
    Blazor.start({
        loadBootResource: function(type, name, defaultUri, integrity) {
            // Adds a custom HTTP header to the outbound requests
            // To retain the default integrity checking behavior, it's necessary to pass through the 'integrity' parameter
            return fetch(defaultUri,
                {
                    cache: 'no-cache',
                    integrity: integrity,
                    headers: { 'blazor-environment': environmentName }
                });
        }
    });
</script>

Unfortunately this coding doesn't work - I always get an error:

Do you know how to correctly override the Blazor.start boot process in JavaScript?

Unfortunately there is not much documentation out there yet.

Do you know how to load different appsettings.*.json configurations in Blazor WASM?

Answer 1

App settings are per environment. This means you need to set the environment variable on server side either by setting the ASPNETCORE_ENVIRONMENT environment variable or the blazor-environment response header: https://docs.microsoft.com/en-us/aspnet/core/blazor/fundamentals/environments?view=aspnetcore-3.1

The Blazor Wasm boot script will load the appsettings.json and appsettings.{Environment}.json file corresponding to the blazor-environment received and populate the WebAssemblyHostBuilder.Configuration with data in thoose files.

You can then configuration to your components, services or js.
https://docs.microsoft.com/en-us/aspnet/core/blazor/fundamentals/configuration?view=aspnetcore-3.1