Managing application environments

Software development goes through various stages. In the beginning, we may start with pure development and testing, but after we start rolling out our application to production, many challenges will appear. One of these challenges is having different environments for your app run to on.

For example, imagine your application is communicating with an API and this API is developed by another developer or team. The application is hosted on Azure App Service with two deployment slots (Dev/Production). During development, you are going to use the URL of the dev API, which won’t make changes to the production database, and after committing your changes, in the production environment, you need to use the URL of the Production slot.

In this scenario, it will be tough to change the API URL before you push to production and then retrieve it after finishing. Thus, many mistakes may be made, which will make the development process frustrating. This is where managing environments comes into play, where you can write code, render a specific UI, or retrieve special configurations based on the environment that your app is running in without making too many mistakes that delay development and production.

By default, when you run the Blazor app through the debugger, it runs within the development environment, and after publishing it, it runs within the production one.

In this section, we will see how we can set up and retrieve the current environment of the application and retrieve the configuration based on that.

Creating a configuration file based on the environment

To create a configuration file that will be used only in the development phase, you can create another appsettings.json file but with the name of the environment before the extension, such as appsettings.Development.json. To implement this, take the following steps:

1. Right-click on the wwwroot folder and click on Add | New Item. Choose a JSON file and give it the name appsettings.Development.json.
2. Add the same "ApiUrl" property that exists in appsettings.json and the value "Development" as follows:

   {    "ApiUrl": "Development"}

When you run the application, you will notice that the value of Development will show up on the screen instead of http://localhost:44332. You should follow the practice of separating the settings based on the environment from the very beginning, so it makes the development process smoother and easier.

Reading the environment within the components

In your development process and where there are many environments for your app (development, preview, and production, for example), you need a specific piece of UI or certain logic to make the app behave differently in different environments. A major implementation to achieve this kind of responsiveness is showing a specific feature in preview but hiding it in production.

To achieve the mentioned behavior, you need to fetch the value of the current environment in your code and use an if condition to determine how the UI or logic behaves within that environment.

In the following example, we are going to use IWebAssemblyHostEnvironment by injecting it within the Index component and remove the SurveyPrompt component if the app is running on the development environment:

1. Open the Index component within the Pages folder and inject the IWebAssemblyHostEnvironment service within the component, but of course, you need to reference the namespace that contains the service, which is Microsoft.AspNetCore.Components.WebAssembly.Hosting, as shown in the following snippet:

   @page "/"@using Microsoft.AspNetCore.Components.WebAssembly.Hosting...@inject IWebAssemblyHostEnvironment Host<PageTitle>Index</PageTitle>...

2. The next step is to use the IsDevelopment method, which returns a bool if the current environment is equal to Development:

   ...<p>Api Url: @Configuration["ApiUrl"]</p>@if (!Host.IsDevelopment()){    <SurveyPrompt      Title="How is Blazor working for you?" />}

After running the application on your machine in debugging mode, the SuveryPrompt component will be shown in the production environment. This example demonstrates the responsiveness of environment features, which is very useful.

Tip

IWebAssemblyHostEnvironment contains multiple methods like IsDevelopment(). It also contains IsStaging() and IsProduction(). You can also customize the name by using IsEnvionment("CUSTOM_ENVIORNEMNT_NAME").

One of the topics to be covered is setting the current environment explicitly. We are going to cover this in Chapter 14, Publishing Blazor WebAssembly Apps, after publishing the project, but you can go deeper by reading and discovering more about environments at https://learn.microsoft.com/en-us/aspnet/core/blazor/fundamentals/environments?view=aspnetcore-7.0.