All Projects → madskristensen → WebEssentials.AspNetCore.CdnTagHelpers

madskristensen / WebEssentials.AspNetCore.CdnTagHelpers

Licence: other
A CDN helper for ASP.NET Core

Programming Languages

C#
18002 projects

Projects that are alternatives of or similar to WebEssentials.AspNetCore.CdnTagHelpers

next-oss
webpack打包文件上传到OSS
Stars: ✭ 18 (-59.09%)
Mutual labels:  cdn
ElUploader-OSS-Solution
ElementUI - Upload 组件结合 OSS 的封装
Stars: ✭ 28 (-36.36%)
Mutual labels:  cdn
go-cdn
No description or website provided.
Stars: ✭ 18 (-59.09%)
Mutual labels:  cdn
valist
Web3-native software distribution. Publish and install executables, Docker images, WebAssembly, and more. Powered by Ethereum, IPFS, and Filecoin.
Stars: ✭ 107 (+143.18%)
Mutual labels:  cdn
fullstack-jobs
Real(ish) demo using Angular with ASP.NET Core GraphQL and IdentityServer.
Stars: ✭ 84 (+90.91%)
Mutual labels:  aspnet-core
eventhub
Open-source event organizing web application and a reference DDD solution.
Stars: ✭ 97 (+120.45%)
Mutual labels:  aspnet-core
OnlineUsers-Counter-AspNetCore
Display online users count in ASP.NET Core in two ways (Cookie - SingalR)
Stars: ✭ 29 (-34.09%)
Mutual labels:  aspnet-core
uploadcare-ios
UploadcareKit: iOS SDK for Uploadcare API
Stars: ✭ 24 (-45.45%)
Mutual labels:  cdn
AzureFunctionsSecurity
Azure Functions Security
Stars: ✭ 23 (-47.73%)
Mutual labels:  aspnet-core
vsc-markdown-image
Easy to insert a image to markdown
Stars: ✭ 140 (+218.18%)
Mutual labels:  cdn
TheLastTime
C# .NET 5 Blazor WebAssembly Progressive Web Application that tracks when was the last time you did something
Stars: ✭ 23 (-47.73%)
Mutual labels:  aspnet-core
peer-cdn
Lightweight library providing peer to peer CDN functionality
Stars: ✭ 57 (+29.55%)
Mutual labels:  cdn
high-performance-aspnet-core-workshop
Sample application used in the High-Performance ASP.NET Core Workshop
Stars: ✭ 29 (-34.09%)
Mutual labels:  aspnet-core
Linker
🔗 A simple URL shortening website that serves as a nice demo application.
Stars: ✭ 21 (-52.27%)
Mutual labels:  aspnet-core
AspNetCore-Dynamic-Permission
Dynamic Permission Samples in ASP.NET Core and ASP.NET MVC 5.
Stars: ✭ 19 (-56.82%)
Mutual labels:  aspnet-core
AngularLocalizationAspNetCore
Angular ASP.NET Core localization
Stars: ✭ 26 (-40.91%)
Mutual labels:  aspnet-core
janus-gateway-live
RTMP edge speed with janus-gateway
Stars: ✭ 38 (-13.64%)
Mutual labels:  cdn
Awesome-Nuget-Packages
📦 A collection of awesome and top .NET packages sorted by most popular needs.
Stars: ✭ 87 (+97.73%)
Mutual labels:  aspnet-core
freecdn
A front-end CDN based on ServiceWorker
Stars: ✭ 850 (+1831.82%)
Mutual labels:  cdn
powered-cache
The most powerful caching and performance suite for WordPress.
Stars: ✭ 31 (-29.55%)
Mutual labels:  cdn

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.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].