Environment Tag Helper in ASP.NET Core

In this article, I am going to discuss the Environment Tag Helper in ASP.NET Core Application with some examples. Please read our previous article, where we discussed the Image Tag Helper in ASP.NET Core Application with an example. As part of this article, we are going to discuss the following pointers.

1. Different Environments in Software Development
        Development Environment
        Staging Environment
        Production Environment
2. Understanding the use of Environment Tag Helper in ASP.NET Core
3. How to set Environment in ASP.NET Core Application?
4. What is the use of integrity in CDN Link?
5. What if the CDN is down?
6. Multiple Examples to understand the ASP.NET Core Environment Tag Helper

Different Environments in Software Development:
Nowadays, most of the software development organizations typically have the following three development environments.

1. Development Environment
2. Staging Environment
3. Production Environment

Development Environment:
As a software developer, for our day to day development work, we generally use this development environment. In this environment, we generally use the non-minified JavaScript and CSS files for the purpose of easy debugging. Another use of this environment is that we want to show the developer exception page if there is an unhandled exception so that we can understand the root cause of the exception and then take necessary action to fix the issue.

Staging Environment:
The staging environment is very much similar to the production environment. Nowadays, many organizations use this staging environment to identify any deployment-related issues. Again, if you are developing a B2B (Business to Business) application, then you may be using services provided by other service providers. So, many organizations set up their staging environment to check the service providers as well for complete end to end testing.

In the staging environment, we usually do not perform the debugging and troubleshoot, so to get a better performance we use minified JavaScript and CSS files. Again, if there is an exception, instead of showing the developer exception page, we need to show a friendly error page. The friendly error page will not contain any technical exception details instead it shows a generic error message like below.

“Something went wrong, our IT team working on this to solve as soon as possible. If you need further details then please email, chat or call our support team using the below contact details”

Production Environment:
This is the actual live environment that is used for day to day business. The Production environment should be configured for maximum security as well as maximum performance. So, in this environment, we need to use the minified JavaScript and CSS files. For better security, we need to show a User-Friendly Error Page instead of the Developer Exception Page when there is an exception.

Understanding the use of Environment Tag Helper in ASP.NET Core:
In our Application, we are using bootstrap. For ease of debugging, i.e. on our local development (i.e. on Development Environment) we want to load the non-minified bootstrap CSS file (bootstrap.css).

On the Staging and Production or any other environment except the Development environment, we want to load the minified bootstrap CSS file (bootstrap.min.css) from a CDN (Content Delivery Network) for better performance.

However, if the CDN is down or for some reason, our application is not able to load the file from CDN then we want our application to fallback and load the minified bootstrap file (bootstrap.min.css) from our own server.

We can achieve this very easily by using the Environment Tag Helper in ASP.NET Core Application. But before understanding how to use the Environment Tag Helper, let us first understand how we set the environment (i.e. Development, Staging, and Production) in ASP.NET Core.

How to set Environment in ASP.NET Core Application?
In order to set the Application Environment (i.e. Development, Staging, or Production) we need to use the ASPNETCORE_ENVIRONMENT variable. We can set this in the launchsettings.json file. You can find the launchsettings.json file within the properties. Open the launchsettings.json file and set the environment as Development as shown in the below image.

Note: The other possible values for the ASPNETCORE_ENVIRONMENT variable are Staging and Production. It is also possible to create our own environment that we will discuss in our upcoming article.

Installing bootstrap:
Please install bootstrap with the wwwroot folder. Please read the following article where we discussed how to install bootstrap in ASP.NET Core Application.

How to Install Bootstrap in ASP.NET Core MVC

Modifying the _ViewImports.cshtml file:
Please modify the _ViewImports.cshtml file as shown below to include the tag helpers into our application globally.

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

ASP.NET Core Environment Tag Helper with Examples:
The Environment Tag Helper in ASP.NET Core supports rendering different content based on the environment of the application. The environment of the application is set by using the ASPNETCORE_ENVIRONMENT variable within the launchsettings.json file that we already discussed.

Example: If you want to load the non-minified bootstrap CSS files from your own server when the application environment is Development, then you need to set the environment tag helper as shown below.

Example:
If you want to load the minified bootstrap CSS files from the CDN (Content Delivery Network) when the application environment is Staging or Production, then you need to set the environment tag helper as shown below.

In order to get the bootstrap CDN link, please visit the following URL.

https://getbootstrap.com/

Once you visit the above URL then copy the CDN link as shown below.

