How To Create Your First SharePoint Client-Side Webpart

In this blog you will see how to create your first SharePoint client-side webpart.

SharePoint client-side web parts

Client-side web parts are client-side components built using HTML and JavaScript or using common scripting frameworks such as AngularJS and React. They can be deployed in both SharePoint Online as well as on-premise. They are the building blocks of pages that run inside the context of a SharePoint Page. For more details refer to Overview of SharePoint client-side web parts.

Prerequisites

Install Dev Tools, Yeoman, Gulp and Yeoman SharePoint generator.

Steps Involved

Install Dev Tools

Open command prompt.

Run the following console command to create a new project directory.

md MyClientSideWebpartDemo

Run the following console command to navigate to the newly created project directory.

cd MyClientSideWebpartDemo

Run the following console command to create a new HelloWorld web part.

yo @microsoft/sharepoint

 

Accept default values for all the questions by clicking Enter button.

 

This might take few minutes by Yeoman to install the required dependencies and scaffold the solution files. Once solution is created successfully you could see the following message.

 

Run the following console command to open the project files in Visual Studio Code.

code

You can see the below project structure.

 

Run the following console command to build and preview your webpart.

gulp serve 

SharePoint Workbench will be opened on localhost:4321 and you could test and preview your web part.

 Click on Add icon and then add HelloWorld webpart.
 

Summary

In this blog you have seen how to create your first SharePoint client-side webpart.

Ebook Download
View all
Learn
View all