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,
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,
Replace with your actual tenant.
•Check if CDN is enabled or not in your tenant by using the below command
This command will return TRUE if already enabled, otherwise FALSE.
This command will return the location of CDN if enabled, otherwise nothing.
This will return Policy setting of CDN.
To enable CDN run below 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.
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
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.
3. Configure SPFx Solution for Azure CDN – Update package details
4. Update CDN path
5. Prepare the package
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.
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.