How deploy spfx solutions in Office CDN or Azure CDN
Local Hosting
created a folder
c:\A\SPFX\DeployOffice365CDNAzureCDN>
create a subfolder
DeployOffice365CDNAzureCDN\HostingThroughLocalServerDemo>
in code, if you observe package-solution.json, includeClientSideAssets: true by default.
It means, all our css,js files are part of the package that gets created as sppkg file.
gulp build
gulp bundle
using this we are bundling or minifying our javascript files. as soon as bundling happens, a new folder has created which named as temp.
observe in folder structure.
temp folder contains manifest ts file and json file.
Next step is we are doing package the solution using gulp package-solution
We should be getting a new folder called sharepoint.
it contains solution folder, inside sppkg file.
It contains one debug folder, which has all the raw files of sppkg file.
In order to test our webpart, we have gulp serve.
which is test the webpart in our local server.
now we can observe the gulp serve running at local host 4321 port.
Now try to upload the sppkg file to app catalog, deploy.
In prompt you observe
"The client side solution will get content from loading through-local-server-demo-client-side-solution from following domain:
https://localhost:4321/
Deploy and Cancel button"
That is because, gulp serve running behind the scenes cmd prompt.
When we are trying to deploy in appcatalog, The spfx solution will use the client side assets with the help of local server that is running on the port number 4321.
Note: Hence client side assets are hosted from local server. So it is running through port 4321 which is running locally by using gulp serve.
SharePoint Hosting
Hosting on Sharepoint
gulp bundle --ship
It creates a temp folder, in which contains manifest json and ts file.
also contains deploy folder.
app guid json file and other 2 ts files.
open app guid json file, you see loaderConfig property has entryModuleId as your webpart name,
internalModuleBaseUrls:["https://localhost:4321"]
it is still local host.
now try
gulp package-solution --ship
This create sharepoint folder and solution folder inside sharepoint folder.
debug folder contains raw files.
This clearly helps all the client side assets are now inside sppkg file itself.
Now try to deploy the sppkg file in app catalog, prompt shows as "SharePoint Online".
Click on Deploy.
notice that client side assets are hosted in SharePoint online now.
Hosting client side assets Using Office 365 CDN
We need to install few
1. Sharepoint online management shell
download it.
https://www.microsoft.com/en-in/download/details.aspx?id=35588
Note: If it might already available in your machine once check it.
Open the SharePoint Online management shell using run as administrator
2. run below
Connect-SPOService -Url <sharepoint admin site url>
Connect-SPOService -Url https://mercedessaga-admin.sharepoint.com
it asks prompt to enter credentials.
This instance is now connected with SharePoint tenant.
3.Enable the CDN for you sharepont online tenant.
Set-SPOTenantCdnEnabled -CdnType Public
It asks prompt press yes and enter.
We can observe the below statement in cmd prompt
Public CDN enabled locations:
*/MASTERPAGE (configuration pending)
*/STYLE LIBRARY (configuration pending)
*/CLIENTSIDEASSETS (configuration pending)
4. To know whether CDN has enabled to this tenant or not, we can check it.
Get-SPOTenantCdnEnabled -CdnType Public
it returns true means then it is enabled.
5. We can check what all different origns has enabled.
Get-SPOTenantCdnOrigins -CdnType Public
it shows some locations where the CDN has enabled.
5. Which CDN policies are currently enabled to you
GET-SPOTenantCdnPolicies -CdnType Public
it shows different file extenstions like jpg, png, map, png, svg, ttf etc...
Now Open you cmd prompt.
try running.
cls
gulp build again
gulp bundle --ship
gulp package-solution --ship
now observe package-solution.json, includeClientsideAssets: true
now sppkge file, upload to app catalog.
Prompt shows SharePoint Online as like previous.
Its meaning is, client side assets are from SharePoint online or it can be office 365cdn.
Now client side assets are getting from the publich cdn of o365.
but where exactly we can prove that client side assets are comming from O365 cdn?
Press F12 in browser of the webpart in sharepoint page,
expand publiccdnsharepointonline.com
you can see folder with main js file. it represents client side assets are served from CDN.
---
Hosting client side assets in SiteAssets
SharePoint site, open site assets, create a folder named "HelloWorldWebpartCDN"
Run below cmd
New-SPOPublicCdnOrigin -Url https://mercedessaga.sharepoint.com/sites/teja_dev/SiteAssets/HelloWorldWebpartCDN
execute at sp online management shell.
Now run
Get-SPOPublicCdnOrigins | Format-List
it gives you Id: and Url:
important thing here is Id. We need to copy the Id and past it to note pad.
formate the new url now.
https://publiccnd.sharepointonline.com/ercedessaga.sharepoint.com/<long Id from above>
This complete URL copy it and past it in config folder->write-manifests.json, there is a property called cdnBasePath:"<!-Path to CDN->"
paste your new url here in cdnBasePath
This means, We are representing that all the client side assets are picked up from this folder.
(SiteAssets)
Now put some image files in your siteassets/HelloWorldWebpartCDN folder.
now try create a new webpart, with all the steps
gulp bundle --ship
gulp package-solution --ship
once things are done,
in code folders, you will see temp folder under which deploy folder contains app id json file, 2 other js files. Copy drag it to your site assets/helloworldwebpartcdn folder.
Now we are good to go..
Upload our sppkg file to appcatalog.
this time, prompt shows as
client side assets are from
https://publiccnd.sharepointonline.com/ercedessaga.sharepoint.com/<long Id from above>
which nothing but, from site assets/helloworldwebpartcdn folder.
add webpart to site page.
press f12.
under publichcdn.sharepointonline.com folder expand
you can see that client side assets are pointing to https://publiccnd.sharepointonline.com/ercedessaga.sharepoint.com/<long Id from above>
which nothing but, from site assets/helloworldwebpartcdn folder.
Hence by this siteassets depolyment, client side assets are coming from sharepoint site tenant itself.
Comments
Post a Comment