Automated deployment of your SharePoint Framework solution on Office 365 CDN

There is an important topic about SharePoint Framework, that is ALM (Application Lifecycle Management), Microsoft has provided the ALM APIs, it means by consuming the API will be possible distribute the bundle and the sppkg of our SPFx solution. The current situation predicts that a developer across the command line must run the following steps in order to build the bundle and the sppkg file:

Gulp bundle --ship
Gulp solution-package --ship

After that, you can upload the bundle on Office 365 CDN, Azure or others providers and upload the sppkg file into the App Catalog, all these operations happen by manually. In order to improve the deployment process, this task could be automated. I read an interesting article by Elio Struyf about this question, to summarize adding a little bit of code into the gulp file of the SPFx solution is possible to leverage an automated publishing of the files when we are ready to release the solution. I decided to extend this scenario with additional features, using the amazing PnP Powershell in order to leverage the full Patterns & Practices capabilities (Provisioning of SP artifacts, provisioning of SPFx on modern page……). In this sense, I created a Powershell script split into two files in order to have different and independent tasks, that basically uploads the bundle on the Office 365 CDN, the sppkg on the App Catalog and deploy this latter, as pre-requirement is necessary to install the PnP Powershell more detail here.

The script leverages the PnP functionality in order to make the connection to Office 365 in a secure way and additionally we can add more code to deploy SharePoint artifact and install the SPFx web part on a modern page for example. All you need, to use this Powershell script is include two files (DeploySPFxToO365CDN.ps1, DeploySPFxToAppCatalog.ps1) in your SPFx solution and follow these steps:

Include the files DeploySPFxToO365CDN.ps1, DeploySPFxToAppCatalog.ps1 directly into the root of your SharePoint Framework solution.
Setup the Office 365 CDN URL cdnBasePath in write-manifest.json.
Fill out the parameters contained in the configuration comments of DeploySPFxToO365CDN.ps1:

Parameter Value

$cdnSite https://<tenant>.sharepoint.com/...

$cdnLib <Document Library Name>

$catalogSite https://<tenant>.sharepoint.com/...
Run gulp bundle --ship
Run gulp package-solution --ship
Run DeploySPFxToO365CDN.ps1, set the windows credential manager on your machine to avoid the Office 365 login everytime. more detail here
Run DeploySPFxToAppCatalog.ps1 and your SPFx solution is ready to go