Home

Awesome

ASP.NET Core CDN helpers

Build status NuGet

This NuGet package makes it painless to use a Content Delivery Network (CDN) to serve static files from any ASP.NET Core web application no matter where it is hosted.

Using a CDN to serve static resoruces (JS, CSS and image files) can significantly speed up the delivery of content to your users by serving those resources from edge servers located in data centers around the world. This reduces latency by a wide margin.

CDN chart

Using a CDN has never been cheaper and with this NuGet package it is now super easy to set up.

Read more about Content Delivery Networks here.

Getting started

It's easy to use a CDN in your ASP.NET Core web application. Here's how to get started.

1. Setup a CDN

We recommend you use the Azure CDN (try it for free now), but any CDN supporting reverse proxying or origin push will work.

Keep in mind that you don't need to host your website on Azure in order to use the Azure CDN.

When using the Azure CDN, you will get an endpoint URL that looks something like this: https://myname.azureedge.net. You need that URL in step 2.

2. Register the Tag Helpers

Do that by adding this line to the _ViewImports.cshtml file:

@addTagHelper *, WebEssentials.AspNetCore.CdnTagHelpers

Then add he CDN url to the appsettings.json file:

{
  "cdn": {
    "url": "https://myname.azureedge.net"
  }
}

That's it. Now all your static assets are being requested directly from the CDN instead of locally from your website.

3. Verify it works

Run the page in the browser and make sure that all JavaScript, CSS and image references have been modified to now point to the CDN.

You can do that by looking at the HTML source code. There should no longer by any relative file references, like this one:

<script src="js/site.js"></script>

...but instead it should look like this:

<script src="https://myname.azureedge.net/js/site.js"></script>

Dynamic HTML

If HTML is generated from a database or other source where you don't control the markup, you can still cdnify the image elements by using the cdnify attribute like so:

<article class="blogpost" cdnify>
  @Model.Post
</article>

Configuration

Use the appsettings.json file to store the configuration settings.

{
  "cdn": {
    "url": "https://myname.azureedge.net",
    "prefetch": true
  }
}

That makes it easy to disable CDN locally when developing and only enable it in production by adding the config to the appsettings.production.json file.

url: An absolute URL that is used to prefix all static file references with.

prefetch: Will by default inject a DNS prefetch link to the <head> of the document to speed up the DNS resolution. Set to false to disable.