How to add new webpart in the existing SPFx solution

To add a webpart in the existing new SPFx solution will help developer to share some common stuff across webparts and it is very easy to add. Run yo command in the existing SPFx solution and choose solution type and framework as per your need,

yo @microsoft/sharepoint

This will add webpart to the existing SPFx solution and it updates config/config.json in bundles and localizedResources property value. Also update the version number in config/package-solution.json file. package the solution and deploy to app catalog.

gulp clean 
gulp build 
gulp bundle --ship 
gulp package-solution --ship

App version has been update in App Catalog but its not update in our SharePoint site yet where we using the app. To update that we can use below PNP powershell script referred from MS docs

Update-PnPApp
-Identity <AppMetadataPipeBind>
[-Scope <AppCatalogScope>]
[-Connection <SPOnlineConnection>]

Now we can add our newly added webpart in the existing SPFx solution in our SharePoint page.

Happy Coding

Fazil