Boilerplate PCF project setup
Here are some steps to follow to get a Power Apps Component Framework (PCF) boilerplate project setup locally on your PC.
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:
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:
This command creates the PCF project and required assets. The 📁project folder structure should now look similar to the below:
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.
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.
The bundled output of the build can be found in 📁project/out. This path is configured in the 📄pcfconfig.json file.
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:
This command creates the CDS solution project and required assets. The 📁solution folder structure should now look similar to the below:
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.
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.
Subsequent build can be done using this command.
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