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.

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.

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

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.

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

You may like following SPFx tutorials:

• SPFx Application Customizer Example – An Analog Clock with React
• SharePoint framework Local Workbench is showing empty
• SPFx multiline textbox field rending as single line of text in SharePoint Online
• Setup SharePoint Framework (SPFx) development environment in Windows 10 workstation
• Use JavaScript Core Library with SharePoint Framework (Async or await and normal promises)
• Create SPFx webpart with React for SharePoint 2016 On-Premise
• How to get user details using Microsoft Graph API in SPFx
• How to create an app catalog site in SharePoint online
• How to Send Email with Attachments using Graph API in SPFx (React JS)
• How to use bootstrap in SPFx webpart

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