automate spfx packaging including selected components

Question

Description and objectives:

I am trying to figure out a "best practice" guidance on this topic:

We are planning to create a "self-service" packaging solution, the idea behind is sort of selecting a subset of spfx components and generating the solution only with the selected components.

An example:

• spfx solution containing 20 webparts,
• user selects 5 of them
• packaging gets generated only with the 5 componentes selected, the rest of them are not included in the packaging.

P.S. Notice that I am not talking about sharing code between spfx components, more in terms of finding out a way to automate the process so that a heldesk non technical person would be able to generate the solution (including only the components that were paid off)...

Answer 1

For this scenario you have to build a asp.net server side interface which will modify / manipulate your config.json file.

step 1 : Create a UI for selection of number of web parts with check box.

On each selection manipulate the config.json file in back end.

{
  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/config.2.0.schema.json",
  "version": "2.0",
  "bundles": {
    <<manipulate this section>>
  },
  "externals": {},
  "localizedResources": {
    <<manipulate this section>>
  }
}

step 2 : Use a button to initiate the build and package process from back-end.

gulp clean
gulp bundle --ship
gulp package-solution --ship

Step 3 : Finally enable a link in the UI once the solution got generated. This link should point to your package file which was generated in the server.

Answer 2

One option could be to edit/update the config/config.json file in the SPFx solution before building the package for the solution. The components array in the bundles object defines which components will be bundled as part of the solution.

You could edit the config.json and then run the gulp tasks to build the package.

{
  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/config.2.0.schema.json",
  "version": "2.0",
  "bundles": {
    "hello-world-web-part": {
      "components": [
        {
          "entrypoint": "./lib/webparts/helloWorld/HelloWorldWebPart.js",
          "manifest": "./src/webparts/helloWorld/HelloWorldWebPart.manifest.json"
        }
      ]
    }
  },
  "externals": {},
  "localizedResources": {
    "HelloWorldWebPartStrings": "lib/webparts/helloWorld/loc/{locale}.js"
  }
}

Answer 3

Web Parts are defined in config.json, package is defined in package-solution.json. You could create a set of config.json and package-solution.json for each customer.

The easiest approach to achieve the kind of separation you mentioned would be to create two separate projects.

Unfortunately you don't have such granular control in SPFx. Separating them out to different projects would be a more robust approach.