Using the include attribute of the environment tag helper we can set a single hosting environment name or a comma-separated list of hosting environment names. Along with the include attribute, we can also use the exclude attribute.

The exclude attribute is basically used to render the content of the environment tag when the hosting environment does not match the environment specified in the exclude the attribute. The following example loads the minified CSS file from the CDN when the application environment is not Development.

What is the use of integrity in CDN Link?
The integrity attribute on the element is used for Subresource Integrity (SRI) check. The SRI is a security feature that allows a browser to check if the file is retrieved from the CDN has been maliciously altered. When the browser downloads the file, it regenerates the hash and compares the regenerate the hash value against the integrity attribute hash value. If both the hash values match, then only the browser allows the file to be downloaded otherwise it is blocked.

What if the CDN is down?
If the CDN is down or for some reason, our application is not able to reach the CDN, then we want our application to fall back and load the minified bootstrap file (bootstrap.min.css) from our own server. Please have a look at the following image.

Explanation of the above Code:
If the environment is “Development”, then we are loading the non-minified bootstrap CSS file (i.e. bootstrap.css) from our own server. On the other hand, if the application environment is other than “Development”, then we are trying the load the minified bootstrap CSS file (i.e. bootstrap.min.css) from the CDN.

Along the same line, we also specified a fallback source using the asp-fallback-href attribute. This attribute is basically used when the CDN is down or for some reason if our application is unable to reach the CDN. In that case, our application falls back and download the minified bootstrap file (i.e. bootstrap.min.css) from our own server.

In order to check whether the CDN is down, we are using the following 3 attributes and their associated values.

1. asp-fallback-test-class=”sr-only”
2. asp-fallback-test-property=”position”
3. asp-fallback-test-value=”absolute”

Let us understand all the above with an example.

Modifying the _Layout.cshtml file:
Please modify the _Layout.cshtml file as shown below. Here, we are loading the bootstrap.css files based on the application environment. We also specify the falls back path in case if the environment is other than Development and the CDN is down.

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
   
    <environment include="Development">
        <link href="~/lib/twitter-bootstrap/css/bootstrap.css" rel="stylesheet" />
    </environment>
    <environment exclude="Development">
        <link rel="stylesheet"
              integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
              crossorigin="anonymous"
              href="https://sstackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
              asp-fallback-href="~/lib/twitter-bootstrap/css/bootstrap.min.css"
              asp-fallback-test-class="sr-only" asp-fallback-test-property="position"
              asp-fallback-test-value="absolute"
              asp-suppress-fallback-integrity="true" />
    </environment>
</head>
<body>
    <div class="container">
        @RenderBody()
    </div>
</body>
</html>

Modify the Home Controller:
Please modify the Home Controller as shown below.

using Microsoft.AspNetCore.Mvc;
namespace FirstCoreMVCApplication.Controllers
{
    public class HomeController : Controller
    {
        public ViewResult Index()
        {
            return View();
        }
    }
}

Modify the Index.cshtml file as shown below.

@{
    ViewBag.Title = "Index";
     Layout = "~/Views/Shared/_Layout.cshtml";
}
<h1>Index View</h1>

Now run the application and view the page source code.

As you can see in the above image, the boostrap.css file is load from our own server and this makes sense because currently, we set the application environment as Development. Let us change the environment to Staging and see whether it load the file from CDN or not.

Modify the Environment as Staging:
Open the launchsettings.json file and modify the ASPNETCORE_ENVIRONMENT variable value to staging as shown below.

With the above changes in place, now run the application and view the source, which should show the bootsrap.css file being downloaded from the CDN as shown below.

Let intentionally change the integrity value of the CDN to make sure if the CDN fails whether it load the minified bootstrap.css file from our local server or not. So, add some random value to the value of the integrity attribute of the CDN link. And then load the page and view the page source code. Now, in order to check this open the browser developer tools by pressing the F12 key and then click on the Network tab as shown below.

As you can see in the above image, first it tries to load the bootstrap.css file from CDN and it fails as the integrity value is not matched. Then it loads the file from its own application server.

In the next article, I am going to discuss the Bootstrap Navigation Menu in ASP.NET Core MVC Application. Here, in this article, I try to explain Environment Tag Helper in ASP.NET Core Application with some examples.

Summary:
I hope this post will be helpful to understand the concept of Environment Tag Helper in ASP.NET Core
Please share this post with your friends and colleagues.
For any queries please post a comment below.
Happy Coding 😉