The Environment Tag Helper is applied on
What is Environment Tag Helper in ASP.NET Core?. The Complete ASP.NET Core Developer Course 2023 [Videos].
The Environment Tag Helper is applied on
Environment Tag Helper in ASP.NET Core Application
In this Video, I am going to discuss the Environment Tag Helper in ASP.NET Core Application with some examples. Please read our previous Video, where we discussed the Application with an example. As part of this Video, we are going to discuss the following pointers.
1. Different Environments in Software Development
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.
- Development Environment
- Staging Environment
- Production 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.
“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”
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 ASPNETCORE_ENVIRONMENT variable are Staging and Production. It is also possible to create our own environment that we will discuss in our upcoming Video.
Please install bootstrap with the wwwroot folder. Please read the following Video where we discussed how to install bootstrap in ASP.NET Core Application.
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.
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.
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.
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 <link> element is used for Subresource Integrity (SRI) check. The SRI is a security feature which 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.
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.
Modify the Home Controller:
Please modify the Home Controller as shown below.
Modify the Index.cshtml file as shown below.
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 integrity attribute of 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 own application server.