How can you add appsettings.json to a Blazor WebAssembly project
Tags: webdev, beginners, csharp, dotnet
Published: 2023-07-16 14:03:20

## 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

![Contents of the network tab](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mpwijrh1z4of16kz45lw.png)

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:

```javascript

{
  "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**:

```html

@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:

![Index page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bxk6032kpj3gs4bn2mks.png)

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:

```csharp

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:

```csharp

@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:

```html

<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?" />

```


![The index page after pulling the User details](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6cf77sa2xv5nrrxuy1xv.png)

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 👋🏻