Deploy SPFx Solution Package Using Office 365 CDN

0

This CDN location, being public, can be accessed easily. Follow below steps:

Configure CDN in Office 365 Tenant

  • Download and install the latest version of SharePoint Online Management Shell
  • Open the SharePoint Online Management Shell
  • Connect to SharePoint Online tenant using below cmdlet
    • Connect-SPOService – Url https://[YourTenant]-admin.sharepoint.com
      (Replace [YourTenant] with actual tenant name)
  • Run below set of commands to get the existing Office 365 public CDN settings on your tenant
    • Get-SPOTenantCdnEnabled -CdnType Public
    • This command returns the status of CDN. True if enabled, false otherwise.
  • Get-SPOTenantCdnOrigins -CdnType Public
    • Returns the location of already configured CDN Origins.
  • Get-SPOTenantCdnPolicies -CdnType Public
  • Returns the policy settings for CDN
  • Run below command to enable the CDN
  • Set-SPOTenantCdnEnabled -CdnType Public

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.

To verify the current status of CDN endpoints, run below command (after 20 mins)

  • Get-SPOTenantCdnOrigins -CdnType Public

Setup New Office 365 CDN in Tenant

  • Open SharePoint site (e.g. https://[tenant].sharepoint.com/sites/[site-collection-name]
  • Create a document library (e.g. O365CDNFiles & folder SPFxDeployO365CDN)
  • Run below command in SharePoint Online Management Shell
    • Add-SPOTenantCdnOrigin -CdnType Public -OriginUrl sites/[site-collection-name]/[document-library]/[Folder]
    • The Origin URL is a relative URL. New CDN origin configuration will again take 20 minutes.

Ex : Add-SPOTenantCdnOrigin -CdnType Public -OriginUrl sites/ epts/O365CDNFiles/SPFxDeployO365CDN

  • Run Get-SPOTenantCdnOrigins to check the status.
  • Create a sub-folder in document library folder preferably with the name of SPFx web part (e.g. SPFxO365Cdn)
  • To get the path of CDN type below the URL in the browser.
https://[tenant].sharepoint.com/_vti_bin/publiccdn.ashx/url?itemurl=https:// [tenant].sharepoint.com/sites/[site-collection-name]/[document-library]/[folder]

https://eminentpower.sharepoint.com/_vti_bin/publiccdn.ashx/url?itemurl=https://eminentpower.sharepoint.com/sites/epts/O365CDNFiles/SPFxDeployO365CDN/SPFxO365Cdn

Configure SPFx Solution for Azure CDN – Update package details

Please go through my previous post, HelloWorld Web Part to create SPFx client-side web part, and test it on a local SharePoint workbench, to deploy these SPFx web parts files to Office 365 CDN.

  • Open package-solution.json file from config folder. This file takes care of solution packaging
  • Set includeClientSideAssets value as false. The client-side assets will not be packaged inside the final package (sppkg file) because these will be hosted on external Office 365 public CDN.

Update CDN Path

  • Open write-manifests.json from config folder
  • Update CDN base path as Office 365 CDN end point
  • Bundle your SPFx webpart project source code using the gulp bundle task.
    gulp bundle –ship
  • Upload the files from temp\deploy folder to CDN location
  • Deploy your SPFx webpart package using the gulp package-solution task.
    gulp package-solution –ship

Upload package to the App Catalog

  1. Open the SharePoint App catalog site
  2. Upload the solution package (sppkg) from sharepoint\solution folder to app catalog
  3. Make sure the URL is pointing to Office 365 CDN
  4. Click Deploy

Test the web part

  • 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
  • Click F12 to open developer toolbar. Confirm that it is served from Office 365 Public CDN

0

You may also like

Leave a Reply

Your email address will not be published.