SharePoint OnlineTechnologyUncategorised

Gulp Push SharePoint Framework App Assets (JS, CSS, PNG etc.) to Azure CDN

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 –

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,


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');


gulp.task("pushjs", function() {  

  return gulp.src("src/js/**") //Your js files location in your App


     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 –