Different CDN Options For SharePoint Framework WebPart

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),

Office 365 as CDN
SharePoint Document Library as CDN
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.

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.