Add Multiple WebParts To Single SPFx Solution Using Yeoman

Overview

Modern SharePoint supports custom development using SharePoint Framework (SPFx). SPFx is a page and web part model. It supports client-side SharePoint development. SPFx solutions are based on multiple components like Yeoman, Node JS, and Gulp. It supports development using TypeScript. Angular JS and React are obvious choices for developers when developing SPFx web parts.

Yeoman is a template generation engine in SPFx. The yeoman is responsible for the scaffolding of the solution. Node JS provides the platform to run Yeoman. The templates are downloaded from the GitHub repository.

In this article, we will see how we can add multiple SPFx web parts to a single solution.

SPFx Project generation using Yeoman

When we create a new SPFx solution using the Yeoman generator, it, by default, adds one SPFx web part to the solution.

Follow the step by step instructions from Microsoft to prepare your development environment (https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-development-environment).

1. Open Command Prompt.
2. Navigate to the directory where you need to set up the SPFx solution.
3. Type "yo @microsoft/sharepoint" and hit Enter.
4. Yeoman will present the wizard to help set up the SPFx solution.
   
5. Specify the solution name.
6. Specify the name of the SPFx web part (FirstSPFxWebPart in this case).
7. Yeoman will perform the scaffolding to generate the SPFx solution.
8. Type “code .” to open the SPFx solution in VS Code.
   

Our first SPFx web part is now ready. Type “gulp serve” on the command prompt to test it on the local workbench.

Add another SPFx WebPart to the solution

A general confusion among developers is should we have a separate solution per SPFx web part or can we add multiple SPFx web parts to a single solution. There are a couple of reasons why we can think of having multiple SPFx web parts in a single solution.

Reason 1. Save Scaffolding Time

Yeoman takes a very long time to scaffold the SPFx solution. The time taken can be around 10 to 15 minutes. Adding a new SPFx webpart to an existing SPFx solution will save time. Yeoman will detect the existing solution and will only add a new web part to it.

Reason 2. Logical and Physical grouping of SPFx web parts

If the web parts are being developed for the same reason or they are part of one module, then they can be combined in a single solution. This will help to have better packaging. One single package will have all related web parts together.

Follow the below steps to add another SPFx webpart to the existing SPFx solution.

1. From the Command Prompt, navigate to the existing SPFx solution directory.
2. Type "yo @microsoft/sharepoint" and hit Enter.
3. Yeoman will automatically detect the pre-existing SPFx solution and will only ask for the webpart information, as compared to the first run instance where it also had asked for the solution information.
   
4. Let us add one more SPFx webpart to an existing solution as AnotherSPFxWebPart.
5. Observe the time taken for scaffolding. It is very much less than our first run.
6. Once scaffolding finishes, type “code .” to open the solution in VS Code (or any other code editor of your choice).
   
7. The solution contains 2 parts that can be deployed using one single package.
8. Run “gulp serve” to open the local workbench. Both the web parts can be seen as available weparts to add on the page
   
9. Both the web parts can be added to the page at the same time.
   

Deployment Commands

gulp bundle --ship

This command will bundle all TypeScript and its node_module dependencies in a single compiled JavaScript file. These files should be copied to the CDN location.

gulp package-solution --ship

This command will create the package (.sppkg) file. This package should be added to the app catalog.

Summary

The Yeoman template generator helps in adding multiple web parts to a single solution. This option can be used to group together the web parts and deploy them as a single solution to the SharePoint site.