Last night a Link Tag Helper saved my site
Are you using the ASP.NET Link Tag Helper? When my CDN failed I'm so glad that I did.
CDNs are very reliable, but they do fail from time to time so it is important that you build in a fallback mechanism. In fact I wrote a post about this back in 2013, showing how to use a CDN URL as the primary source as well as having a local copy in the project as a backup to be used if the CDN URL fails. This solution was for MVC4 so what has changed? How do we do this in a modern ASP.NET web app?
Link Tag helper
The Link Tag Helper is the modern approach to this problem.
From the docs:
The Link Tag Helper allows you to specify a CDN for the CSS file and a fallback when the CDN is not available. The Link Tag Helper provides the performance advantage of a CDN with the robustness of local hosting.
Great, that's exactly what we want, so how do we use it?
Example usage
The Link Tag Helper is included in Microsoft.AspNetCore.Mvc.TagHelpers so make sure it is included in _ViewImports.cshtml.
@* _ViewImports.cshtml *@
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
Here is an example of how you would use the Link Tag Helper with Font Awesome.
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
asp-fallback-href="~/libs/font-awesome/6.1.1/css/all.min.css"
asp-fallback-test-class="sr-only"
asp-fallback-test-property="position"
asp-fallback-test-value="absolute" />
Firstly, create a <link> as you would normally using the CDN URL.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" />
Now extend the <link> using the Link Tag Helper properties. There are two things that we need to do.
- Set a fallback URL for the locally hosted asset
- Specify a test to check whether the CDN has failed
The properties used in the example are:
asp-fallback-href
The URL of the locally hosted CSS file. This is the fallback and is only used if the CDN URL fails.
asp-fallback-test-class
The name of a CSS class that exists in the stylesheet. We are going to use this as a test to see if our CDN URL works. In this example it is sr-only.
asp-fallback-test-property
A property that is used in the test class specified. In our example the sr-only class uses the position property.
asp-fallback-test-value
The value that is used for the CSS property specified. In our example the value absolute is set for the position property.
And there we have it. That is all we need to do. The Link Tag Helper works by creating a HTML element with the fallback test class set. It will then query that element to check if the specified property (position) has the expected value (absolute). If this test fails, the CDN URL must have failed and the fallback URL is used instead.
You don't need it until you need it
I had forgotten I implemented this on my site, until my CDN actually failed. Then I was so glad I had. The local CSS file was used instead and my site was still fully functional and presentable. It wasn't perfect, I haven't implemented a nice fallback for images (which I also get from a CDN), but otherwise everything looked fine. In the end I had to create a new CDN endpoint so in all it took about a day to fix, but that was ok thanks to this fallback contingency. I cannot stress how important this is to a business site, a day without a workable site could be very costly. Make sure you consider these edge cases and build in contingency plans. Your site will be more robust and capable when things go wrong.