As a beginner to SharePoint here’s how to create a first web part in SharePoint environment.
Web parts are the building blocks of the SharePoint pages and in the modern SharePoint, SPFx is the preferred way of development approach. Web parts can be added as text, image, file, Video, calendar, Links etc.
Before you create your first SharePoint framework web part make sure you have setup your development environment required for SPFx. Take a look at my previous article how to setup SharePoint Framework development environment for beginners
Steps to create a SPFx web part in SharePoint
Create a folder where you want to save the project using the command. Browse to the location use below command to create a separate folder
Change to the project directory using the below command.
Now create a web part by running the Yeoman SharePoint generator. It will help to create a sample hello-world SPFx webpart with the required files to build and deploy the web part.
Once your project is successfully created you will get below message in the console window.
Steps to test the SPFx webpart in localhost
We can preview and test the web part in localhost using the below command.
This command creates and start a local Webserver hosting the endpoints. It will automatically direct to the localhost:4321.
To add web part in localhost workbench, click + icon and select the webpart to preview.
To view the source code of the project, use the below command
Steps to test the SPFx webpart in SharePoint workbench
We can preview and test the web part in SharePoint hosted workbench using the below command.
Now, go to SharePoint workbench by using the below URL format,
To add web part in workbench, click + icon and select the web part to preview.
We have Successfully created our first web part in SharePoint Framework. I hope this article was helpful. Thank you for Reading!