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),
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).
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.
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.
Step 4
Open write-manifests.json from the config folder. Update CDN base path with SharePoint library URL.
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.
Step 6
Upload the files from “temp\deploy” folder to the SharePoint library.
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.
Step 8
The last step is to upload the package to SharePoint App Catalog.
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”.
Step 3
Fill out the form and create a storage account. Click on Review+Create, as shown below.
Step 4
Once storage account will be created, below screen will be displayed.
Step 5
Create a Blob container as shown below.
Step 6
Click on Access keys and note any of the key values.
Step 7
The next step is to enable Azure CDN. Select storage account from dashboard. Under “BLOB Service”, select “Azure CDN”.
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.
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)
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.
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.