Blazor Configuration The AspNetCore Way

I've seen a bit of conversation recently about how you can use configuration in a Blazor (WASM) application and some of the implementations seem a bit convoluted, especially when you consider that AspNet Core already handles it...

So, I don't think it is advisable, but if you really want to...

Create new Blazor project

dotnet new blazor -o BlazorIsAwesome

Update to Blazor 0.9

Update your package references to the latest version as the templates still reference old versions and we all know bleeding edge is best, right?

*Currently the latest version is 0.9.0-preview3-19154-02*

Add AspNetCore packages

You will need the standard Asp.Net Core packages for configuration

<PackageReference Include="Microsoft.Extensions.Configuration" Version="2.2.0" />

<PackageReference Include="Microsoft.Extensions.Configuration.FileExtensions" Version="2.2.0" />

<PackageReference Include="Microsoft.Extensions.Configuration.Json" Version="2.2.0" />

<PackageReference Include="Microsoft.Extensions.FileProviders.Embedded" Version="2.2.0" />

THIS ALONE IS REASON ENOUGH NOT TO DO THIS - THINK OF THE PAYLOAD

Configure your app

Open up Startup.cs and add some Using statements to bring in the namespaces required.

using Microsoft.Extensions.Configuration;

using Microsoft.Extensions.FileProviders;

using System.ComponentModel;

Now we can pull in the configuration to our ConfigureServices method

public void ConfigureServices(IServiceCollection services)

{

var fileProvider = new EmbeddedFileProvider(this.GetType().Assembly);

var configuration = new ConfigurationBuilder()

.AddJsonFile(provider: fileProvider, 

path: "appsettings.json", 

optional: true, 

reloadOnChange: false) 

.Build();

services.AddSingleton<IConfiguration>(configuration);

}

Let's take a look at what that is doing...

We are creating an EmbeddedFileProvider - this comes from the Microsoft.Extensions.FileProviders package - which will give us access to the appsettings.json for our project.

Then we build our configuration using that file provider  and tell it to find the appsettings.json file which is an embedded resource in our Blazor app. 

We say it is optional and not to reload on change - as there's no way an embedded resource is going to change.

Finally we add the configuration to our services collection, so it can be injected into the app wherever it is needed.

An Embedded Appsettings.json

Add a new appsettings.json file to the project - don't put it in wwwroot!

Add some settings - in this case I'm just adding a title:

{ "Title" : "My Blazor App (appsettings.json)" }

You set the appsettings.json as an embedded resource by selecting it, pressing F4 and changing the property "Build Action" to "Embedded resource" 

For the hard-core coders, you can also do this in csproj

<ItemGroup>

  <Content Remove="appsettings.json" />

</ItemGroup>

<ItemGroup>

  <EmbeddedResource Include="appsettings.json">

    <CopyToOutputDirectory>Never</CopyToOutputDirectory>

  </EmbeddedResource>

</ItemGroup>

Now Let's Use This Thing

To make use of the configuration we have added, we need to inject an IConfiguration object into the code

I'm going to use Index.cshtml for this:

@page "/"

@using Microsoft.Extensions.Configuration

@inject IConfiguration  configuration

<h1>@configuration["Title"]</h1>

I have added a using statement to bring in the Configuration namespace.

I injected the IConfiguration object from the DI container.

Finally, I grab the "Title" from configuration and place it in an <h1>