Post
Ask Question

SharePoint Framework - Deploy SPFx WebParts To Office 365 Public CDN

Overview

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.
 
SharePoint  
  1. Get-SPOTenantCdnOrigins -CdnType Public  
SharePoint  
 
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  
SharePoint  
 
This command will return the policy settings for CDN 
 
Run below command to enable the CDN
  1. Set-SPOTenantCdnEnabled -CdnType Public  
SharePoint
 
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  
 
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  
 
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.

    SharePoint

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

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


Similar Articles