How to access and read config settings into your Blazor app

This is a quick and short tip on how to read and access the settings in appsettings.json and other custom configuration files into your Blazor application. I also explain how to use HttpClient to load our custom configuration in our main program. I’m using Blazor WASM for this example.

Content

• How to access appsettings.json
• How to access custom configuration file
• Conclusion

---

How to access appsettings.json

In this section, I will talk about the built-in configuration called appsettings.json which can be found in wwwroot directory of your project. In the event that appsettings.json is not created for you by the template, just create it manually in wwwroot directory.

In this example, I have a setting that contains a URL string. For instance, say, my appsettings.json looks like this:

{
  "ConnectionStrings": {
    "DefaultConnection": "Server=(localdb)\\MSSQLLocalDB;Database=_CHANGE_ME;Trusted_Connection=True;MultipleActiveResultSets=true"
  },

  "RestSvc": {
    "ApiUrl": "http://localhost:5000/api/v2/Employees/" 
  }
}

And I want to read the value of the "ApiUrl" key on line 7 because I want to use that URL string for my HTTP request to an API service; specifically, to send a request to delete an employee with a given email address.

Inject IConfiguration to read key-value pairs

To access the key-value pairs, it is actually simple and straightforward. In this example, I’m reading the configurations inside a button handler, HandleDeleteSubmit(). You just need to do two things. First, inject IConfiguration into your Blazor component, as shown below on line 6:

@page "/deleteemployees"
@page "/deleteemployees/{email}"

@using System;
@using System.Threading;
@inject IConfiguration configuration;

    <button @onclick="HandleDeleteSubmit">
        Delete
    </button>

@code {
[Parameter]
public string? email{ get; set; }

private async Task HandleDeleteSubmit()
{
	string restSvcApiUrl = configuration["RestSvc:ApiUrl"];       
	
	try
	{           
		responseMessage = await httpClient.DeleteAsync(restSvcApiUrl+email);
	}
	catch(Exception ex)
	{
		System.Console.WriteLine("Exception: " + ex.Message);
	}
}
}

Second, on line 18, call the configuration object with the string “RestSvc:ApiUrl” as key. As shown, above, the variable restSvcApiUrl should now contain the string “http://localhost:5000/api/v2/Employees/”, which I can pass to DeleteAsync method on line 22. And that’s it!

Next, I will talk about how to access your own custom configuration.

---

How to access custom configuration file

Let’s say you have a custom configuration file called messagesettings.json (also in wwwroot) which contains all of your message strings, and it looks like this:

{
  "DeleteEmployee": {
    "Ok": "Employee successfully deleted",
    "NotOK": "Problem deleting employee"
  }
}

And let’s say you want to use the values of "Ok" and "NotOk" under "DeleteEmployee" in your program as messages after a successful or failed request to a REST API.

It’s not as simple as reading appsettings.json, though. To access and read a custom config file into your application takes a little bit more work. Fortunately, it’s a few lines in your main program.

Registering your custom configuration

So, what do you need to add to your main program? First, you need to load the messagesettings.json file and you need to do that inside your Program.cs file. Check out the code below.

using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using RestClientTabular;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.Configuration;

var builder = WebAssemblyHostBuilder.CreateDefault(args);

builder.RootComponents.Add<App>("#app");

builder.RootComponents.Add<HeadOutlet>("head::after");

builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

// To read a custom configuration file other than appsettings.json
// use HttpClient
var http = new HttpClient()
{
    BaseAddress = new Uri(builder.HostEnvironment.BaseAddress),
};
builder.Services.AddScoped(sp => http);
using var response = await http.GetAsync("messagesettings.json");
using var stream = await response.Content.ReadAsStreamAsync();
builder.Configuration.AddJsonStream(stream);

await builder.Build().RunAsync();

First, use the namespace Microsoft.Extensions.Configuration as shown on line 5. Secondly, Lines 17-24 show you how to read your configuration into a Stream, a sequence of bytes that represent your file.

According to a Microsoft documentation on configurations, you can’t directly access a configuration file because of a restriction placed on a client application (which makes sense), hence, we access configuration via HttpClient. Line 17 shows you exactly this – a new HttpClient is instantiated whose base address is the host where my Blazor application is running off of, in this case, it’s http://localhost:5163.

After loading your json file on line 22, you then read it into a Stream object on line 23. Finally, on line 24, you then “register” your configurations so that you can use anywhere in your application via Injection.

Inject IConfiguration to read key-value pairs

To read key-value pairs in messagesetting.json, it’s no different from how we read appsettings.json from earlier.

@page "/deleteemployees"
@page "/deleteemployees/{email}"

@using System;
@using System.Threading;
@inject IConfiguration configuration;

    <button @onclick="HandleDeleteSubmit">
        Delete
    </button>

@code {
[Parameter]
public string? email{ get; set; }

private async Task HandleDeleteSubmit()
{
	string restSvcApiUrl = configuration["RestSvc:ApiUrl"];      
	
	try
	{           
		responseMessage = await httpClient.DeleteAsync(restSvcApiUrl+email);
                var deleteOkMessage = configuration["DeleteEmployee:Ok"];
	}
	catch(Exception ex)
	{
                var deleteNotOkMessage = configuration["DeleteEmployee:NotOk"];
		System.Console.WriteLine("Exception: " + ex.Message);
	}
}
}

As you might have noticed, this is the same button handler from earlier, except I added two lines – on line 23, I call configuration["DeleteEmployee:Ok"] to get the value “Employee successfully deleted”. And on line 27, I call configuration["DeleteEmployee:NotOk"] to get the value “Problem deleting employee".

Conclusion

The built-in configuration, appsettings.json, is loaded by Blazor by default, hence, accessing it is as simple as injecting IConfiguration inside the Blazor component. For your own custom configuration file, you first need to load and read it into a Stream object inside the main program using HttpClient. Only then can you access the custom configurations in your Blazor component.