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

Enable CDN In Your Office 365 Tenant For SPFx WebPart

A pop-up will open which will ask for admin credentials.

Enable CDN In Your Office 365 Tenant For SPFx WebPart

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

Enable CDN In Your Office 365 Tenant For SPFx WebPart

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.

Enable CDN In Your Office 365 Tenant For SPFx WebPart

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

Enable CDN In Your Office 365 Tenant For SPFx WebPart

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.
Enable CDN In Your Office 365 Tenant For SPFx WebPart

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.
Enable CDN In Your Office 365 Tenant For SPFx WebPart
Enable CDN In Your Office 365 Tenant For SPFx WebPart

Summary

In this article, we saw how SPFx solution assets can be served using Office 365 CDN.

Happy Coding!