WARNING: Do not store sensitive data like connection strings or keys in the Blazor configuration, as any configuration done here is publicly available.
This extension allows creating an IConfiguration by either placing <meta> tags in the header of the document the Blazor app is called from, or placing a JSON configuration file in the wwwroot folder.
While most ASP.NET applications support importing a configuration at startup, this is difficult to do in a client-side Blazor application. This is because the limited browser environment, which usually just consists of the DOM, your app assembly, and some CSS files, doesn't have a good place to put configuration key value pairs that can be accessed at application bootstrapping time. Currently, the approach most applications are taking is to put the configuration information into the assembly, but this means that any change in configuration requires creating a new assembly.
To avoid creating a new assembly, this approach allows the use of either the DOM or a seperate configuration file to provide a configuration.
A remote file, ideally placed in the wwwroot folder in the blazor project, can be loaded synchronously at startup time to provide a configuration.
Add the NuGet package to your csproj, and then add the following to Startup.ConfigureServices, where path refers to either the path in the wwwroot folder, or it also could be any remote server:
public void ConfigureServices(IServiceCollection services)
{
// Other service logic
services.AddSingleton<IConfiguration>(
new ConfigurationBuilder().AddRemoteJsonConfiguration(
services.BuildServiceProvider().GetService<IJSRuntime>() as IJSInProcessRuntime ?? throw new Exception("No in process runtime could be found!"), path).Build()
);
// Other service logic
}This library requires the use of the IJSInProcessRuntime to synchronusly run an XMLHttpRequest. This can normally be found in the IServiceCollection that gets passed to ConfigureServices at configuration time.
This library requires two steps — adding the configuration key-value pairs to the DOM, and then building the IConfiguration.
In the <head> tag of your index.html document, you can add a configuration key-value pair in the Blazor IConfiguration by adding a tag like so:
<meta data-name="Key" data-value="Value">So that you end up with something like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>My App</title>
<base href="/" />
<link href="css/site.css" rel="stylesheet" />
<meta data-name="Key" data-value="Value">
</head>
<body>
<app>Loading...</app>
<script src="_framework/blazor.webassembly.js"></script>
</body>
</html>The meta tag attributes are prefixed by data to ensure the resulting DOM is still HTML5 standards compliant.
Add the NuGet package to your csproj, and then add the following to Startup.ConfigureServices:
public void ConfigureServices(IServiceCollection services)
{
// Other service logic
services.AddSingleton<IConfiguration>(
new ConfigurationBuilder().AddDomConfiguration(
services.BuildServiceProvider().GetService<IJSRuntime>() as IJSInProcessRuntime ?? throw new Exception("No in process runtime could be found!")).Build()
);
// Other service logic
}This library requires the use of the IJSInProcessRuntime to access the DOM to extract the tags. This can normally be found in the IServiceCollection that gets passed to ConfigureServices at configuration time.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent