ASP.NET Core Razor Pages Example w/ gulp process to push image assets to Azure CDN
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.vscode
MyTagHelpers
Pages
Properties
wwwroot
.bowerrc
.dockerignore
.gitignore
Dockerfile
Program.cs
README.MD
Startup.cs
appsettings.Development.json
appsettings.json
bower.json
bundleconfig.json
dockerbuild.sh
gulpfile.js
package.json
pagescdn.csproj

README.MD

Razor Pages CDN

Example ASP.Core Razor Page application which adds a gulp process to push assets to a Azure CDN.

CDN Image

A custom TagHelper for CDN based Images is used to get the image from the CDN and has a Fallback Image Source if the image is not available.

The TagHelper inherits from the ImageTagHelper and uses the asp-append-version attribute for cache busting to ensure the most up to date version of the image is available.

Source

<img src="/images/captamerica.jpg"
    asp-cdn-uri="https://shboyer2.azureedge.net"
    asp-append-version="true" alt="Captain America"
    asp-fallback-src="~/images/deadpool.jpg"
/>

HTML Rendered

<img
  src="https://shboyer2.azureedge.net/images/captamerica.jpg?v=yY-cpsYC7lzzUnWEx7riu6MHWngzWa90Z1x6JzsM_hM"
  alt="Captain America"
  onerror="this.src='/images/deadpool.jpg?v=nMTfG6JvY--KrkqZP7mEuXOz8EpkcYZALf2-QGN5yeU';console.log('/images/captamerica.jpg?v=yY-cpsYC7lzzUnWEx7riu6MHWngzWa90Z1x6JzsM_hM NOT FOUND.')"
>

Publish Process

Pushing the images to the Azure CDN is accomplished through a gulp task.

var azure = require('gulp-azure-storage');

gulp.task("pushimages", function() {
    return gulp.src("wwwroot/images/**")
      .pipe(azure.upload({
          account:    process.env.ACCOUNT_NAME,
          key:        process.env.ACCOUNT_KEY,
          container:  process.env.CONTAINER_NAME
      }));
  });

The gulp-azure-storage npm package requires three parameters:

  • ACCOUNT_NAME : This is the name of the Storage Account in Azure
  • ACCOUNT_KEY : The Access Key for the Storage Account.
  • CONTAINER_NAME : The name of the Container within the Storage Account i.e. "images"

Notice the script accesses the values from process.env.*, in my case the values are set via script locally prior to running. I have a _development.sh and _production.sh file allowing for testing each environment

#!/bin/bash
ASPNETCORE_ENVIRONMENT="Development"
ACCOUNT_NAME="my-account-name"
ACCOUNT_KEY="really-long-key-value"
CONTAINER_NAME="images"

echo "ASP.NET Environment:" $ASPNETCORE_ENVIRONMENT
echo "Storage Account: " $ACCOUNT_NAME
echo "Account Key: " $ACCOUNT_KEY
echo "Container Name: " $CONTAINER_NAME

For CI/CD processes like VSTS or Travis etc.; set these ENV variables where appropriate in the build scripts.

Options for running

Pre-build commands to the csproj file which runs the process upon F5 in Visual Studio or dotnet build on the command-line.

The gulp publish task calls the min and pushimages task

  <Target Name="MyPreCompileTarget" BeforeTargets="Build">
    <Exec Command="gulp publish" />
  </Target>

Command Line

gulp publish

VSTS - Build the pipleline that does the process of executing the scripts and pushes the application to the necessary slot location in Azure.

Running the command yeilds the following output:

$ gulp publish
Using gulpfile ~/pagescdn/gulpfile.js
Starting 'min:js'...
Starting 'min:css'...
Starting 'min:html'...
Starting 'pushimages'...
Finished 'min:js' after 78 ms
Finished 'min:css' after 94 ms
uploading [======] 100%
6 files uploaded.