This post will explain how to create a simple hello world client web part in Visual Studio Code.
First, Start Command Prompt and navigate to your projects folder.
- Type below commands in CMD and enter
Create the web part using Yeoman SharePoint Generator.
Select the default values, web part type, reactjs framework, SharePoint Online as shown in the below screenshot and enter.
It takes a while to create the solution for you, be little patient at this step.
You will see below Congratulations message once the client web part solution is created successfully.
Now, to build and test the web part in the local work bench,
- first, we need to install the developer certificate locally by executing below command
- When it prompts, click yes to install the certificate
- Second, execute the below command to run the series of gulp tasks
SharePoint Workbench helps us to test the client web parts without deploying them to SharePoint directly.
- finally, click on the + sign to add the web part to the page.
Open Visual Studio Code and open HelloWorldWebpart project to examine the project folder hierarchy.
So, we now know how to create the SPFx client web part and test it in SharePoint Online.
In the next post, I will discuss about playing with data in client web part and how to create a production ready client web part.