Setup, Build and Deploy SharePoint Framework(SPFx) WebPart To Office 365 Public CDN

Setup, Build and Deploy SharePoint Framework(SPFx) WebPart To Office 365 Public CDN

1. Set up your SharePoint Framework development environment for SPFx

 1.1. Install NodeJS

 1.2. Install code editor

 1.3. Install Yeoman and gulp

 1.4. Install Yeoman SharePoint generator

2. Build your first SharePoint Framework(SPFx) client-side web part

3. Configure CDN in Office 365 Tenant

4. Configure SPFx Solution for Office CDN - Update package details

 4.1 Update CDN Path
 4.2 Prepare the package
 4.3 Deploy App files to SharePoint CDN library
 4.4 Create App catalog Site and Deploy App into SharePoint.
 4.5 Deploy Package to SharePoint

1.1. Install NodeJS

https://code.visualstudio.com/download 

1.2. Install code editor

1.3. Install Yeoman and gulp

npm install -g yo gulp

1.4. Install Yeoman SharePoint generator

To install the SharePoint Framework Yeoman generator globally

npm install -g @microsoft/generator-sharepoint

2. Build your first SharePoint Framework(SPFx) client-side web part

md helloworld-webpart

cd helloworld-webpart

yo @microsoft/sharepoint

3. Configure CDN in Office 365 Tenant

Download and install the latest version of SharePoint Online Management Shell from https://www.microsoft.com/en-in/download/details.aspx?id=35588

Connect-SPOService -Url https://[tenant]-admin.sharepoint.com 

Connect-SPOService -Url  https://sreekanth01-admin.sharepoint.com/

Get-SPOTenantCdnEnabled -CdnType Public

Get-SPOTenantCdnOrigins -CdnType Public 

Get-SPOTenantCdnPolicies -CdnType Public

Set-SPOTenantCdnEnabled -CdnType Public

Get-SPOTenantCdnOrigins -CdnType Public

Create a document library and name it as “MyCDNLibrary” and Create folder called "MyCDNFolder”

Add-SPOTenantCdnOrigin -CdnType Public -OriginUrl /sites/developer/MyCDNLibrary

Get-SPOTenantCdnOrigins -CdnType Public

Wait for 15-20 to reflect changes.

This is CDN folder url:

https://sreekanth01.sharepoint.com/_vti_bin/publiccdn.ashx/url?itemurl=https://sreekanth01.sharepoint.com/sites/developer/MyCDNLibrary/MyCDNFolder

4. Configure SPFx Solution for Office CDN - Update package details

4.1 Update CDN Path

Open the code in Visual Studio Code editor.

Go to command prompt and type "code ." with out semicolon.

Go to "config => package-solution.json"

update "IncludeClientSideAssets" value as "false"

Go to "config" => write-manifests.json" and update "cdnBasePath" as below.

"https://sreekanth01.sharepoint.com/_vti_bin/publiccdn.ashx/url?itemurl=https://sreekanth01.sharepoint.com/sites/developer/MyCDNLibrary/MyCDNFolder"

4.2 Prepare the package

gulp bundle --ship  

4.3 Deploy App files to SharePoint CDN library

Copy file from "temp\deploy" to "MyCDNLibrary\MyCDNFolder"

From: "D:\helloworld-webpart\temp\deploy"

To: "https://sreekanth01.sharepoint.com/sites/developer/MyCDNLibrary/MyCDNFolder"

4.4 Create App catalog Site and Deploy App into SharePoint.

Create App catalog site to deploy App,

4.5 Deploy Package to SharePoint

gulp package-solution --ship

Upload "helloworld-webpart.sppkg" file to "Apps for SharePoint" library.

From: "D:\helloworld-webpart\sharepoint\solution"

To: "https://sreekanth01.sharepoint.com/sites/MyAppCatalog/AppCatalog"

Go to any site and add an app to install "helloworld-webpart.sppkg" app.

Go to any page and edit and add "HelloWorld" app part to page.

Done.