How to Add Multiple WebParts To Single SPFx Solution?

As SPFx developers, we might be confused about whether we should have a separate solution per SPFx web part or add multiple SPFx web parts to a single solution.

In this article, I will explain when we should add multiple web parts to a single solution and when we shouldn’t, and I will also discuss how to add multiple web parts to a single SPFx solution.

When to Add Multiple Web Parts to a Single SPFx Solution

We can use one SPFx solution to add multiple web parts if they are created for the same purpose or part of the same module. This keeps everything in one package and makes it easier to manage. Some of the other reasons are below:

• Shared Code = Webparts can reuse the same data or components.
• Simpler deployment = You can deploy all web parts together at once.
• Easier maintenance = It’s easier to update and manage related features in one place.

The advantage is that creating a new SPFx solution using Yeoman takes a lot of time, usually 10 to 15 minutes. But if you add a new webpart to an existing SPFx solution, it is much faster.

Disadvantages are:

• You can’t deploy just one webpart without the others.
• An error in one web part might affect the whole solution during updates.

Single Webpart solutions

Below are the scenarios where you can use a single web part solution in SPFx.

• When each web part is for a different purpose.
• If web parts are used on specific sites or tenants.
• When each webpart has unique permissions.
• If you want to deploy or update each web part independently.

Add Multiple WebParts To a Single SPFx Solution Using Yeoman

In SPFx, the Yeoman generator helps to create a client-side solution project with the right toolchain and project structure. It also asks questions about creating the project scaffolding (files and folders).

First, we create a single webpart solution, then we add the remaining webparts to this solution.

Follow the steps below to create a client-side webpart using Yeoman generator.

1. Open the command prompt, navigate to the directory where you want to create the SPFx solution.

cd SPFxWebpartsDemo

2. Type yo @microsoft/sharepoint and press Enter.
3. Then, it will ask a few questions to create the solution, so answer the following questions.
   • ? What is your solution name? MultipleWebparts
   • ? Which type of client-side component to create? WebPart
   • Add new Web part to solution multiple-webparts.
   • ? What is your Web part name? CompanyNewsFeedWebPart
   • ? Which template would you like to use? No framework

4. After some time, it will create the spfx solution for us and display the successful message like this!

5. Now, run the below command to open the SPFx solution using Visual Studio Code.

Code .

Once you open the solution, you can see a web part like the one below, Expand, src -> webparts.

Now, if you run the gulp serve command, you can see that only one webpart will be there in the solution.

Add Another Web Part to an Existing SPFx Solution

To add another web part to the existing SPFx solution, rerun the following command at the command prompt from the same folder.

yo @microsoft/sharepoint

• Then it will ask Which type of client-side component to create? Choose WebPart and click on Enter.
• ? What is your Web part name? LatestAnnouncementsWebPart
• ? Which template would you like to use? No framework

Then you can see a successful message like below:

Now, when you open the solution folder, you will be able to see both the web parts, as shown below:

Expand the src folder, and you will see a web parts folder. Within that, you can see CompanyNewsFeedWebPart and LatestAnnouncementsWebPart in two subfolders.

Now, again run the gulp serve command, and when you click on the + icon to add web parts, you can see this time two web parts like below:

So in this way, you can add as many web parts as you want to a single Sharepoint Framework solution. I added one more webpart to the same solution by following the above steps. Here is the workbench testing image, which shows three web parts at a time.

You can click to add the three web parts to the web part page.

The steps are the same if you want to deploy the solution: Create the package and upload it to the app catalog site.

gulp bundle --ship

gulp package-solution --ship

This will create the .sppkg file, which you can upload to the app catalog site.

I hope you found this article helpful! Here, I have explained how to add multiple web parts to a single spfx solution by taking examples.

You may like the following SPFx tutorials:

• Retrieve SharePoint list items using SharePoint framework (SPFx)
• office-ui-fabric-react combobox example in SharePoint Framework (SPFx)
• SharePoint Framework CRUD Operations using React
• error TS1192: Module has no default export
• SharePoint framework crud operations no javascript framework
• @microsoft/generator-sharepoint update check failed