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 supports below,
- Both SharePoint online and on-premises environments.
Follow the below listed steps to build your first web part,
Open the Command prompt from your location on windows explorer.
Then write the below command on your cmd prompt to create new project and press enter
Next go to that project directory by using below command to create new web part and press enter to run the command
Then Run below command to create a new web part using yeoman SharePoint Generator, press enter to run
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
Using Visual code we can do the client side development
Open the Project using visual code,
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
Once you installed the developer certificate enter the following command in the console to build and preview the web part,
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.