SharePoint Framework – Deploy SPFx WebParts To Office 365 Public CDN

Please read through my previous article, Develop First Client-Side Web Part to get started, develop your first SPFx client-side web part, and test it on a local SharePoint workbench. In real-life scenarios, we will have to deploy these SPFx web parts to some hosting environments from where it can be served to SharePoint.

Below are the most commonly followed deployment approaches

  1. Azure CDN (Previous article)
  2. Office 365 Public CDN (This article)
  3. SharePoint Library in your tenant
In this article, we will explore how SPFx web parts can be deployed to office 365 CDN.
Configure CDN in Office 365 Tenant

Any of the document libraries in the SharePoint Online tenant can be promoted as a CDN, which will help to serve the JS files for SPFx client web parts hosted in SharePoint. This CDN location, being public, can be accessed easily.

To configure the CDN in Office 365 follow the below steps,
  • Download and install the latest version of SharePoint Online Management Shell from https://www.microsoft.com/en-us/download/details.aspx?id=35588
  • Open the SharePoint Online Management Shell
  • Connect to SharePoint Online tenant using below cmdlet
    1. Connect-SPOService -Url https://[tenant]-admin.sharepoint.com  

    Replace [tenant] with your actual tenant name

  • Run below set of commands to review the existing Office 365 public CDN settings on your tenant
    1. Get-SPOTenantCdnEnabled -CdnType Public
This command will return the status of CDN. True if CDN is enabled, false otherwise.
  1. Get-SPOTenantCdnOrigins -CdnType Public
Administrator SharePoint Online Management Shell

Administrator SharePoint Online Management Shell

This command will return the location of already configured CDN origins. The URLs are relative. In the first instance, it will not return any values as CDN is not yet set up.
  1. Get-SPOTenantCdnPolicies -CdnType Public
Key Value

Key Value

This command will return the policy settings for CDN
Run below command to enable the CDN
  1. Set-SPOTenantCdnEnabled -CdnType Public
Command

Command

After enabling the CDN, */CLIENTSIDEASSETS origin is by default added as a valid origin. By default allowed file extensions are: CSS, EOT, GIF, ICO, JPEG, JPG, JS, MAP, PNG, SVG, TTF, and WOFF.
The configuration takes up to 15 to 20 minutes.
To check the current status of CDN endpoints, run below command
  1. Get-SPOTenantCdnOrigins -CdnType Public
SharePoint Online Management Shell

SharePoint Online Management Shell

The origin will be listed without (configuration pending) status when it is ready. Please be patient for 15 to 20 minutes until it is ready.
Once CDN origin is ready, the output will be as below.
SharePoint Online Management Shell

SharePoint Online Management Shell

Setup New Office 365 CDN in Tenant

Follow the below steps to setup new CDN location,
  • Open SharePoint site (e.g. https://[tenant].sharepoint.com/sites/[site-collection-name]
  • Create a document library (e.g. CDN)
  • Run below command in SharePoint Online Management Shell
    1. Add-SPOTenantCdnOrigin -CdnType Public -OriginUrl sites/[site-collection-name]/[document-library]

    The Origin URL is a relative URL. New CDN origin configuration will again take 15 to 20 minutes.

  • Run Get-SPOTenantCdnOrigins to check the status.
    ModernCommunication

    ModernCommunication

  • Create a folder in document library preferably with the name of SPFx web part (e.g. O365CDNDeploy)
  • To get the path of CDN type below the URL in the browser.
    1. https://[tenant].sharepoint.com/_vti_bin/publiccdn.ashx/url?itemurl=https:// [tenant].sharepoint.com/sites/[site-collection-name]/[document-library]/[folder] 

Configure SPFx Solution for Azure CDN – Update package details

  1. Open command prompt
  2. In the command prompt, navigate to the 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 includeClientSideAssets value as false. The client side assets will not be packaged inside the final package (sppkg file) because these will be hosted on external Office 365 public CDN.
IncludeClientSideAssets

IncludeClientSideAssets

Update CDN Path
  1. Open write-manifests.json from config folder
  2. Update CDN base path as Office 365 CDN end point
    1. https://publiccdn.sharepointonline.com/[tenant]/sites/[site-collection-name]/[document-library]/[folder]  
Config

Config

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.
Upload the files from “temp\deploy” folder to CDN location (SharePoint document library setup as CDN)
O365CDNDeploy

O365CDNDeploy

Deploy Package to SharePoint
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 the 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 Office 365 CDN
    Do you trust SPFx Deploy?

    Do you trust SPFx Deploy?

  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
    Add App menu

    Add App menu

  4. Click F12 to open developer toolbar. Confirm that it is served from Office 365 Public CDN
    Office 365 Public CDN

    Office 365 Public CDN

Summary
Office 365 CDN is one of the feasible options to deploy the SPFx client side webpart. It requires some manual steps to copy the assets to CDN path. You can update the Office 365 CDN path later in SPFx solution and redeploy it.
About the Author:
Nanddeep is a technical enthusiastic with over 13 years’ experience in Microsoft Technologies especially with .NET, MS Azure and SharePoint. Also a creative, technically sound photographer with experience in custom and specialized photography
Reference:
Nachan, N (2018). SharePoint Framework – Deploy SPFx WebParts To Office 365 Public CDN. Available at: https://www.c-sharpcorner.com/article/sharepoint-framework-deploy-spfx-webparts-to-office-365-public-cdn/ [Accessed: 16 August 2018]
Share this on...

Rate this Post:

Share: