Sunday, August 26, 2018

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.