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,
- Building with HTML and JavaScript.
- 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
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.