Overview
Microsoft announced the availability of Office 365 Public Content Delivery Network (CDN) about a month back. This gives us the good option to host the static content like JavaScript files, CSS, images, documents in CDN. The files in CDN will help better the performance with SharePoint pages.
How CDN works
- The administrator can enable Office 365 Public CDN using SharePoint Online Management Shell.
- Admin can set up a SharePoint Document Library or a folder inside it to serve as a CDN origin.
- Note that the content exposed over the CDN can be accessed by anyone anonymously. Make sure you are not exposing any of the business sensitive information from SharePoint Document library serving the CDN origin.
- Upload the static content to SharePoint Document library or a folder inside it to be available via CDN.
- The static content can now be accessed using the CDN URLs.
- The CDN URLs are available to be used in SharePoint sites and any customizations that can be hosted from the SharePoint.
Configuration
Prerequisite
- SharePoint Online Management Shell (Download the latest version from here.)
- Administrator rights
- Connect to SharePoint Online tenant
$creds = Get-Credential
Connect-SPOService -Url https://<tenant>-admin.sharepoint.com/ -Credential $creds
Note
Replace <tenant> with your tenant name.
- Check the CDN settings status for your tenant.
Get-SPOTenant | fl *cdn*
- Enable the Public CDN settings for your tenant.
Set-SPOTenant -PublicCdnEnabled $true
- You can also optionally configure the allowed file types or extensions.
Set-SPOTenant -PublicCdnAllowedFileTypes "CSS,EOT,GIF,ICO,JPEG,JPG,JS,MAP,PNG,SVG,TTF,WOFF,TXT"
- Create CDN origin.
With the CDN settings applied, we are now ready to configure SharePoint document library or a folder inside it as a CDN origin.
- Browse to your SharePoint site.
- Use any out of box document library to host the assets or create a new one.
- Optionally, create a folder inside SharePoint document library to host the assets.
- Copy or upload the content files to SharePoint document library.
- Check-in and publish as needed.
New-SPOPublicCdnOrigin -Url "https://<tenant>.sharepoint.com/Documents"
Note - Any asset under CDN enabled location (including subfolders) will be accessible anonymously via CDN.
- View the list of all available CDN origins in the Tenant.
Get-SPOPublicCdnOrigins
- Remove the CDN origin.
Remove-SPOPublicCdnOrigin -Identity <id>
<id> is the value of the ID parameter from Get-SPOPublicCdnOrigins cmdlet
Note - It may take up to 15 minutes for changes to get into the effect.
Using CDN on SharePoint Pages and Customizations
We now have the CDN origin setup, we have to replace them with the actual CDN URLs. We have to use the REST API to get the prefix for one of the asset from CDN origin and we can use the CDN URL as a constant for referring other assets in the origin.
The structure or syntax of CDN URL is as below
https://publiccdn.sharepointonline.com/<tenant host name>/<ID of the public CDN origin>/<sub-path under the origin>
REST API to get public CDN URL
https://contoso.sharepoint.com/_vti_bin/publiccdn.ashx/url?itemurl=https://contoso.sharepoint.com/Documents/9.PNG
Original URL will be returned if asset does not exists in origin or the file type is not enabled as exposed file type for CDN.
For image renditions can be accessed from CDN using height and width parameters
https://publiccdn.sharepointonline.com/<tenant>.sharepoint.com/2646007161eeae8fe.../image.png?height=100&width=100&cropMode=fit