How can you add appsettings.json to a Blazor WebAssembly project

Hey there 👋🏻

In most .Net projects, there're two files that are included right of the bat when creating a new project using the provided templates, and these two files are appsettings.json and appsettings.development.json, however, that's not the case when it comes to Blazor WebAssembly, appsettings.json is not provided by the default blazor templates, but, you can easily add it if you need a file to store some configurations that you may want to load from it later, let's see how.

IMPORTANT NOTE

Please read this note carefully, as it's really really imporant.

You may have used appsettings.json before to store your database connection strings, passwords and sensitive information, but when it comes to Blazor WebAssembly, don't do that, do not put any sensitive data in that file, why?
Well, because if you run the project, and go to the browser, through the developer tools, the file can be inspected, and for sure you don't want your connection string or database password to be fully exposed, hanging out there in the wild right, so again, don't put secretive pieces of information in there, I'll show you how we can access this file from the browser.

I have a Blazor WebAssembly project that has an appsettings.json file, If I open the developer tools, whichever browser I'm rocking (Microsoft Edge in this instance), and navigate to the network tab, I'll see that appsettings.json was in fact loaded to the client

If I click on it, its content will be displayed, and for that reason, you MUST NOT put any piece of data that you want to remain hidden, inside of this file.

Let's learn how to add appsettings.json now

To do that, it's pretty effortless and simple, you can do it by following the upcoming basic steps.
1: Right click on wwwroot
2: Click add new item
3: Select app settings file
4: Call it appsettings.json
5: Enjoy

That's it, you now have a file to load configuration from, let's try pulling some information from it, and display them on a page.

The following snippet is for appsettings.json:

{
  "Message": "Hello From appsettings.json",
  "User": {
    "Id": "123",
    "Username":  "RasheedMozaffar"
  }
}

Now we can inject an IConfiguration instance into whichever page we want to access the configurations from, and just start using it like we do in any other .Net project.

Let's test it in Index.razor:

@page "/"
@inject IConfiguration configuration

<PageTitle>Index</PageTitle>

<h1>Hello, world!</h1>

@configuration["Message"] <br/>

Welcome to your new app.

<SurveyPrompt Title="How is Blazor working for you?" />

If I run the app, I should be able to see something like this:

Let's now do something more interesting, and pull an entire section from the config file, we can do that by creating a class that maps to the User object we have in appsettings, and get the values from there to create an instance of type User, the following code is for the User class:

public class User
{
    public string Id {get; set;}
    public string Username {get; set;}
}

Modify Index.razor to create a new instance, and when the page is initialized, the instance properties are set to those values pulled from appsettings.json, like this:

@code{
    private User user = new();

    protected override void OnInitialized()
    {
        user = configuration.GetSection("User").Get<User>()!;
    }
}

Now we can add some html markup to display the information on the page:

<h1>Hello, world!</h1>

@configuration["Message"]
<br /> <br /> <br />

<h3>User details</h3>
<ul>
    <li>@user.Id</li>
    <li>@user.Username</li>
</ul>

Welcome to your new app.

<SurveyPrompt Title="How is Blazor working for you?" />

And there you have it, that's how you can add an appsettings.json file to your Blazor Wasm projects, also we looked at how to print out the values stored in a key, and how we can load an entire section and store its values in an C# object, I hope you learned something new!

Bye now 👋🏻