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

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

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

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

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

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

create a new SPFx Web part in an existing project

You may like following SPFx tutorials:

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

Donwload Hub site pdf

Download SharePoint Online Tutorial PDF FREE!

Get update on Webinars, video tutorials, training courses etc.

Rajkiran Swain

Rajkiran is currently working as a SharePoint Consultant in QATAR . Rajkiran having 7+ years of experience in Microsoft Technologies such as SharePoint 2019/2016/2013/2010, MOSS 2007,WSS 3.0, Migration, Asp.Net, C#.Net, Sql Server, Ajax, jQuery etc.He is C#Corner MVP (2 Times).

>