Selecting which Web Parts or Extensions to Deploy

[elpinto007]

Category

• [X] Question
• [ ] Bug
• [ ] Enhancement

Expected or Desired Behavior

Observed Behavior

Steps to Reproduce

Submission Guidelines

Is there a script or xml that is available where we can select which web parts or extensions to deploy? So ideally, there is an XML script in provisioning which shows which web parts and extensions are being deployed. Giving the user a chance to select which ones to deploy.

[eoverfield]

@elpinto007 It depends on what you mean by deploy.

By design, all webparts and extensions are a part of one SPFx solution that you can either manually deploy or will be deployed by ./provisioning/deploy.ps1. This only deploys the solution package to your tenant though, it will not actually add a webpart to a page, nor will it activate extensions on a specific site.

Webparts are added to pages and extensions are activated on sites via included site scripts and provisioning templates. Thus if you want to control what webparts are automatically added to pages during deployment or you want to change extension behavior, review the following, all found in the provisioning folder of this project.

collab.xml - used for creating default team sites, review hubsite.xml - used for creating the default hub site (comm site), review and collabcommunicationsite.json - site script for comm sites, review associateExtension verb colabteamsite.json - site script for teams sites, review associateExtension verb

[elpinto007]

Thank you @eoverfield ! I was trying to see if there is a way for me to only deploy selected web parts to my tenant (not all). I understand they are part of one SPFx solution so they all have dependencies bundled up. I have successfully deployed the solution to my dev tenant and everything seems to be working okay. But I wanted to deploy a handful of web parts and extensions (eg Alerts, People Directory etc) to our Production tenant to a UAT Site Collection to test the functionality with others. I tried to create a new SPFx solution and take the Tiles web part as an example, but I came across a number of errors which I will try to debug. I will have a look at the provisioning files as recommended.

[eoverfield]

The only way to limit webparts is to break up the SPFx solution into multiple solutions. Most of the webparts do not require other webparts, it may be that you need to install additional node packages in your custom solutions.

[elpinto007]

I tried taking just the Tiles web part out to test how this can work. And found the following error when I did a Gulp Serve. Not sure if anyone else has seen this error. I am trying to debug this, but would be handy if anyone else has seen something similar and can point me in the right direction.

[SPLoaderError.loadComponentError]:
***Failed to load component "26cb4af3-7f48-4737-b82a-4e24167c2d07" (pnpTiles).
Original error: ***Failed to load entry point from component "26cb4af3-7f48-4737-b82a-4e24167c2d07" (pnpTiles).
Original error: Error loading https://component-id.invalid/26cb4af3-7f48-4737-b82a-4e24167c2d07_0.0.1
    Cannot find module "applicationinsights-js"

***INNERERROR:
***Failed to load entry point from component "26cb4af3-7f48-4737-b82a-4e24167c2d07" (pnpTiles).
Original error: Error loading https://component-id.invalid/26cb4af3-7f48-4737-b82a-4e24167c2d07_0.0.1
    Cannot find module "applicationinsights-js"
***CALLSTACK:
Error
    at SPLoaderError.SPError [as constructor] (https://localhost:4321/temp/workbench-packages/@microsoft_sp-loader/dist/sp-loader-assembly_en-us.js:8502:24)
    at new SPLoaderError (https://localhost:4321/temp/workbench-packages/@microsoft_sp-loader/dist/sp-loader-assembly_en-us.js:4359:28)
    at Function.ErrorBuilder.buildErrorWithVerboseLog (https://localhost:4321/temp/workbench-packages/@microsoft_sp-loader/dist/sp-loader-assembly_en-us.js:3884:21)
    at Function.ErrorBuilder.buildLoadComponentError (https://localhost:4321/temp/workbench-packages/@microsoft_sp-loader/dist/sp-loader-assembly_en-us.js:3796:21)
    at https://localhost:4321/temp/workbench-packages/@microsoft_sp-loader/dist/sp-loader-assembly_en-us.js:6805:47

EDIT: This error happens when I try to add the web part to the workbench page. There are errors that happen on terminal when I hit Gulp Serve:

./node_modules/@pnp/spfx-controls-react/lib/controls/webPartTitle/WebPartTitle.js
Module not found: Error: Can't resolve 'ControlStrings' in 'c:\dev\SharePoint Dev\tiles-kit\tiles\node_modules\@pnp\spfx-controls-react\lib\controls\webPartTitle'
resolve 'ControlStrings' in 'c:\dev\SharePoint Dev\tiles-kit\tiles\node_modules\@pnp\spfx-controls-react\lib\controls\webPartTitle'
  Parsed request is a module
  using description file: c:\dev\SharePoint Dev\tiles-kit\tiles\node_modules\@pnp\spfx-controls-react\package.json (relative path: ./lib/controls/webPartTitle)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: c:\dev\SharePoint Dev\tiles-kit\tiles\node_modules\@pnp\spfx-controls-react\package.json (relative path: ./lib/controls/webPartTitle)
    resolve as module

I had copied across the pnp modules to my solution in VS Code, but maybe I didnt do it the correct way? I can see @pnp under node_modules, but I dont see the files when I open the location using explorer.

[eoverfield]

There is no good method I am aware of to quickly copy a webpart or extension from one solution to another.

Normally you will be unable to move over the webpart folder, rather you will need to create a new spfx solution, add a new webpart to that solution, then copy over the contents of the webpart source manually to the new webpart. I normally copy over each block of code, trying to leave class names alone.

You will also need to npm install any dev packages that the copied webpart may need, that way the node_modules folder is handle properly by npm.

[nicholas-morris]

Is it possible to add webparts into the initial deployment so they are available in the deployed solution to add to page? I see custom webparts are located in sp-starter-kit/solution/src/webparts/

[eoverfield]

By default, when you add the sppgk file to your app catalog, the webparts included in the solution will be available to all sites for utilization. If you manually add the solution to your app catalog, you will need to select that you do in fact want to automatically make the solution available to all sites.

[nicholas-morris]

Thanks, i'm actually wanting to add additional custom webparts to the solution so how do I go about recreating the .sppgk to include these?

[elpinto007]

@eoverfield, I am currently working on extracting individual components out of the starter kit and making them available for the community (in case others have a similar request to mine). I just wanted to check if there are any restrictions on me doing this to make the solution available to others (with the correct credits given of course).

[eoverfield]

@elpinto007 It is all open source, I do not see any limitation. @bcameron1231 forked this project and removed the aspects that required targeted release https://github.com/bcameron1231/PnP-Starter-Kit-Non-FR, which I think was a great idea. As you mentioned, I would point back to this primary repo though.

[elpinto007]

@eoverfield, thank you! Yes I came across @bcameron1231's solution which gave me inspiration for my question. I think I can close this question now.

[eoverfield]

@nicholas-morris the safest way to include additional webparts directly into the starter kit's sppkg file is to run: yo @microsoft/sharepoint in the solution folder. This will run you through the process of adding an additional component (webpart or extension) to the existing page. You can now copy and paste code from an existing code base to the starter kits' package. When you copy over code, watch the id's as the new webpart/extension will have created new ids. Also, if your source code was built using a previous version of spfx, you make need to refactor code as well.