Quick steps to build your SharePoint Framework SPFx Webpart

While working on the SharePoint Framework SPFx webpart, use below quick steps,

Steps I : SharePoint Web parts environment setup

  • Install NodeJS version compatible with your system
  • Run NodeJS or PowerShell command to check the npm version

Command: npm -v

  • Install Visual Studio Code
  • Install yo gulp

Command: npm install -g yo gulp

  • Install global Microsoft SharePoint generators – this will download the tooling, templates and needed dependencies for the machine

Command: npm install -g @microsoft/generator-sharepoint

Steps II : Create a sample Web Part

  • Create a folder for your project (say spfx)
  • Make that folder current folder for PS

Command: cd ~\spfx

  • Create a helloworld-webpart folder within that project folder

Command: md helloworld-webpart

  • Start using the helloworld-webpart folder for PS scripting

Command: cd helloworld-webpart

  • Run Command: yo @microsoft/sharepoint to enter the wizard and follow the scaffolding process to create a new web part project
  • Enter the values for the questions in the new project creation wizard
  • Select the JS framework as required
  • Install the developer certificate to the machine

Command: gulp trust-dev-cert

  • Run the default web part created

Command: gulp Serve

  • Test the web part on local SharePoint workbench
  • Press Ctrl+C and then press Y to terminate the execution
  • Run this command to create a deployment package

Command: gulp package-solution

Steps III: How to host the webpart on Azure CDN?

Below are the steps to follow for host the webpart on Azure CDN,

  • Create a resource group
  • Create a storage account in association with the resource group
  • Create a container in the storage account
  • Upload the files from deploy folder in your project to the container
  • Create a CDN Profile
  • Create CDN Endpoint
  • Update the deploy-azure-storage.json file with key values as per the above created objects

Steps IV : Deploy the webpart to the SharePoint Online,

  • Build to the ship mode, build minified assets ready to be deployed

Command: gulp –ship

  • Deploy the minified files to the azure storage

Command: gulp deploy-azure-storage

  • Update the cdnBasePath in the config folder write-manifests.json file with the values in the format of {EndPoint}/{Container} created in below steps of Repackaging the solution
  • Repackage the assets

Command: gulp bundle –ship

  • Repackage the solution

Command: gulp package-solution –ship

  • Go to the sharePoint folder and the .sppkg file created
  • Go to Apps for SharePoint link in the app catalog site of your SharePoint site and upload the .sppkg file
  • Go to SiteContents of your SharePoint app catalog site and add your app there
  • Add the new web part to your SharePoint page