Overview
The 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, 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. Yeoman is responsible for the scaffolding of the solution. Node JS provides the platform to run Yeoman. The templates are downloaded from 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 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).
- Open Command Prompt.
- Navigate to the directory where you need to setup the SPFx solution.
- Type "yo @microsoft/sharepoint" and hit Enter.
- Yeoman will present the wizard to help set up the SPFx solution.
- Specify the solution name.
- Specify the name of the SPFx webpart (FirstSPFxWebPart in this case).
- Yeoman will perform the scaffolding to generate the SPFx solution.
- Type “code .” to open the SPFx solution in VS Code.
Our first SPFx web part is now ready. Type “gulp serve” on 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 webpart 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 to 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 new SPFx webpart to an existing SPFx solution will save time. Yeoman will detect the existing solution and will only add new webpart to it.
Reason #2 - Logical and Physical grouping of SPFx webparts
If the webparts 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 webparts together.
Follow the below steps to add another SPFx webpart to existing SPFx solution.
- From Command Prompt, navigate to existing SPFx solution directory.
- Type "yo @microsoft/sharepoint" and hit Enter.
- 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.
- Let us add one more SPFx webpart to an existing solution as AnotherSPFxWebPart.
- Observe the time taken for scaffolding. It is very much less than our first run.
- Once scaffolding finishes, type “code .” to open the solution in VS Code (or any other code editor of your choice).
The solution contains 2 webparts which can be deployed using one single package.
- Run “gulp serve” to open the local workbench. Both the webparts can be seen as available weparts to add on page
- Both the webparts can be added to the page at the same time.
Deployment Commands
This command will bundle all TypeScript and its node_module dependencies in a single compiled JavaScript file. These files should be copied to CDN location.
- gulp package-solution --ship
This command will create the package (.sppkg) file. This package should be added to the app catalog.
Summary
Yeoman template generator helps in adding multiple webparts to a single solution. This option can be used to group together the webparts and deploy them as a single solution to SharePoint site.