Different CDN Options For SharePoint Framework WebPart

In this article, I will explain how you can enable SharePoint Document Library to use as CDN and then, how we can leverage Azure Storage to be used as CDN for SPFx web parts.

Introduction

 
This article is in continuation of my previous article where I explained how you can enable Content Delivery Network (CDN) in your Office 365 Tenant for SharePoint Framework (SPFx) web part.
 
Let’s get started!
 
There are 3 ways in which you can host your web part assets in SharePoint Framework (although you can also use any CDN of your wish, just configurations would be different),
  1. Office 365 as CDN
  2. SharePoint Document Library as CDN
  3. Azure Storage as CDN

Using SharePoint Document Library as CDN

 
Step 1
 
Create a SharePoint Document Library in your SharePoint site and give it a name (I have given the name as SPFxAssets).
 
Different CDN options for SharePoint Framework WebPart
 
Step 2
 
Go to Library settings and click on “Permissions for this document library” and give read permission to all users. Added “Everyone except external users” group in Site Visitors group.
 
Different CDN options for SharePoint Framework Web Part
 
Different CDN options for SharePoint Framework Web Part
 
Step 3
 
Open the package-solution.json file from the config folder. This file takes care of solution packaging. Set includeClientSideAssets value as false.
 
The client-side assets will not be packaged inside the final package (.sppkg file) because these will be hosted in the SharePoint library.
 
Different CDN options for SharePoint Framework Web Part
 
Step 4
 
Open write-manifests.json from the config folder. Update CDN base path with SharePoint library URL.
 
Different CDN options for SharePoint Framework Web Part
 
Step 5
 
Prepare the package by typing the command - gulp bundle --ship. This will minify the required assets to upload to CDN. The minified assets are located at “temp\deploy” folder.
 
Different CDN options for SharePoint Framework Web Part 
 
Step 6
 
Upload the files from “temp\deploy” folder to the SharePoint library.
 
Different CDN options for SharePoint Framework Web Part
 
Step 7
 
Deploy the package to SharePoint using the command - gulp package-solution --ship. This will create the solution package (.sppkg) in sharepoint\solution folder.
 
Different CDN options for SharePoint Framework Web Part
 
Step 8
 
The last step is to upload the package to SharePoint App Catalog.
 
Different CDN options for SharePoint Framework Web Part
 
Click Deploy. Add the web part on the SharePoint page and you will see that it will be served from SharePoint Document Library.
 

Using Azure Storage as CDN

 
For using Azure as CDN, you need to first configure Azure Storage Account. The steps are as follows,
 
Step 1
 
Go to portal.azure.com and login with your Azure account.
 
Step 2
 
Click on “Create a resource” link on the left and then click on “Storage Account”.
 
Different CDN options for SharePoint Framework Web Part
 
Step 3
 
Fill out the form and create a storage account. Click on Review+Create, as shown below.
 
Different CDN options for SharePoint Framework Web Part
 
Step 4
 
Once storage account will be created, below screen will be displayed.
 
Different CDN options for SharePoint Framework Web Part
 
Step 5
 
Create a Blob container as shown below.
 
Different CDN options for SharePoint Framework Web Part
 
Step 6
 
Click on Access keys and note any of the key values.
 
Different CDN options for SharePoint Framework Web Part
 
Step 7
 
The next step is to enable Azure CDN. Select storage account from dashboard. Under “BLOB Service”, select “Azure CDN”.
 
Different CDN options for SharePoint Framework Web Part
 
Different CDN options for SharePoint Framework Web Part
 
Step 8
 
The BLOB container can be accessed from url: http://<EndpointName>.azureedge.net/<myPublicContainer>/<BlobName>
 
Step 9
 
Open package-solution.json file from config folder. Set includeClientSideAsserts value as false.
 
Different CDN options for SharePoint Framework Web Part
 
Step 10
 
Open deploy-azure-storage.json from config folder to specify the Azure storage account details and update the following values,
  • account: storage account name
  • container: BLOB container
  • accessKey: storage account access key (any key value – key 1 or key 2)
Different CDN options for SharePoint Framework Web Part
 
Step 11
 
The last step is to update the CDN path in write-manifests.json.
 
Step 12
 
Bundle the web part using the command - gulp bundle --ship. Use the command – gulp deploy-azure-storage to deploy the web part assets to Azure CDN.
 
Step 13
 
Next step is to package the solution using the command - gulp package-solution --ship.
 
Step 14
 
Upload the package to SharePoint App Catalog.
 
Different CDN options for SharePoint Framework Web Part
 
Click Deploy. Add the web part on SharePoint page and you will see that it will be served from Azure CDN.
 
General Tip
 
For your practice, clone the samples from Github. Go to the “samples” folder and you will find demo projects in Angular, No JavaScript Framework, jQuery and React JS.
 

Summary

 
In this article, I showed the steps to use the SharePoint Document Library or Microsoft Azure as Content Delivery Network (CDN) for SharePoint Framework Web parts.