Before going through this article, I would recommend you read my previous article. The current article is in continuation of the previous one.
In around April 2017, Microsoft announced and released Office 365 Public CDN for SharePoint. Please refer to the below URL for more information.
Let’s get started.
Step 1
Download the latest version of SharePoint Online Management Shell.
Step 2
Open SharePoint Online Management Shell and connect to SharePoint Online tenant using the below command.
Connect-SPOService -Urlhttps://<your-tenant-name>-admin.sharepoint.com
A pop-up will open which will ask for admin credentials.
Step 3
Check for the current status of Public CDN settings from the tenant level by executing the following commands one-by-one.
Get-SPOTenantCdnEnabled -CdnType Public
Get-SPOTenantCdnOrigins -CdnType Public
Get-SPOTenantCdnPolicies -CdnType Public
Step 4
If the “SPOTenantCdnEnabled” property is False, then we need to enable it. Run the below command to enable it.
Set-SPOTenantCdnEnabled -CdnType Public
** Confirm settings by selecting ‘Y’ and then Enter.
The above screenshot shows that a Public CDN has been enabled in the tenant and the following file types are supported.
CSS, EOT, GIF, ICO, JPEG, JPG, JS, MAP, PNG, SVG, TTF, and WOFF.
Step 6
As in the above screenshot, the configurations are pending, we can use the CDN only when the above locations are enabled. So, keep hitting the below command until all the locations are enabled.
Get-SPOTenantCdnEnabled -CdnType Public
Step 7
Once CDN is enabled and “includeClientSideAssets” is True, we are ready to package the solution.
Run the below command in command prompt to bundle the solution.
gulp bundle --ship
Step 8
Execute the below command to package the solution. This creates the .sppKg package in the solution folder.
gulp package-solution --ship
Step 9
Upload the file in App Catalog in Office 365 tenant.
Notice how the domain list in the prompt says SharePoint Online. This is because the content is either served from the Office 365 CDN or from the app catalog, depending on the tenant settings. Select "Deploy".
Step 10
Add the web part in any SharePoint site within your tenant and see that your web part will work even if the gulp serve command is not running.
Summary
In this article, we saw how SPFx solution assets can be served using Office 365 CDN.
Happy Coding!