SharePoint Framework - Deploy SPFx WebParts To Azure CDN

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

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”

    SharePoint

  4. Fill out the form

    SharePoint

  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”

    SharePoint

  3. Click “+ Container”

    SharePoint

  4. Click Access keys and note down any of the access keys

    SharePoint  
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”

    SharePoint

  3. Click Create
  4. The endpoint will appear in the endpoint list

    SharePoint

  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.

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

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

    SharePoint  
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

    SharePoint

  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

    SharePoint

  4. Click F12 to open developer toolbar. Confirm that it is served from Azure CDN

    SharePoint  
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.