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

SharePoint Framework – SPFx – New revolution to Client Side Webpart development to SharePoint Online O365 – Interview Questions

What is SharePoint Framework – SPFx?

The SharePoint Framework (SPFx) is a page and part model that enables client-side development for building SharePoint experiences. It facilitates easy integration with the SharePoint data, and provides support for open source tooling development.

Overview of SharePoint Framework

The SharePoint Framework (SPFx) is a page and web part model that provides full support for client-side SharePoint development, easy integration with SharePoint data, and support for open source tooling. With the SharePoint Framework, you can use modern web technologies and tools in your preferred development environment to build productive experiences and apps that are responsive and mobile-ready from day one. The SharePoint Framework works for SharePoint on-premises and SharePoint Online.

What is SharePoint client-side web parts?

SharePoint client-side web parts are controls that appear inside a SharePoint page but run locally in the browser. They’re the building blocks of pages that appear on a SharePoint site. You can build client-side web parts using modern script development tools and the SharePoint workbench (a development test surface), and you can deploy your client-side web parts to classic web part pages in Office 365 Developer tenants. In addition to plain JavaScript projects, you can build web parts alongside common scripting frameworks, such as AngularJS and React. For example, you can use React along with components from Office UI Fabric React to quickly create experiences based on the same components used in Office 365.

What are key feature of SharePoint Framework?

  • Runs in the context of the current user and connection in the browser. There are no iFrames.
  • The controls are rendered in the normal page DOM.
  • The controls are responsive and accessible by nature.
  • Enables the developer to access the lifecycle – including, in addition to render – load, serialize and deserialize, configuration changes, and more.
  • It’s framework agnostic. You can use any browser framework that you like: React, Handlebars, Knockout, Angular, and more.
  • The toolchain is based on common open source client development tools like npm, TypeScript, Yeoman, webpack, and gulp.
  • Performance is reliable.
  • End users can use SPFx client-side solutions that are approved by the tenant administrators (or their delegates) on all sites, including self-service team, group, or personal sites.
  • Solutions can be deployed in both classic web part and publishing pages and modern pages.

Why to use SharePoint Framework- SPFx?

SharePoint was launched as an on-premises product in 2001. Over time, a large developer community has extended and shaped it in many ways. For the most part, the developer community followed the same patterns and practices that the SharePoint product development team used, including web parts, SharePoint feature XML, and more. Many features were written in C#, compiled to DLLs, and deployed to the servers.

That solution worked well in environments with only one enterprise, but it didn’t scale to the cloud, where multiple tenants run side-by-side. As a result, we introduced two alternative models: client-side JavaScript injection, and SharePoint Add-ins. Both of these solutions have pros and cons.

How to Set up your SharePoint client-side web part development environment?

Step I: Environment Setup for Node.js web apps for Azure App Service

Step II: SharePoint related configurations

How Build a SharePoint Framework Webpart?

Steps by Step procedure to build your first SharePoint client-side web part (Hello World part 1)