While working with SPFX solution I found that we need CDN address for script and other configuration files to make SPFX web part run independently on SharePoint Site.
We can create CDN on SharePoint Site using PowerShell Scripts. Below scripts includes steps to create CDN on SharePoint Site as well as Deployment of SPFX using CDN.
Steps to Create CDN [Content Delivery Networks] Location On SharePoint Site:
Use SharePoint Online Management PowerShell to run commands or get CDN details for SharePoint Online Site.
I have created Document Library “CustomCDNFiles” which will work as CDN address for files
##Login to SharePoint Online Site ##Make sute you select admin site . Note that url with admin site contains " -admin " Connect-SPOService -Url https://nileshspsolutions-admin.sharepoint.com -Credential nilesh@nileshspsolutions.onmicrosoft.com ##Get your current tenant configuration Get-SPOTenant | fl *cdn* ##Create Private CDN Add-SPOTenantCdnOrigin -CdnType Private -OriginUrl sites/Intranet/CustomCDNFiles ##Get Private CDN Value Get-SPOTenantCdnOrigins -CdnType Private
For demo purpose I have created Private CDN. You may also create Public CDN using below comands
##Login to SharePoint Online Site Connect-SPOService -Url https://nileshspsolutions-admin.sharepoint.com -Credential nilesh@nileshspsolutions.onmicrosoft.com ##Create Public CDN Add-SPOTenantCdnOrigin -CdnType Public -OriginUrl sites/Intranet/CustomCDNFiles ##Get Private CDN Value Get-SPOTenantCdnOrigins -CdnType Public
Above commands will set CDN location on SharePoint Site Location : https://nileshspsolutions.sharepoint.com/sites/Intranet/CustomCDNFiles
I will use this library to store files as CDN address files.
Now Next Task is to create SPFX WebPart. I have created SPFX Webpart and able to run this webpart using gulp serve command. To tun this webpart on SharePoint Site we need to also provices its configuration files on CDN so that it can access it.
Navigate to Config => write-manifests.json File in your SPFX WebPart Solution
Update “cdnBasePath” value using created CDN Value
Also note the location of deploy files from config => copy-assets.json
Here path deployCdnPath is the location where our SPFX files which needs to be migrtates avaiablei after deployment commands.
Above steps include configuration and deploypath location.Next turn is for actual deployment of SPFX
As we are deploying SPFX on Produciton or SharePoint Site we need to use below commnads to Ship SPFX.
SPFX Deployment Commands
gulp bundle --ship
gulp bundle –ship : This executes a release build of your project by using a dynamic label as the host URL for your assets. This URL is automatically updated based on your tenant CDN settings.
gulp package-solution --ship
package-solution –ship :. This creates an updated sp-design-test.sppkg package on the sharepoint/solution folder.
After solution ship commnad we need to transfer configration fille from deploypath which is “temp/deploy”.
Open your solution folder and Navigate to “temp/deploy” location
Copy all files from deploy Folder to CDN Library . In my case https://nileshspsolutions.sharepoint.com/sites/Intranet/CustomCDNFiles/Forms/AllItems.aspx
Copied to Library
Next Navigate to SharePoint => solution Fodder Where actual SPFX WebPart Package file
Upload sp-design-test.sppkg to your App Catalog and add it into your website
After Upload and added to Page SPFX will run without any dependency to gulp serve or local files.
Please note that I have added HTML design in my SPFX Webpart which is shown in an Image. In your case it may be normal SPFX webpart.
Nilesh Rathod 