SOLVED
Home

How do we deploy SPFx Web Parts to a Private CDN on O365?

%3CLINGO-SUB%20id%3D%22lingo-sub-69362%22%20slang%3D%22en-US%22%3EHow%20do%20we%20deploy%20SPFx%20Web%20Parts%20to%20a%20Private%20CDN%20on%20O365%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-69362%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F5720%22%20target%3D%22_blank%22%3E%40Vesa%20Juvonen%3C%2FA%3E%2C%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThere's%20plenty%20of%20documentation%20showing%20how%20the%20Public%20CDN%20works%20with%20SPFx%20web%20parts%2C%20but%20very%20little%20(or%20no)%20discussion%20of%20how%20the%20Private%20CDN%20would%20work%20for%20hosting%20the%20web%20part%20javascript%20files.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20verified%20that%20the%20Private%20CDN%20works%20with%20my%20static%20assets%20(for%20example%2C%20.jpg%20files%3B%20see%20the%20%22%3CA%20title%3D%22Getting%20the%20Office%20365%20Private%20CDN%20to%20work%22%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2FSharePoint-Developer%2FGetting-the-Office-365-Private-CDN-to-work%2Fm-p%2F64130%23M2155%22%20target%3D%22_blank%22%3EGetting%20the%20Office%20365%20Private%20CDN%20to%20work%3C%2FA%3E%22%20thread)%2C%20but%20using%20it%20for%20the%20web%20part%20files%20is%20apparently%20not%20so%20straight-forward.%20I%20followed%20the%20same%20instructions%20that%20are%20published%20for%20the%20Public%20CDN%2C%20but%20substituted%20the%20private%20URL%20in%20the%20cdnBasePath%20property%20in%20the%20Write-Manifests.json%20file%20like%20so%3A%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20974px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F14488iF2435B00684FD9A7%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22private_cdn_7.JPG%22%20title%3D%22private_cdn_7.JPG%22%20%2F%3E%3CSPAN%20class%3D%22lia-inline-image-caption%22%20onclick%3D%22event.preventDefault()%3B%22%3EModified%20cdnBasePath%3C%2FSPAN%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3EAll%20the%20other%20steps%20worked%20as%20expected.%20Everything%20went%20smoothly%20until%20I%20actually%20tried%20to%20run%20the%20thing.%20Placing%20an%20instance%20of%20the%20web%20part%20on%20a%20publishing%20page%2C%20the%20end%20result%20was%20this%3A%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20887px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F14489i48503B4B3FA9D6C0%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22private_cdn_8.JPG%22%20title%3D%22private_cdn_8.JPG%22%20%2F%3E%3CSPAN%20class%3D%22lia-inline-image-caption%22%20onclick%3D%22event.preventDefault()%3B%22%3ERun-time%20error%20from%20Web%20Part%20on%20the%20page%3C%2FSPAN%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3EThe%20web%20part%20is%20positively%20*singing*%20when%20I%20run%20it%20in%20the%20workbench%20(both%20local%20and%20in%20my%20dev%20site).%20Actually%20on%20a%20page%2C%20not%20so%20much.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSTRONG%3EWhat%20do%20we%20need%20to%20do%20*differently*%20when%20deploying%20SPFx%20Web%20Parts%20to%20a%20%3CEM%3EPrivate%3C%2FEM%3E%20CDN%3F%3C%2FSTRONG%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThanks.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-70532%22%20slang%3D%22en-US%22%3ERe%3A%20How%20do%20we%20deploy%20SPFx%20Web%20Parts%20to%20a%20Private%20CDN%20on%20O365%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-70532%22%20slang%3D%22en-US%22%3E%3CP%3EThat%20is%20excellent%20information%2C%20thank%20you%20so%20much.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26gt%3B%26gt%3B%3CEM%3EClient-side%20web%20part%20JS%20files%20only%20contain%20JS%20script%20-%20not%20secrets%20or%20actual%20information%2C%20so%26nbsp%3Bthere%20should%20not%20be%20any%20concerns%20from%20that%20perspective%20around%20hosting%20them%20from%20public%20CDN%3C%2FEM%3E%26lt%3B%26lt%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20will%20try%20to%20convince%20my%20client%20of%20this%20%3B)%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26gt%3B%26gt%3B%3CSPAN%3E%3CEM%3EIf%20you%26nbsp%3Bstill%20would%20like%20to%20get%20them%20hosted%20from%26nbsp%3Bfully%20secured%20URL%2C%20you'd%20use%20simply%20directly%20for%20example%20library%20in%20SharePoint%20without%20any%20CDN%20capabilities%3C%2FEM%3E%20%3C%2FSPAN%3E%26lt%3B%26lt%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EYes%20thanks!%20I%20actually%20got%20this%20working%20yesterday.%20%26nbsp%3BI%20set%20the%20cdnbasepath%20value%20to%20a%20server-relative%20path%20of%20the%20library%20where%20the%20bundled%20JS%20and%20JSON%20files%20are%20and%20it%20worked%20perfectly.%20%26nbsp%3BMy%20only%20concern%20was%20whether%20the%20performance%20would%20be%20adequate%2C%20but%20so%20far%20it%20looks%20good.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26gt%3B%26gt%3B%3CEM%3EHopefully%20that%20clarifies%20the%20situation.%3C%2FEM%3E%26lt%3B%26lt%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EIt%20does%20indeed.%20%26nbsp%3BThanks%20again!%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-70256%22%20slang%3D%22en-US%22%3ERe%3A%20How%20do%20we%20deploy%20SPFx%20Web%20Parts%20to%20a%20Private%20CDN%20on%20O365%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-70256%22%20slang%3D%22en-US%22%3E%3CP%3EYou%20cannot%20deploy%20SPFx%20solutions%20using%20private%20CDN%20at%20least%20currently.%20This%20is%20due%26nbsp%3Bthe%20fact%20that%20the%20private%20CDN%20URL%20is%20changing%20and%20is%20not%20static%2C%20which%20is%20needed%2C%20so%20that%20you%20can%20define%20web%20part%20host%20URL%20in%20the%20web%20part%20manifest.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EFew%20pointers%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CUL%3E%0A%3CLI%3EClient-side%20web%20part%20JS%20files%20only%20contain%20JS%20script%20-%20not%20secrets%20or%20actual%20information%2C%20so%26nbsp%3Bthere%20should%20not%20be%20any%20concerns%20from%20that%20perspective%20around%20hosting%20them%20from%20public%20CDN%3C%2FLI%3E%0A%3CLI%3EIf%20you%26nbsp%3Bstill%20would%20like%20to%20get%20them%20hosted%20from%26nbsp%3Bfully%20secured%20URL%2C%20you'd%20use%20simply%20directly%20for%20example%20library%20in%20SharePoint%20without%20any%20CDN%20capabilities%20and%20you'd%20update%20the%20manifest%20URLs%20to%20point%20to%20that%20one%3C%2FLI%3E%0A%3C%2FUL%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EHopefully%20that%20clarifies%20the%20situation.%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-70243%22%20slang%3D%22en-US%22%3ERe%3A%20How%20do%20we%20deploy%20SPFx%20Web%20Parts%20to%20a%20Private%20CDN%20on%20O365%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-70243%22%20slang%3D%22en-US%22%3E%3CP%3EI'm%20also%20interested%20in%20an%20answer%20to%20that%2C%20%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F121%22%20target%3D%22_blank%22%3E%40Waldek%20Mastykarz%3C%2FA%3E%20%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F369%22%20target%3D%22_blank%22%3E%40Vesa%20Juvonen%3C%2FA%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-70144%22%20slang%3D%22en-US%22%3ERe%3A%20How%20do%20we%20deploy%20SPFx%20Web%20Parts%20to%20a%20Private%20CDN%20on%20O365%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-70144%22%20slang%3D%22en-US%22%3E%3CP%3ETried%20a%20different%20approach%2C%20setting%20the%20cdnbasepath%20to%20a%20relative%20URL%20that%20points%20to%20the%20private%20origin%20folder.%20%26nbsp%3BThe%20web%20part%20now%20shows%20up%20and%20operates%20as%20expected%2C%20but%20inspection%20with%20an%20F12%20in%20the%20browser%20shows%20that%20the%20web%20part%20is%20coming%20directly%20from%20the%20SPO%20document%20library%20and%20not%20from%20the%20CDN.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EIs%20it%20possible%20to%20have%20a%20definitive%20answer%20about%20whether%20this%20will%20work%20or%20not%3F%20%26nbsp%3BCan%20we%20host%20SPFx%20web%20part%20files%20in%20a%20PRIVATE%20CDN%3F%20%26nbsp%3BIs%20it%20something%20that%20is%20coming%3F%20Or%20is%20it%20never%20intended%20to%20work%20this%20way%2C%20with%20the%20expectation%20that%20all%20SPFx%20web%20parts%20will%20use%20a%20PUBLIC%20CDN%3F%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThe%20direction%20of%20my%20development%20on%20this%20current%20project%20depends%20on%20the%20answer.%20%26nbsp%3BHelp%20me%20Vesa-wan%20Kenobi%2C%20you're%20my%20only%20hope!%3C%2FP%3E%3C%2FLINGO-BODY%3E
Joseph Ackerman
Contributor

