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
- Azure CDN (Previous article)
- Office 365 Public CDN (This article)
- 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.
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
- 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
- Get-SPOTenantCdnEnabled -CdnType Public
This command will return the status of CDN. True if CDN is enabled, false otherwise.
- Get-SPOTenantCdnOrigins -CdnType Public
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.
- Get-SPOTenantCdnPolicies -CdnType Public
Key Value
This command will return the policy settings for CDN
Run below command to enable the CDN
- Set-SPOTenantCdnEnabled -CdnType Public
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
- Get-SPOTenantCdnOrigins -CdnType Public
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
Setup New Office 365 CDN in Tenant
Follow the below steps to setup new CDN location,
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
- 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
- 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.
- https://[tenant].sharepoint.com/_vti_bin/publiccdn.ashx/url?itemurl=https:// [tenant].sharepoint.com/sites/[site-collection-name]/[document-library]/[folder]
- Open command prompt
- In the command prompt, navigate to the SPFx solution folder
- Type “code .” to open the solution in code editor of your choice
- Open package-solution.json file from 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 on external Office 365 public CDN.
IncludeClientSideAssets
Update CDN Path
- Open write-manifests.json from config folder
- Update CDN base path as Office 365 CDN end point
- https://publiccdn.sharepointonline.com/[tenant]/sites/[site-collection-name]/[document-library]/[folder]
Config
Prepare the package
In the command prompt, type the below command
- 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
Deploy Package to SharePoint
In the command prompt, type the below command
- gulp package-solution –ship
This will create the solution package (sppkg) in sharepoint\solution folder.
Upload package to the App Catalog
- Open the SharePoint App catalog site
- Upload the solution package (sppkg) from sharepoint\solution folder to app catalog
- Make sure the URL is pointing to Office 365 CDN
Do you trust SPFx Deploy?
- Click Deploy
Test the web part
- Open any SharePoint site in your tenant
- Add the App to your site from “Add an App” menu
- Edit any page and add the webpart
Add App menu
- Click F12 to open developer toolbar. Confirm that it is served from 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]
