I ❤️ .NET

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

Note: If you have not done so already, I recommend you read the article on Blazor WASM Dark Theme and Light Theme.

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. What if we have multiple appsettings.{ENVIRONMENT}.json?
5. 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.

What if we have multiple appsettings.{ENVIRONMENT}.json?

There are scenarios where we might have multiple appsettings.{ENVIRONMENT}.json files. For example, I have a standalone blazor wasm application and it has the following five environments,

• Local
• Offline
• Docker
• Development
• Production

In this case, we can set the respective environment in Blazor.start() in index.html file. And make sure respective appsettings.{ENVIRONMENT}.json is bundled in final output. Blazor WASM will automatically load the respective appsettings.{ENVIRONMENT}.json based on the environment set in Blazor.start(). This can be verified by inspecting the network tab of the browser developer tools. To exclude the unnecessary, we can do some small rejex changes in .csproj file in respective pipelines.

Summary

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 override values for specific environment and we saw how to bundle appsettings for release configuration in production. Finally we also learnt how to set Blazor environment in using Blazor.start(). Thank you for taking your time to read here. See you in next article.