Deploy SPFx Production Solution Files In Specific Folder With In Container On Azure CDN

In this blog you will learn how to deploy SPFx production solution files in specific folder with in container on Azure CDN.

When we create an SPFx solution and deploy the build files on Azure CDN, it deploys all the files in the container which you specify in "deploy-azure-storage.json" file. This is a bit messy to see, because you can deploy multiple solutions on the same container. But what if you want to manage this by solutions or versions?

 

Here is the way.

 

I will show you how to deploy SPFx production deployment files in a specific folder in the Container on Azure CDN.

 

First you have to deploy some Gulp task packages in dev-dependencies.

npm install gulp-util gulp-deploy-azure-cdn --save-dev

Now you need to make the  following changes in the "gulpfile.js" file.

const deployCdn = require('gulp-deploy-azure-cdn');
const gutil = require('gulp-util');
gulp.task('deploy-azure-storage-folder', function() {
    return gulp.src('temp/deploy/**/*', {}).pipe(deployCdn({
        containerName: '<<Your Container Name>>', // Container created in StorageAccount
        serviceOptions: ['<<blobstoragename>>', '<<MyLongSecretStringFromAzureConfigPanel>>'], // custom arguments to azure BlobService
        folder: '<<Folder Name To Store>>', // path within container
        deleteExistingBlobs: false, // true means recursively deleting anything under folder
        concurrentUploadThreads: 20, // number of concurrent uploads, choose best for your network condition
        metadata: {
            cacheControl: 'public, max-age=1', // cache in browser
            cacheControlHeader: 'public, max-age=1' // cache in azure CDN.
        },
        testRun: false // test run - means no blobs will be actually deleted or uploaded, see log messages for details
    })).on('error', gutil.log);
});

At last just call the Gulp task "deploy-azure-storage-folder" with the command gulp deploy-azure-storage-folder.

 

So the Gulp command sequence should be like this:

gulp clean
    gulp bundle --ship
    gulp deploy-azure-storage-folder
    gulp package-solution --ship