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 the solution gallery. it is visible now.
You may like the following SPFx tutorials:
- SPFx Application Customizer Example – An Analog Clock with React
- Setup SharePoint Framework (SPFx) development environment in Windows 10 workstation
- 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.
Rajkiran is currently working as a SharePoint Consultant in India . 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).