Using Office 365 Public CDN in SharePoint Online

In the void – bytes counts. You think that’s air you’re breathing? The Appsters wanted to improve their solution by using the public CDN functionality in SharePoint Online. It’s pretty easy to enable in a tenant. I recommend this  Office Dev Center guide for how to do it, and I’m not going into details of exactly that here.

What it does is that enables a library/folder of your choice to be reached from Office 365 using a specific path on the format

https://publiccdn.sharepointonline.com/<tenant host name>/<ID of the public CDN origin>/<sub-path under the origin>

The Appsters’ public CDN URL is

https://publiccdn.sharepointonline.com/appsters2017.sharepoint.com/14550064ec12c5e40d0535ecbda631e812ec4521a87d3e6f671ce5681cc98e91cdf1aa4b/path/to/file.ext

We wanted to share how we work with the Public CDN and Office PnP templates. We are incorporating this into our solution using the CDN URL as a parameter into our pnp-templates.

We are then able to use the parameter when specifying the URL to our JavaScript and CSS files (Of course we’re not referencing every single file – we use a JavaScript script-loader that uses the Sod-functionality to load dependencies (but that’s for another blog post :)). As an example, take a look at how we reference the script-loader from a custom action:

And for the site logo:

And with Chrome Source explorer you can see that our files are loaded from the CDN.

We’re using the public CDN for all of our JavaScript-files, CSS-files, images and logos etc. The only limitation we’ve hit so far is that Office PnP parameters doesn’t work in .spfont files, unfortunately needing us to have the CDN-URL multiple places.

That’s it – happy coding!