Create New SharePoint Client Side Web Part (SPFx)

What is SPFx?

  • SPFx was introduced in SharePoint 2016, it is one of the new feature in SharePoint
  • SharePoint app model development is used before SPFx, it was introduced in SP 2013
  • SharePoint apps client web parts are loaded inside the IFrame so it takes some time to load but SPFx is not like that, it is very fast.
  • We can use the SPFx in SharePoint pages and SharePoint Modern site pages. In a previous Article we saw how to create modern site page and how to add the web part inside the modern site pages.
  • Client-side web parts are client-side components that run inside the context of a SharePoint page.
  • Client-side web parts can be deployed to SharePoint Online, and you can also use modern JavaScript tools and libraries to build them.

Client-side web parts supports below,

  1. Building with HTML and JavaScript.
  2. Both SharePoint online and on-premises environments.


Follow the below listed steps to build your first web part,

Step 1

Open the Command prompt from your location on windows explorer.


Step 2

Then write the below command on your cmd prompt to create new project and press enter

md helloworldSample-webpart


Step 3

Next go to that project directory by using below command to create new web part and press enter to run the command

cd helloworldSample-webpart


Step 4

Then Run below command to create a new web part using yeoman SharePoint Generator, press enter to run  

yo @microsoft/sharepoint


Step 4

Then next set of prompts will ask the specific below information about our web part, then press enter

  • Solution Name – Provide your web part name as your requirement
  • Where do you want to place the files? I selected the current folder
  • What framework would like to start with? – I selected React template for my web part
  • What is your web part name? Provide name for your web part (HelloworldSample)
  • What is your web part description? Provide description of your webpart


Once you provide all the information yeoman will install required dependencies and scaffold the solution files along with the HelloWorldSample web part


Step 5

Using Visual code we can do the client side development

Open the Project using visual code,


Step 6

Then run the below command to preview your web part, build and run it on a local web server.

To install the developer certificate for use with SPFx development, switch to your console, make sure you are still in the

gulp trust-dev-cert


Once you installed the developer certificate enter the following command in the console to build and preview the web part,

gulp serve


Finally you can see the web part in local host itself, Press + (add) button to add the hello world sample web part


Using SharePoint work bench URL we can see the preview of client side webpart

URL for workbench: ../sites/dev/_layouts/15/workbench.aspx



In this article we have explored how to create new client side web part with react template. In the next article I will share how to take a build for client side web part.