When writing SharePoint Framework Apps, I have come across a situation where I was required to use Azure CDN to store all App Assets such as Third-Party JS Files (Sliders), JQuery-UI, CSS, etc. This article demonstrates the steps involved in pushing assets to CDN via Gulp Tasks. I will not be covering the setting up of Azure CDN but there is a link to the Storage Account creation manual from Microsoft here – https://code.visualstudio.com/tutorials/static-website/create-storage
Using Node Package Manager (npm) install the modules – gulp-azure-storage & @microsoft/sp-build-web
npm i gulp-azure-storage npm i @microsoft/sp-build-web
Assuming that you have set up your Azure Storage Account and Container, keep the following details handy,
account,key,container
Copy and Paste the following gulp task to push JS files directly from your SharePoint Framework App Folder to Azure,
'use strict';
const gulp = require('gulp');
const build = require('@microsoft/sp-build-web');
var azure = require('gulp-azure-storage');
build.initialize(gulp);
gulp.task("pushjs", function() {
return gulp.src("src/js/**") //Your js files location in your App
.pipe(azure.upload({
account: "--Storage Account Name --",
key: "--Key--",
container: "--Container Name--"
}));
});
Execute the following command that triggers a push of all your JS files to Azure,
> gulp pushjs
For uploading CSS Files, follow the same steps adding a new method – pushcss and setting up the css files location.
To overcome the pain of navigating to Azure CDN via the browser, Download the Azure Storage Explorer from Microsoft for free – https://azure.microsoft.com/en-au/features/storage-explorer/