
Blazor WASM App Settings
blazor
22 Articles
In this article, let's learn about how to read configuration from app settings in Blazor WASM application.
Table of Contents
- What is App Settings and Why it is needed?
- How to read App Settings?
- App Settings in Release Configuration
- 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,
- Inject
@inject IConfiguration configuration
- 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
- Use
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
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.