Configure SPFx Webparts to Azure CDN

In this article, I have mentioned all steps on deploying SPFx webparts to Azure CDN. It requires some manual steps and some command to create the webparts.          

SharePoint Framework has provided ootb supports for deploying to Azure Storage account.   Please use Azure Storage account to maintain the web parts.

For the Users who follow Microsoft’s SharePoint framework, while building the SPFx webpart you get your resource files i.e. CSS, JSON etc. You can deploy these resource files on one of the below CDN:

1. SharePoint Library in tenant
2. Office 365 Public CDN (Content Delivery Network)
3. Azure CDN (Content Delivery Network)

Follow the below steps to deploy webpart in Azure CDN:

Create MS Azure Storage Account:

1. Open MS Azure Portal (https://portal.azure.com) in any browser and Login.
2. Click “Storage accounts”.
3. Click “+Create” and enter all the details for your storage account.

Check the following screen shot for all the settings:

4. Fill all the details given below and click “Review +Create”.

 5. Go to the Resource.

Create BLOB Container:

1. Click on “Containers”.

2. Select “+ container”

3. Give the details and click “ok”.

Storage account access key:

1. Select Access Keys in your Containers Settings.

2. Copy one of the access key from key1 or key2.

Enable CDN profile:

1. Under “Blob Service”, select “Azure CDN”.

2. Create a new endpoint and Click “Create”

3. The endpoint list appears like this.

   Configure SPFx Solution:

1. Navigate to SPFx solution folder in command prompt
2. To open the webpart project in Visual Studio Code enter “code .”
3. Open package-solution.json in the config folder.
4. Set “includeClientSideAssets” value as false and “skipFeaturedeployment” value as true.

1. To specify the Azure storage account details open deploy-azure-storage.json from config folder
2. Update values as below:

3. Open write-manifests.json from config folder and update the path

Prepare Solution to deploy:

1. “gulp bundle –ship” run the command on command prompt . The ship switch denotes distribution.
2. “gulp deploy-azure-storage” This commands deploy assets such as JavaScript and CSS files to the CDN.
3. “gulp package-solution –ship” this command create the solution package in the folder.

Deploy package to SharePoint:

1. Open SharePoint app catalog, Upload or drag and drop the client-side solution package to the app catalog
2. Select on “Deploy”.

3. Go to your “Site contents” and add your app.

4. Edit page and select your webpart on your webpart picker.

Summary:

  Azure CDN is inexpensive and easy to configure. Azure CDN (Content Delivery Network) is a global cache option to deploy the SPFx client side webpart but always remember that CDN are public and cannot be secured, so the files shouldn't contain sensitive information.