Deploy SPFx production solution files in specific folder with in container on Azure CDN

When we creates SPFx solution and deploying the build files on Azure CDN, it deploys all the files in a container which you mentioned in "deploy-azure-storage.json" file. This is bit messy to see. Because you can deploy multiple solution on the same container. But what if you want to manage solutions by Solutions or By 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 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 command gulp deploy-azure-storage-folder.

So gulp command sequence should be like :

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

Forum Discussion

Deploy SPFx production solution files in specific folder with in container on Azure CDN

Share

Resources