@Vesa Juvonen,

 

There's plenty of documentation showing how the Public CDN works with SPFx web parts, but very little (or no) discussion of how the Private CDN would work for hosting the web part javascript files.

 

I verified that the Private CDN works with my static assets (for example, .jpg files; see the "Getting the Office 365 Private CDN to work" thread), but using it for the web part files is apparently not so straight-forward. I followed the same instructions that are published for the Public CDN, but substituted the private URL in the cdnBasePath property in the Write-Manifests.json file like so:

 

private_cdn_7.JPGModified cdnBasePath

All the other steps worked as expected. Everything went smoothly until I actually tried to run the thing. Placing an instance of the web part on a publishing page, the end result was this:

 

private_cdn_8.JPGRun-time error from Web Part on the page

The web part is positively *singing* when I run it in the workbench (both local and in my dev site). Actually on a page, not so much.

 

What do we need to do *differently* when deploying SPFx Web Parts to a Private CDN?

 

Thanks.

4 Replies

Tried a different approach, setting the cdnbasepath to a relative URL that points to the private origin folder.  The web part now shows up and operates as expected, but inspection with an F12 in the browser shows that the web part is coming directly from the SPO document library and not from the CDN.

 

Is it possible to have a definitive answer about whether this will work or not?  Can we host SPFx web part files in a PRIVATE CDN?  Is it something that is coming? Or is it never intended to work this way, with the expectation that all SPFx web parts will use a PUBLIC CDN?

 

