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.