I am new to both SPFx web-parts and the O365 CDN. My question stems from my newness in both areas. I have managed to enable the CDN in my tenant and define a couple of Origins. My understanding is these origins are locations that are universal to all sites (for example every site has a "Site Assets" library so I made that an Origin). Any image, script file, etc. in any of the sites' Site Assets library will be cached in the CDN. I think I have that down but please correct me if I am wrong.

My problem is this: Prior to building, bundling, and packaging a spfx solution you often have to update your cdnBasePath in the APP's write-manifest.json.

I do not understand how to define this path. Is this a reference to a specific site's Site Assets library or do I have to format the URL in some way that references the CDN that is not specific to any one site?

Am I supposed to use a wildcard and reference one of the origins I have defined?

Thank you everyone. I am eager to understand and I thank you for your willingness to contribute.

  • You can Setup New Office 365 CDN in your tenant wherever you want to deploy your assets. Check this for more information. – Ganesh Sanap Mar 4 '20 at 9:35

You mentioned that you are new to SPFx and O365 CDN, so I will assume that you are not very familiar with the current capabilities offered - apologies if this is not the case

When using O365 CDN public CDN, you do not have to set any additional origins for your web parts, neither do you need to set the cdnBasePath on your project. When you enable the O365 public CDN, it will add by default a path (clientsideassets) that will be used by all the web parts deployed to the App Catalog. You don't need to set this CDN on your project, everything is handled behind the scenes by SharePoint. Instead of loading your web part from the clientsideassets library on the app catalog, it automatically detects that CDN is enabled and loads the solutions from there instead.

You only need to add new CDN origins and define them in your project if you want custom locations to be used instead.

Hope this helps

  • Thank you Joel -- Ok that does clear thing up a bit. In my efforts and my limited experience with an assortment of spfx webparts from [link]github.com/SharePoint/sp-dev-fx-webparts there were some readme files that indicate that you must modify the package-solution.json file (in the config folder of every project I have used so far) to define either true or false for the ""includeClientSideAssets": value. *I assume this is how you would allow the application to use the default path you referenced. (Continued in next comment due to character limit)... – Lord Bayne Mar 4 '20 at 18:33
  • (continued from previous comment)... If that line is missing in that .json file and I intend to leverage the public cdn without using a custom location, do I simply add it as: "includeClientSideAssets": true, then modify the corresponding "cdnBasePath": in the write-manifest to be an empty value (ie. "cdnBasePath": " ")? – Lord Bayne Mar 4 '20 at 18:33

You can setup a new Office 365 CDN in your tenant wherever you want to deploy your assets. Follow below steps to setup and get the path you want to set to cdnBasePath:

  1. Open a SharePoint site which you want to add as a CDN Origin.

    Example: https://[tenant].sharepoint.com/sites/[site-collection-name]

  2. Create a document library (Example: you named it as CDN).
  3. Run below command in SharePoint Online Management Shell Add-SPOTenantCdnOrigin -CdnType Public -OriginUrl sites/[site-collection-name]/[document-library]

    The Origin URL is a relative URL. New CDN origin configuration will again take 15 to 20 minutes.

  4. Run Get-SPOTenantCdnOrigins to check the status. It should show your newly added CDN library in the list.
  5. Create a folder in document library preferably with the name of SPFx web part (Example: O365CDNDeploy)
  6. 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]
  7. Set this path as a cdnBasePath in your write-manifest.json file.
  • First: Thank you for jumping in to help. I very much appreciate it. I do have a few questions however: – Lord Bayne Mar 4 '20 at 14:26
  • Welcome. If you have any questions related to the same question then you can ask here in comments. Or if you have any other questions not related to this then you can Ask new question. – Ganesh Sanap Mar 4 '20 at 14:54
  • Sorry I had to tend to something else. Here are my questions. 1) If the SPFx webpart will be deployed in more than one site (all sites in my case) how do you determine what sharepoint site you should select in step one? 2) When you create a document library in this site do you need to ensure that the same document library exists in all the sites in which you want the deployed webpart to function? 3) When defining origins should I use wildcards like the default origins (ie. */MASTERPAGE) or be specific to site collection and folder...or does this depend on the scenario. – Lord Bayne Mar 4 '20 at 16:31
  • Also, in step 6 of your original response you say to "get the path of the CDN type below the URL in the browser" - I confess to being confused as to your meaning here. Are you saying to put my version of the example you provided (https://[tenant].sharepoint.com/...) in the address bar of my browser and resolve the address to be presented with a page that is blank except for a resulting URL in quotes? PS - How do I create a line break in my posts here? – Lord Bayne Mar 4 '20 at 16:46
  • Yes, check the updated answer. The public CDN URL will be based on the site/library/folder name you are using to deploy your assets. Bu the format of the CDN URL will be similar as given in step 6. – Ganesh Sanap Mar 11 '20 at 6:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.