Office 365 Public CDN Overview

Microsoft has recently announced (over a months’ time ago now as I am writing this article) availability of Office 365 Public Content Delivery Network (CDN). This gives us the good option to host the static content such as JavaScript files, CSS, images, documents in CDN. The files in CDN will help better performance with SharePoint pages.

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

  1. The administrator can enable Office 365 Public CDN using SharePoint Online Management Shell.

    1. Admin can set up a SharePoint Document Library or a folder inside it to serve as a CDN origin.
    2. 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.

  2. Upload the static content to SharePoint Document library or a folder inside it to be available via CDN.
  3. The static content can now be accessed using the CDN URLs.
  4. 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
  1. 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.

  1. Check the CDN settings status for your tenant.

    Get-SPOTenant | fl *cdn*


    Office 365
  1. Enable the Public CDN settings for your tenant.

    Set-SPOTenant -PublicCdnEnabled $true
  1. 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"
  1. 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.
    1. Browse to your SharePoint site.
    2. Use any out of box document library to host the assets or create a new one.
    3. Optionally, create a folder inside SharePoint document library to host the assets.
    4. Copy or upload the content files to SharePoint document library.
    5. Check-in and publish as needed.

      Office 365

      New-SPOPublicCdnOrigin -Url "https://<tenant>.sharepoint.com/Documents"

      Office 365

      NoteAny asset under CDN enabled location (including subfolders) will be accessible anonymously via CDN.

  1. View the list of all available CDN origins in the Tenant.

    Get-SPOPublicCdnOrigins

    Office 365
  1. 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