Deploy SPFX-webpart to Office 365 Public CDN

What is Office 365 CDN?

The Office 365 CDN (Content Delivery Network) allows you to easily publish your files directly from SharePoint document libraries to servers. Publishing a file to the Office 365-based CDN is as simple as uploading it to a document library. Using a specific URL, the files can be accessed instantly through the CDN.

After creating SPFX webpart we must deploy it to a hosting environment from where SharePoint can access it.

In this article we will learn how to deploy SPFX webpart to Office 365 CDN.

For that we have to follow below steps,

1. Configure CDN In Office 365 CDN Tenan.
2. Set-Up New Office 365 CDN in Tenant.
3. Configure SPFx Solution for Azure CDN – Update package details.
4. Update CDN Path.
5. Prepare the package.
6. Deploy Package to SharePoint and Upload package to App Catalog
7. .Test the webpat.

1. Configure CDN In Office 365 CDN Tenant

In SharePoint online any of the document libraries can be promoted as 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.

Please follow these steps to configure the CDN in Office 365,

• Make sure that the latest version of SharePoint online management shell is installed, if not, then install first.
• Open the SharePoint online management shell.
• Connect to SharePoint online through the following cmdlet below.

• Connect-SPOService –Url https://[tenant]-admin.sharepoint.com

Replace with your actual tenant.
•Check if CDN is enabled or not in your tenant by using the below command

• Get-SPOTenantCdnEnabled -CdnType Public 

This command will return TRUE if already enabled, otherwise FALSE.

• Get-SPOTenantCdnOrigins -CdnType Public  

This command will return the location of CDN if enabled, otherwise nothing.

• Get-SPOTenantCdnPolicies -CdnType Public 

This will return Policy setting of CDN.

To enable CDN run below Command.

• Set-SPOTenantCdnEnabled -CdnType Public 

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   

Once the origin is ready, the output will be as shown below.

2. Setup New Office 365 CDN In Tenant

To set up a new CDN location please follow the below steps.

• Open a SharePoint site.
• Create a document library (e.g. CDN)
• Run below command

• Add-SPOTenantCdnOrigin -CdnType Public -OriginUrl sites/[site-collection-name]/[document-library]                                             

The New CDN configuration will take 10 -15 minutes.

• Create a folder in document library (CDN) preferably with the name of the webpart (e.g. Deploy Office 365 CDN).
• Type below the Url in your browser to get the path.

• https                                                                                                 ://[tenant].sharepoint.com/_vti_bin/publiccdn.ashx/url?itemurl =  https://                                                                                            [tenant].sharepoint.com/sites/[site-collection-name]/[document- library]/[folder]                                                                                

3. Configure SPFx Solution for Azure CDN – Update package details

1. Open Command prompt.
2. Open SPFX solution folder in command prompt.
3. Type “ code.” to open the solution in code editor.
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.

4. Update CDN path

1. Open write-manifests.json from config folder.
2. Update CDN base path as Office 365 CDN end point.

5. Prepare the package

• gulp bundle –ship 

Run above command in command prompt.
This will minify the required assets to upload to CDN. The ship switch denotes distribution. The minified assets are located in “temp\deploy” folder.
Upload the files from “temp\deploy” folder to CDN location (SharePoint document library setup as CDN)

6. Deploy Package to SharePoint and upload package to App Catalog.

• gulp package-solution –ship 

The above Command will create solution package (.sppkg) in SharePoint\solution folder.
After that we have to upload solution package to App catalog and make sure that the URL is pointing to Office 365 CDN.

click Deploy.

7. Test the Webpart

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

Summary

Deployment of SPFx webpart in Office 365 CDN is a good Option.
In this article, we got an insight of how SPFx solution assets can be served using Office 365 CDN.