During this session, we introduce Environment Tag Helper and will show you how we can load libraries from their CDN with fallback capacity in ASP.NET. IN Session 6, we discussed about environment in ASP.NET in detail and introduced different environments. In this session we call the minified and none minified libraries dynamically in different environments with the mentioned Tag Helper.
What is CDN?
CDN is abbreviation of Content Delivery Network or Content Distributed Network. Generally CDN is a group of servers in different geographically areas that work together to deliver Internet content. This service could improve reliability, availability and performance.
Environment Tag Helper in ASP.NET
This Tag Helper helps us to load different versions of our required libraries/packages files in different environment. As we mentioned earlier, in this tutorial series we can check and change the current application environment in “Properties/launchSettings.json”. This tag helper has two key attributes (include and exclude) that we can use to assign an environment or group of environments to do some tasks. As their name implies “include” is for assigning the environment and “exclude” for excluding that environment.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<environment include="Development"> <link href="~/lib/bootstrap/css/bootstrap.css" rel="stylesheet" /> <script src="~/lib/jquery/jquery.js"></script> <script src="~/lib/bootstrap/js/bootstrap.js"></script> </environment> <environment exclude="Development"> <link href="~/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" /> <script src="~/lib/jquery/jquery.min.js"></script> <script src="~/lib/bootstrap/js/bootstrap.min.js"></script> </environment> |
As you can see, we manage to load none minifies Bootstrap and JQuery library file when the web app IS in Development environment. Also, we manage to load minified library files when the web app IS NOT in Development environment.
Loading Libraries from CDN with Callback in ASP.NET
First of all, we should briefly introduce CDN. So, CDN is abbreviation of Content Delivery Network or Content Distributed Network. Generally CDN is a group of servers in different geographically areas that work together to deliver Internet content. CDNs based on the request tries to deliver the contents with most effective and efficient ways. This service could improve reliability, availability and performance.
Hence, based on the capacity of CDNs, it is better to use Libraries’ CDN when it is possible. For example, in our current web app we use local version of Bootstrap and JQuery library, while we can use CDN of these libraries to improve our web app performance. Also, CDN has a security measure which check whether the source file is valid or not which is Integrity.
Moreover, we can use asp-fallback-href tag helper for loading local version of library just if the web app failed to downloads the library from CDN. Just bear in mind to set value of asp-suppress-fallback-integrity tag helper to True to skip Integrity check of the local version.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<environment exclude="Development"> rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" asp-fallback-href="~/lib/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> |