I ❤️ .NET

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

Table of Contents

1. What is App Settings and Why it is needed?
2. How to read App Settings?
3. App Settings in Release Configuration
4. Summary

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
3. • 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.

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.

App Settings in Release Configuration

I'm happy that you have reached to the end of this article. Here we learnt what is appsettings and why do we need them. We also saw how to read values from appsettings and how to ovveride values for specific environment and finally we saw how to bundle appsettings for release configuration in production. Thanks for taking your time to read here. See you in next article.