Deploy SPFx client side web part through CDN

In this article, you will deploy the client side webpart to a SharePoint Library. SharePoint Framework build tools provide out-of-the-box support for deploying to an Azure Storage account, but this involved extra cost. Azure Storage account is the best practice to maintain our webpart.

Prerequisites

1. Setup SharePoint Tenant
2. Setup your machine
3. First Webpart

In this article I am showing how to deploy a client side web part in SharePoint Library.

Step 1: Create Webpart
Follow Link for webpart creation: https://sharedpointtips.blogspot.com/2017/04/sharepoint-framework-spfx-app.html

• Create a new Webpart, I named here “spfx-firstwebpart”
• md spfx-firstwebpart
• cd spfx-firstwebpart
• Create new Webpart yo @microsoft/sharepoint

It will create a new Webpart refer below screenshot

Build the Webpart gulp serve

Step 2: Create SharePoint Library

• Create a SharePoint Library “Myspfxwebparts” and give read permission to all users.

Step 3: Open code Visual Studio Code

• Open the code in Visual code tool.
• Type in cmd : code .

Step 4: Update the CDN Path

• We need to configure the CDN path, i.e SharePoint Library what we created. https://jenkinsblogs.sharepoint.com/sites/dev/Myspfxwebparts
• we have to configure our CDN path in write-manifests.json file. This file can be found in the config folder.
• i.e

{
  “cdnBasePath”: “https://jenkinsblogs.sharepoint.com/sites/dev/Myspfxwebparts”
}

• Save the file.
• Switch to cmd prompt

Step 5: Package and Deploy the webpart

• Generate the files to deploy in the SharePoint Library
  • gulp bundle –ship
  • Generated files can be found in spfx-firstwebpart\temp\deploy folder
  • upload the files in the SharePoint Library
    • https://jenkinsblogs.sharepoint.com/sites/dev/Myspfxwebparts
• Create a .spapp file for this webpart to upload in App Catalog
  • gulp package-solution –ship
  • Generated spapp file can be found in spfx-firstwebpart\sharepoint folder
  • upload the spapp file in App catalog
  • SharePoint will show you a popup and ask you to trust the client-side solution to deploy.
  • Click Deploy

Step 6: Install the App

• Open your SharePoint Site
• Go to “Add an App”
• Click “From Your Organization”
• Select and Click you app to install it.

Syep 7: Add the Webpart in your Page

• After App installation
• Go to your Page
• Edit the Page
• Click Insert tab and click Webpart
• Select Custom folder –> you can see your webpart, refer below screenshot

• Now you can add your webpart
  • Select the your webpart and Click Add
  • It will add your webpart