ASP.NET Core Blazor configuration

Note

This topic applies to Blazor WebAssembly. For general guidance on ASP.NET Core app configuration, see Configuration in ASP.NET Core.

Blazor WebAssembly loads configuration from app settings files by default:

  • wwwroot/appsettings.json
  • wwwroot/appsettings.{ENVIRONMENT}.json

Other configuration providers registered by the app can also provide configuration.

Not all providers or provider features are appropriate for Blazor WebAssembly apps:

  • Azure Key Vault configuration provider: The provider isn't supported for managed identity and application ID (client ID) with client secret scenarios. Application ID with a client secret isn't recommended for any ASP.NET Core app, especially Blazor WebAssembly apps because the client secret can't be secured client-side to access to the service.
  • Azure App configuration provider: The provider isn't appropriate for Blazor WebAssembly apps because Blazor WebAssembly apps don't run on a server in Azure.

Warning

Configuration in a Blazor WebAssembly app is visible to users. Don't store app secrets or credentials in configuration.

For more information on configuration providers, see Configuration in ASP.NET Core.

App settings configuration

wwwroot/appsettings.json:

{
  "message": "Hello from config!"
}

Inject an IConfiguration instance into a component to access the configuration data:

@page "/"
@using Microsoft.Extensions.Configuration
@inject IConfiguration Configuration

<h1>Configuration example</h1>

<p>Message: @Configuration["message"]</p>

Custom configuration provider with EF Core

The custom configuration provider with EF Core demonstrated in Configuration in ASP.NET Core works with Blazor WebAssembly apps.

Add the example's configuration provider with the following code in Program.Main (Program.cs):

builder.Configuration.AddEFConfiguration(
    options => options.UseInMemoryDatabase("InMemoryDb"));

Inject an IConfiguration instance into a component to access the configuration data:

@using Microsoft.Extensions.Configuration
@inject IConfiguration Configuration

<ul>
    <li>@Configuration["quote1"]</li>
    <li>@Configuration["quote2"]</li>
    <li>@Configuration["quote3"]</li>
</ul>

Memory Configuration Source

The following example uses a MemoryConfigurationSource to supply additional configuration:

Program.Main:

using Microsoft.Extensions.Configuration.Memory;

...

var vehicleData = new Dictionary<string, string>()
{
    { "color", "blue" },
    { "type", "car" },
    { "wheels:count", "3" },
    { "wheels:brand", "Blazin" },
    { "wheels:brand:type", "rally" },
    { "wheels:year", "2008" },
};

var memoryConfig = new MemoryConfigurationSource { InitialData = vehicleData };

...

builder.Configuration.Add(memoryConfig);

Inject an IConfiguration instance into a component to access the configuration data:

@page "/"
@using Microsoft.Extensions.Configuration
@inject IConfiguration Configuration

<h1>Configuration example</h1>

<h2>Wheels</h2>

<ul>
    <li>Count: @Configuration["wheels:count"]</li>
    <li>Brand: @Configuration["wheels:brand"]</li>
    <li>Type: @Configuration["wheels:brand:type"]</li>
    <li>Year: @Configuration["wheels:year"]</li>
</ul>

@code {
    protected override void OnInitialized()
    {
        var wheelsSection = Configuration.GetSection("wheels");
        
        ...
    }
}

To read other configuration files from the wwwroot folder into configuration, use an HttpClient to obtain the file's content. When using this approach, the existing HttpClient service registration can use the local client created to read the file, as the following example shows:

wwwroot/cars.json:

{
    "size": "tiny"
}

Program.Main:

using Microsoft.Extensions.Configuration;

...

var http = new HttpClient()
{
    BaseAddress = new Uri(builder.HostEnvironment.BaseAddress)
};

builder.Services.AddScoped(sp => http);

using var response = await http.GetAsync("cars.json");
using var stream = await response.Content.ReadAsStreamAsync();

builder.Configuration.AddJsonStream(stream);

Authentication configuration

wwwroot/appsettings.json:

{
  "Local": {
    "Authority": "{AUTHORITY}",
    "ClientId": "{CLIENT ID}"
  }
}

Program.Main:

builder.Services.AddOidcAuthentication(options =>
    builder.Configuration.Bind("Local", options.ProviderOptions));

Logging configuration

Add a package reference for Microsoft.Extensions.Logging.Configuration:

<PackageReference Include="Microsoft.Extensions.Logging.Configuration" Version="{VERSION}" />

For the placeholder {VERSION}, the latest stable version of the package that matches the app's shared framework version can be found in the package's Version History at NuGet.org.

wwwroot/appsettings.json:

{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft": "Warning",
      "Microsoft.Hosting.Lifetime": "Information"
    }
  }
}

Program.Main:

using Microsoft.Extensions.Logging;

...

builder.Logging.AddConfiguration(
    builder.Configuration.GetSection("Logging"));

Host builder configuration

Program.Main:

var hostname = builder.Configuration["HostName"];

Cached configuration

Configuration files are cached for offline use. With Progressive Web Applications (PWAs), you can only update configuration files when creating a new deployment. Editing configuration files between deployments has no effect because:

  • Users have cached versions of the files that they continue to use.
  • The PWA's service-worker.js and service-worker-assets.js files must be rebuilt on compilation, which signal to the app on the user's next online visit that the app has been redeployed.

For more information on how background updates are handled by PWAs, see Build Progressive Web Applications with ASP.NET Core Blazor WebAssembly.