How to create a New SPFx Web part in an existing project in SharePoint

Microsoft Teams

In this SPFx tutorial, I will show how to create a new webpart under an existing project in SharePoint using SPFx (SharePoint Framework).

In my previous article, I explained how to create a Hello-World web part using SPFx. So here in the same project, I am going to create a new Web part.

Create a New SPFx Web part in an existing project

Follow the below steps to achieve it.

Step 1: Go to start menu and search Node.js command prompt.

Step 2: Go to the desired location where your existing solution have. And type yo @microsoft/sharepoint and press enter key.

create a new SPFx Web part in an existing project
create solution for existing project spfx

Step 3: Once you press enter key, it will ask to provide your new web part name and description. Please look into the above screenshot.

Once the solution got created, it will give you a successful message.

add a new spfx web part into existing project sharepoint
create new spfx webpart

Step 4: Next you have run the gulp server command to execute this Web part.

add a new spfx web part into existing project sharepoint online
add new webpart in spfx solution

Step 5: Now you can able to see your new Web part in the localhost. Please look into the below screenshot.

My new Web part is created successfully.

How to create a New SPFx Web part in an existing project in SharePoint
spfx add web part to existing project

Step 6: You can also see the new web part in the solution gallery. it is visible now.

create a new SPFx Web part in an existing project
create spfx webpart

You may like the following SPFx tutorials:

The above steps will help you to create a new web part inside an existing project in SPFX.

>