Boilerplate PCF project setup

Image of the author

Ryan Spain

Cover image for the article.
#Power Platform #Power Apps #PCF
Here are some steps to follow to get a Power Apps 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:
šŸ“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 Power Apps CLI command:
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:
šŸ“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.
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

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

npm run start
This command will build the project and run it using the Power Apps Component Test Framework harness in your browser.

Create the CDS solution project

From within theĀ šŸ“solutionĀ folder, open PowerShell and run the below Power Apps CLI command:
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:
šŸ“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.
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.
msbuild /t:build /restore
Subsequent build can be done using this command.
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