Sharing static assets between asp.net core applications (or via Azure CDN?)

Question

I have two asp.net core applications which share a number of static assets (images, css, fonts etc) and as a temporary solution I’m keeping copies in both projects. I want to streamline this and obviously keep only one copy of the asset and make it accessible to both projects.

I was thinking about solutions to this and wondered if it was possible to create a new project in the solution and somehow replicate the content to the Azure CDN for example upon git commit and then just reference the CDN URL’s in the source. Obviously I dont want to manually manage this content and have to manually upload the files to a CDN/Storage endpoint every time I change my CSS or add an image.

However, I can’t see if this is possible and if so how to set this up? The app itself is hosted in Azure so this either needs to be implemented as a visual studio fix (e.g. the old ‘add link’ no longer seems to be available?) or in Azure.

Any suggestions on how to achieve this would be welcomed.

Thanks

score 2 · Answer 1 · answered Aug 27 '18 at 23:21

I use PhysicalFileProvider to share static assets between multiple ASP.NET core web projects and it works really well. I also posted this same answer here: https://stackoverflow.com/a/52048104/188740, as it applies there as well.

To do this, I created a new folder in src. I called it assets so my Solution Explorer looks something like this:

src/assets
src/Foo.Web1
src/Foo.Web2
test/Foo.Tests

I put all of the shared static assets (e.g. css, JavaScript, images) in /src/assets. Now I map /src/assets to the wwwroot/assets folders in Foo.Web1 and Foo.Web2 projects using PhysicalFileProvider. In Startup.cs's Configure method, I add this:

if (Env.IsDevelopment())
{
    // app is IApplicationBuilder and Env is IHostingEnvironment
    app.UseStaticFiles(new StaticFileOptions
    {
        FileProvider = new PhysicalFileProvider(Regex.Replace(Env.ContentRootPath, $"{Env.ApplicationName}$", "assets"))),
        RequestPath = new PathString("/assets"),
        OnPrepareResponse = ctx =>
        {
            // Optionally manipulate the response as you'd like. for example, I'm setting a no cache directive here for dev.
            ctx.Context.Response.Headers.Append("Cache-Control", "no-cache, no-store, must-revalidate");
        }
    });
}

Now any request that comes to /assets will be served from the /src/assets folder that can be shared by Foo.Web1 and Foo.Web2. All changes in /src/assets will be reflected in real-time. This work great in dev, but when it comes to production, I don't do this. Instead, I copy the files from /src/assets to Foo.Web1/wwwroot/assets and Foo.Web2/wwwroot/assets in my deployment script so this remapping doesn't need to happen.

score 1 · Answer 2 · answered Mar 28 '18 at 04:30

1

Have a look at WebEssentials.AspNetCore.CdnTagHelpers. That's a nuget which makes it easy to serve .net core static resources via CDN. Seems it will solve your problem

answered Mar 28 '18 at 04:30

irriss

742
2
11
22

score 0 · Answer 3 · answered Nov 22 '16 at 07:52

The easiest way is to publish your static content to a storage account (blobs), and then connect the CDN to the storage account; you then to change any url references in your project to use the CDN endpoint instead of just the normal relative route.

The bit you want to automate is at build/release time - you can do this with VSTS adding a command task to use AZCOPY to put all your static files in the right place in the storage account; you can do this in your post build task as well if you're not using a CI/CD process for dev/test.

If you need to purge the CDN you can do that via a REST API call, like

POST /subscriptions/{subscriptionId}/resourceGroups/{resourceGroupName}/providers/Microsoft.Cdn/profiles/{profileName}/endpoints/{endpointName}/purge?api-version=2016-10-02

See CDN docs here

Its a good route to go down, not enough people realise how easy CDN in azure is and how much it improves your site's feel of snappiness.

[EDIT] - forgot about the AzureFileCopy vsts task, see GitHub project

score 0 · Answer 4 · answered Nov 22 '16 at 14:03

The solution proposed by Russell Young will definitely work, but perhaps an easier way is to use a custom origin in the CDN and point the origin URL to the original location of the static assets. That way there is no need manage the assets in 2 locations.

Sharing static assets between asp.net core applications (or via Azure CDN?)

4 Answers4