Categories:

How to create SharePoint Framework web part as a beginner

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

Step 1:

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

Step 2:

Change to the project directory using the below command.

Step 3:

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

Step 1:

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.

Step 2:

To add web part in localhost workbench, click + icon and select the webpart to preview.

Step 3:

To view the source code of the project, use the below command

Use any Code editor to view and edit the source code of the project. I use Visual Studio code editor because it comes with built-in support for JavaScript and Typescript.

Steps to test the SPFx webpart in SharePoint workbench

Step 1:

We can preview and test the web part in SharePoint hosted workbench using the below command.

Step 2:

Now, go to SharePoint workbench by using the below URL format,

https://{YOURSITEURL}/_layouts/15/workbench.aspx

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!

Sharing is Caring!

Leave a Reply

Your email address will not be published. Required fields are marked *