SharePoint Framework - Deploy SPFx WebParts To Azure CDN

Overview

In the previous article Develop First Client Side Web Part, we developed SharePoint Framework client side webparts and tested them on a local SharePoint workbench. The local SharePoint workbench allows us to quickly test the SPFx web parts. The Node.js provides the hosting platform to run on the local environment. However in the real life scenarios we will have to deploy these SPFx webparts to some hosting environments from where it can be served to SharePoint.

The SPFx webparts are mainly deployed on one of the below CDN (Content Delivery Network) options:

1. Azure CDN (This article)
2. Office 365 Public CDN
3. SharePoint Library in your tenant

In this article, we will have a look at how SPFx webparts can be deployed to Azure CDN.

Configure MS Azure Storage Account

Follow the below steps to configure your MS Azure storage account and integrate it with CDN,

1. Login to MS Azure Portal (https://portal.azure.com)
2. Click “Create a resource”
3. Click “Storage account - blob, file, table, queue”
   
   
   
   
4. Fill out the form
   
   
   
   
5. Click Create
   
   
6. The storage account endpoint can be referred by URI – http://<StorageAccountName>.blob.core.windows.net

Configure BLOB Container

1. Select storage account from dashboard
2. Click “Blobs”
   
   
   
   
3. Click “+ Container”
   
   
   
   
4. Click Access keys and note down any of the access keys
   
   
    

Enable Azure CDN for Storage Account

We will enable CDN for the above created storage account.

1. Select storage account from dashboard
   
   
2. Under “BLOB Service”, select “Azure CDN”
   
   
   
   
3. Click Create
4. The endpoint will appear in the endpoint list
   
   
   
   
5. The BLOB container can be accessed from url: http://<EndpointName>.azureedge.net/<myPublicContainer>/<BlobName>

Configure SPFx Solution for Azure CDN Update package details

1. Open command prompt
2. In the command prompt, navigate to SPFx solution folder
3. Type “code .” to open the solution in code editor of your choice
4. Open package-solution.json file from config folder. This file takes care of solution packaging.
5. Set includeClientSideAsserts value as false. The client side assets will not be packaged inside final package (sppkg file) because these will be hosted on external CDN.
   
   
    

Update Azure storage account details to Solution

1. Open deploy-azure-storage.json from config folder to specify the Azure storage account details
2. Update values as below,
   
   
1. account - storage account name
2. container - BLOB container
3. accessKey - storage account access key (primary or secondary)

 

Update CDN Path

1. Open write-manifests.json from config folder
2. Update CDN base path as BLOB container end point
   
   
    

Prepare the package

In the command prompt, type the below command

1. gulp bundle --ship

This will minify the required assets to upload to CDN. The ship switch denotes distribution. The minified assets are located at “temp\deploy” folder.

Deploy assets to Azure Storage

In the command prompt, type the below command

1. gulp deploy-azure-storage

This will deploy the assets (JavaScript, CSS files) to Azure CDN.

Deploy Package to SharePoint

The next step is to deploy the app package (sppkg) to SharePoint App catalog.

In the command prompt, type the below command

1. gulp package-solution --ship

This will create the solution package (sppkg) in sharepoint\solution folder.

Upload package to app catalog

1. Open the SharePoint app catalog site
2. Upload the solution package (sppkg) from sharepoint\solution folder to app catalog
3. Make sure the url is pointing to Azure CDN
   
   
   
   
4. Click Deploy

Test the web part

1. Open any SharePoint site in your tenant
2. Add the App to your site from “Add an App” menu
3. Edit any page and add the webpart
   
   
   
   
4. Click F12 to open developer toolbar. Confirm that it is served from Azure CDN
   
   
    

Summary

Azure CDN is one of the preferred options to deploy the SPFx client side webpart. SharePoint framework provides out of box support to deploy assets to Azure CDN. You can update the CDN path later in SPFx solution and redeploy it.