Host extension from Office 365 CDN (Hello World part 4)

This article describes how to deploy your SharePoint Framework Application Customizer to be hosted from an Office 365 CDN and how to deploy that to SharePoint for end users. This article continues with the Hello World extension built in the previous article Deploy your extension to SharePoint (Hello World part 3), where we were still hosting the customizer from localhost.

Be sure you have completed the procedures in the following articles before you begin:

You can also follow these steps by watching the video on the SharePoint PnP YouTube Channel.

Screenshot of the YouTube video player for this tutorial

Enable the CDN in your Office 365 tenant

Office 365 CDN is the easiest way to host SharePoint Framework solutions directly from your tenant while still taking advantage of the Content Delivery Network (CDN) service for faster load times of your assets.

  1. Download the SharePoint Online Management Shell to ensure that you have the latest version.

  2. Connect to your SharePoint Online tenant by using PowerShell:

    Connect-SPOService -Url https://contoso-admin.sharepoint.com
    
  3. Get the current status of public CDN settings from the tenant level by executing the following commands one-by-one:

    Get-SPOTenantCdnEnabled -CdnType Public
    Get-SPOTenantCdnOrigins -CdnType Public
    Get-SPOTenantCdnPolicies -CdnType Public
    
  4. Enable public CDN in the tenant:

    Set-SPOTenantCdnEnabled -CdnType Public
    

    Public CDN has now been enabled in the tenant by using the default file type configuration allowed. This means that the following file type extensions are supported: CSS, EOT, GIF, ICO, JPEG, JPG, JS, MAP, PNG, SVG, TTF, and WOFF.

  5. Open up a browser and move to a site collection where you'd like to host your CDN library. This could be any site collection in your tenant. In this tutorial, we will create a specific library to act as your CDN library, but you can also use a specific folder in any existing document library as the CDN endpoint.

  6. Create a new document library on your site collection called CDN and add a folder named helloworld to it.

    helloworld-extension folder in CDN library


  7. In the PowerShell console, add a new CDN origin. In this case, we are setting the origin as */cdn, which means that any relative folder with the name of cdn acts as a CDN origin.

    Add-SPOTenantCdnOrigin -CdnType Public -OriginUrl */cdn
    
  8. Execute the following command to get the list of CDN origins from your tenant:

    Get-SPOTenantCdnOrigins -CdnType Public
    

Note that your newly added origin is listed as a valid CDN origin. Final configuration of the origin takes approximately 15 minutes, so we can continue creating your test extension, which will be hosted from the origin after deployment is completed.

List of public origins in tenant

When the origin is listed without the (configuration pending) text, it is ready to be used in your tenant. This indicates an on-going configuration between SharePoint Online and the CDN system.

Update your solution project for the CDN URLs

  1. Return to the previously created solution to perform the needed URL updates.

  2. Update the write-manifests.json file (under the config folder) as follows to point to your CDN endpoint. Use publiccdn.sharepointonline.com as the prefix, and then extend the URL with the actual path of your tenant. The format of the CDN URL is as follows:

    https://publiccdn.sharepointonline.com/<tenant host name>/sites/site/library/folder
    

    Updated write manifest content with path to CDN endpoint

  3. Save your changes.

  4. Execute the following tasks to bundle your solution. This executes a release build of your project using the CDN URL specified in the write-manifests.json file. The output of this command is located in the ./temp/deploy folder. These are the files that you need to upload to the SharePoint folder acting as your CDN endpoint.

    gulp bundle --ship
    
  5. Execute the following task to package your solution. This command creates an app-extension.sppkg package in the sharepoint/solution folder and also prepares the assets in the temp/deploy folder to be deployed to the CDN.

    gulp package-solution --ship
    
  6. Upload or drag-and-drop the newly created client-side solution package to the app catalog in your tenant, and then select the Deploy button.

    App Catalog Trust Dialog with path to CDN endpoint

  7. Upload or drag-and-drop the files in the temp/deploy folder to the CDN/helloworld folder created earlier.

  8. Install the new version of the solution to your site and ensure that it's working properly without your locahost hosting the JavaScript file.

    Custom header and footer elements rendered in the page


Congratulations, you have enabled a public CDN in your Office 365 tenant and taken advantage of it from your solution!