In Focus

How To Get Multiple SPFx Web Parts In SharePoint Site

Your SPFx solution has a package-solution.json file in config with an attribute called version.

If you have deployed a .sppkg file on a site app catalog for the first time, and you are creating a new web part in the SPFx solution, but you are not able to get the newly-added web part while trying to add it to a SharePoint page, follow the below steps to get the newly added web part in the site.

This is version 1.0.0.0 by default with the solution creation, and the same version is presented in the app catalog after the deployment.

How To Get Multiple SPFx Web Parts In SharePoint Site

The below screenshot indicates an older version of the app, i.e., the first time the package file is deployed to the app catalog.

How To Get Multiple SPFx Web Parts In SharePoint Site

Change the version to 1.0.0.1 in package-solution.json file with the newly-added web part/web parts and build the solution by running the below commands.

  • npm bundle –ship
  • npm package-solution –ship

Now, deploy the latest .sppkg file in app catalog and you can see the latest version 1.0.0.1 mentioned in that catalog.

Go to the site contents where the web part app is installed and click "About".

How To Get Multiple SPFx Web Parts In SharePoint Site

Now, you will see the new version 1.0.0.1 and by clicking on "GET IT", it gets the latest version with new web part.

How To Get Multiple SPFx Web Parts In SharePoint Site

After this step, the latest version of the app will be installed in site contents. Now, go to the page where you want to add the new web part, find it, and click on the "Add" button.

How To Get Multiple SPFx Web Parts In SharePoint Site

Conclusion

 
That is it. We have added the new version of the app in the app catalog. I hope this will help you get the newly added web parts in the SPFx solution.