The direction of my development on this current project depends on the answer.  Help me Vesa-wan Kenobi, you're my only hope!

I'm also interested in an answer to that, @Waldek Mastykarz @Vesa Juvonen

Solution

You cannot deploy SPFx solutions using private CDN at least currently. This is due the fact that the private CDN URL is changing and is not static, which is needed, so that you can define web part host URL in the web part manifest.

 

Few pointers

 

  • Client-side web part JS files only contain JS script - not secrets or actual information, so there should not be any concerns from that perspective around hosting them from public CDN
  • If you still would like to get them hosted from fully secured URL, you'd use simply directly for example library in SharePoint without any CDN capabilities and you'd update the manifest URLs to point to that one

 

Hopefully that clarifies the situation. 

That is excellent information, thank you so much.

 

>>Client-side web part JS files only contain JS script - not secrets or actual information, so there should not be any concerns from that perspective around hosting them from public CDN<<

 

I will try to convince my client of this ;)

 

>>If you still would like to get them hosted from fully secured URL, you'd use simply directly for example library in SharePoint without any CDN capabilities <<

 

Yes thanks! I actually got this working yesterday.  I set the cdnbasepath value to a server-relative path of the library where the bundled JS and JSON files are and it worked perfectly.  My only concern was whether the performance would be adequate, but so far it looks good.

 

>>Hopefully that clarifies the situation.<<

 

It does indeed.  Thanks again!

Related Conversations
Teams - Chat History
David Gorman in Microsoft Teams on
8 Replies
Remove MS shifts schedule from a Channel in MS Teams
John Crook in Microsoft Teams on
17 Replies
Move Channels between Teams
HerculesConsen in Microsoft Teams on
11 Replies
Auto-Add new employees
Mathias Koprek in Microsoft Teams on
14 Replies
Getting Started - Creating a team accross two tenants
bw-ipim in Microsoft Teams on
40 Replies