In this tutorial, we will discuss how to create a hello world webpart in SharePoint using SPFx (SharePoint Framework).
As we know currently most of the companies are expecting their solution should be developed in SharePoint Framework as this is new features that are provided By Microsoft and it’s very reliable to use.
We can use this feature only in the modern site collection and the main good feature is, we can use this in both SharePoint on-premise and SharePoint Online environments.
Step 1: Install Node.js on your computer. You can download the latest version from http://nodejs.org/
Step 2: After installation, you can search the Node.js Command prompt to set up your solution. We can also use Window Powershell to set up the solution.
Step 3: Before going to start, Here I have created a solution folder inside G -Drive and the solution name, I gave as SPFX Project.
Next, I have to create a Web Part under this solution, So I have to open this solution in command prompt by using the command mention below.
Command to go desired folder location:
Command to Create a Solution Name and go to desired folder location
Step 4: Next Create a new Hello-World web part by running the Yeoman SharePoint Generator. Below is the command which we have to run.
Before running this command we have to go the desired location and type this command and click on the Enter key.
Step 5: Once you click on enter, this command will take some time to execute and after that, it will ask you a few questions to provide the answer.
Step 6: After some time, it will show a message in the command prompt, your solution is created. Please look into the below screenshot.
Step 7: Now your solution is fully ready to use. You can verify your web part is created or not inside your folder which you provided here.
Step 8: Now our Web Part is ready so we will use gulp serve command to execute the Web Part. But remember, before use gulp serve command we can run once gulp trust-dev-cert to trust the certificate.
Step 9: Now you can run the gulp serve command to execute the code. Here it will create an auto-generated localhost URL to see your Web part.
Step 10: Once the execution will be done, automatically the localhost URL will open in your browser. So now you have to click on + Icon and add your Web part inside the page.
Step 11: Now you can use the same Web part in your SharePoint site. Please look into the below screenshot where I used this Web part in my SharePoint Online site.
Step 12: You can Press on the control+c key to stop the gulp serve execution.
You may like the following SPFx tutorials:
- SPFx Application Customizer Example – An Analog Clock with React
- Setup SharePoint Framework (SPFx) development environment in Windows 10 workstation
- How to create a New SPFx Web part in an existing project in SharePoint
- How to get user details using Microsoft Graph API in SPFx
- How to Send Email with Attachments using Graph API in SPFx (React JS)
- How to use office UI fabric react groupedlist in SPFx web part
- Error TS2307 Cannot find module @pnp/sp/presets/all in SPFx
- SPFx – Bind dropdown list from SharePoint list using PnP
This is all about setting up your SPFX in your development Machine along with creating a hello world web part using SPFX (SharePoint Framework).
Rajkiran is currently working as a SharePoint Consultant in India . Rajkiran having 7+ years of experience in Microsoft Technologies such as SharePoint 2019/2016/2013/2010, MOSS 2007,WSS 3.0, Migration, Asp.Net, C#.Net, Sql Server, Ajax, jQuery etc.He is C#Corner MVP (2 Times).