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.

Steps

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

Step 1

Open the Command prompt from your location on windows explorer.

SharePoint

Step 2

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

md helloworldSample-webpart

SharePoint

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

SharePoint

Step 4

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

yo @microsoft/sharepoint

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

    SharePoint

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

SharePoint

Step 5

Using Visual code we can do the client side development

Open the Project using visual code,

SharePoint

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

SharePoint

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

gulp serve

SharePoint

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

SharePoint

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

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

SharePoint

Summary

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.