Boilerplate PCF Project Setup

March 3rd, 2020

🕓 3 minutes

Here are some steps to follow to get a PowerApps Component Framework (PCF) boilerplate project setup locally on your PC.

Tooling requirements

Folder structure

I usually follow the same project structure for each PCF project I am working on which looks like below - assuming there is just a single PCF control being developed:

1
2
3
📁src
📁project
📁solution

The 📁project folder contains the assets used to build the PCF control and the 📁solution folder contains the assets required to build and package a solution ZIP file for import into a CDS environment.

Create the PCF project

From within the 📁project folder, open PowerShell and run the below PowerApps CLI command:

1
pac pcf init --namespace RyanSpain.NET --name HelloWorldControl --template field

This command creates the PCF project and required assets. The 📁project folder structure should now look similar to the below:

1
2
3
4
5
6
7
8
9
10
📁project
📁HelloWorldControl
📁generated
📄ControlManifest.Input.xml
📄 index.ts
📄.gitignore
📄package.json
📄pcfconfig.json
📄project.pcfproj
📄tsconfig.json

Note the 📄project.pcfproj is named after the folder in which the command is run. This is why I have the folder structure I do 😊

Install required packages

Run this command in the 📁project folder to download the packages required to build the project.

1
npm i

The downloaded packages are located in 📁project/node_modules.

Build and test the project

While there is no functionality yet, you can use the below commands to build and test the project as-is.

Build
1
npm run build

The bundled output of the build can be found in 📁project/out. This path is configured in the 📄pcfconfig.json file.

Test
1
npm run start

This command will build the project and run it using the PowerApps Component Test Framework harness in your browser.

Create the CDS solution project

From within the 📁solution folder, open PowerShell and run the below PowerApps CLI command:

1
pac solution init --publisher-name RSNET --publisher-prefix rsnet

This command creates the CDS solution project and required assets. The 📁solution folder structure should now look similar to the below:

1
2
3
4
📁solution
📁Other
📄.gitignore
📄 solution.cdsproj

Again, the 📄solution.cdsproj is named after the folder in which the command is run.

Reference the PCF project

We need to reference any PCF project(s) we want to be included in the CDS solution file we will generate. To do this, run the below command in the 📁solution folder.

1
pac solution add-reference --path ../project

The --path argument requires the folder in with the pcfproj file is located.

Build and package the solution

To generate a CDS solution that can be imported, we need to run msbuild in the 📁solution folder.

The initial build command should like the below which gathers the required packages.

1
msbuild /t:build /restore

Subsequent build can be done using this command.

1
msbuild /t:rebuild

Result

Once you run one of the msbuild commands, you should find an unmanaged solution file in 📁solution/bin/Debug.

What I didn’t cover

  • Configuring the control manifest
  • Implementing logic and styles
  • Building as a managed solution
  • Deploying to a CDS environment
  • Configuring in a model-driven app