How to create new Web Part to an existing in SPFx Project

Total visits : 1483

In this article, I am showing How to create new Web Part to an existing  in SharePoint Framework Project.

When Creating a new SPFx project using the SharePoint Yeoman generator you can add a new Web Part, Always everyone prefer same project with multiple web parts.

Step 1: Create new folder

  • Go to run –> cmd and change folder to where you want to create a  new project
  • Create new folder md spfx-multiplewebparts
  • change to new folder cd spfx-multiplewebparts

Step 2: Create new solution with first webpart

  • type yo @microsoft/sharepoint and enter
  • It will create a new SharePoint Framework Solution
  • give the first webpart name “firstwebpart”

multiple1

  • First Web part Created using SharePoint Yeoman Generator
  • Go to code . and view the first web part, see below screenshot

multiple2

Step 3: Add new webpart in the existing Solution

  • Switch back to command prompt
  • type yo @microsoft/sharepoint and enter
  • it will create a new webpart in the solution

multiple3

  • go to visual code and see the second webpart

multiple4

Like wise we can easily add multiple web parts using SharePoint Yeoman generator

Step 4:Build the Webpart

  • type “gulp serve” to build the solution
  • Now you can see the Web Part Toolbox in the Workbench will show two Web Parts that you can add to the page.

multiple5

Add both webparts, you can get the output like below

multiple6

Likewise you can easily add a new Web Part by re-running the generator on the existing project.