Deploy SharePoint Framework -SPFX WebPart with CDN

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 -Credential

##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 -Credential

##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 :

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

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.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s