Bundle multiple PCF controls in one solution

In this post we’ll see how to bundle multiple PCF controls in one single Power Apps solution. This technique can be used to distribute a suite of controls for example.

Overview

Multiple controls in a single PCF project are not fully supported by Microsoft’s tooling. The pcf-scripts start command for example won’t allow you to specify the control to test. Fortunately, adding multiple PCF project references to a single solution is fully supported and that’s how we can bundle several controls in one single solution.

Our repo will have the following structure:

samples-pcf-multicontrols
|__ Control1 <- PCF Project folder
  |__ Control1.pcfproj
|__ Control2 <- PCF Project folder
  |__ Control2.pcfproj
|__ Solution <- Power Apps solution folder
  |__ Solution.cdsproj <- Contains references to Control1\Control1.pcfproj and Control2\Control2.pcfproj

Requirements

• node.js
• Microsoft Power Platform CLI
• .Net 5 or later SDK

How-to

First, create a root directory samples-pcf-multicontrols. Then, create a Control1 folder inside samples-pcf-multicontrols and create a PCF project inside it:

mkdir samples-pcf-multicontrols
cd samples-pcf-multicontrols
mkdir Control1
cd Control1
pac pcf init --namespace WWW --name Control1 --template field --run-npm-install

When in the samples-pcf-multicontrols folder, repeat the same actions to create a Control2 folder and create a second PCF project inside it:

mkdir Control2
cd Control2
pac pcf init --namespace WWW --name Control2 --template field --run-npm-install

In samples-pcf-multicontrols, create a Solution folder and create a solution project:

mkdir Solution
cd Solution
pac solution init --publisher-name Wawawum --publisher-prefix WWW

Last step consists of adding references to the PCF projects:

pac solution add-reference --path ..\Control1
pac solution add-reference --path ..\Control2

The solution is now configured and points to the two projects. To build it and generate the solution zip file you can use the following command:

dotnet build

The solution file will be available in samples-pcf-multicontrols\Solution\bin\Debug.