Blazor WASM App Settings

Blazor WASM App Settings


20 Articles


In this article, let's learn about how to read configuration from app settings in Blazor WASM application.

What is App Settings and Why it is needed?

App Settings / Configuration (appsettings.json) located inside wwwroot is used to store application related configuration in JSON format and load them in runtime based on environment to read keys/id for consuming any external services or urls for external services or conditionally render UI or change code flow, etc.

Blazor WebAssembly loads configuration from the following app settings files by default:

  • wwwroot/appsettings.json
  • wwwroot/appsettings.{ENVIRONMENT}.json, where the {ENVIRONMENT} placeholder is the app's runtime environment

Please note that appsettings.json in blazor wasm is located inside wwwroot. Which means it can be read by anyone on client side. Hence don't store any sensitive information in it.

How to read App Settings?

To read the settings / configuration from appsettings.json you need to follow the below steps,

  1. Inject @inject IConfiguration configuration
  2. Use injected configuration object to read settings
    • Use configuration.GetValue<string>("{KEY}") to read simple string value
    • Use configuration.GetValue<bool>("{KEY}") to read simple boolean value
    • Use configuration.GetSection("{KEY}") to read section as object

Configuration in app settings files are loaded by default. In I ❤️ .NET, a base url, authors value is stored in an app settings file and loaded by the Blazor framework automatically. The value is read by a component.

Code Sample - Blazor WASM App Settings Configuration

Demo - Read Settings From Configuration

Scenario - Let's try reading configuration from I ❤️ .NET appsettings.json

App Settings in Release Configuration

Generally configuration from appsettings.json will be used in production environment. We cannot have all same configuration in all environment. So we can override configuration for different environment using appsettings.{ENVIRONMENT}.json, where the {ENVIRONMENT} placeholder is the app's runtime environment. For example, in I ❤️ .NET baseUrl in development environment will be different from production environment. So in appsettings.development.json will have different "baseUrl": "https://localhost:7176/" value.

Other common use case would be, we have an API Key for consuming external service and that endpoint might have rate limiting mechanism in place. If we use the same production Key in development, then we might end up exhausting our consumption limit. To avoid this we can use dummy keys or different keys in development environment by overriding the key value in appsettings.development.json.

Now that we have learn't how to use app settings in blazor wasm. We are still left with one more stuff. It is not necessary to bundle all appsettings.{ENVIRONMENT}.json to production. This can be safely removed in Release configuration using the below settings in .csproj file.

Code Sample - Blazor WASM Project File Configuration

  • Blazor
  • App Settings
  • App Configuration