Part 2: SET up development environment for PowerApps Component Framework (PCF) Project

Follow my blog for more interesting topics on Dynamics 365, Portals and Power Platform. For training and consulting, write to us at info@xrmforyou.com

The article is a part of series of blog posts on Custom component framework topic. Please start from beginning to get the context.

For this article I will use Visual studio 2017 for development purpose. All the steps mentioned below will assume that you have Visual studio 2017 as your development environment. Also please note that of the current pre-release, you can set-up your development environment for machines on Windows 10

For this article

Machine OS: Windows 10

IDE: Visual studio 2017

Local directory for control development: c:\debajit\blog\powercontrols

Please follow the below steps:

Step 1: Install NPM

npm is the world’s largest software registry and open source developers use npm to share software. node.js come with npm. In order to install NPM, please follow the below procedure.

Navigate to site – https://nodejs.org/en/

Create PCF Control step by step

Dowload the LTS one. You can even use the current version (12). Once you have downloaded, install it.

Step 2: Install Power Apps CLI (command line interface)

You can download the CLI from – http://download.microsoft.com/download/D/B/E/DBE69906-B4DA-471C-8960-092AB955C681/powerapps-cli-0.1.51.msi. This will download a MSI file. Once downloaded, install it.

Step 3: Set-up your Power Apps custom component project

The next step is to set-up the PCF project framework. In order to accomplish this, please flow the below steps.

1. Open Visual studio 2017 command prompt

Create PCF Control step by step

2. Navigate to your local directory where you want to set-up your component project

Create PCF Control step by step

3. To create a new component project, run the below command

pac pcf init --namespace <specify your namespace here> --name <put component name here> --template <component type>

Now that you have completed some critical steps, a explanation is the need of the hour.

“namespace” is the namespace that you want to provide for your controls. For example if you are an ISV and want to develop custom components, may be you want all your controls within a namespace that identifies your company. In my case I would use – “XrmforyouControls”.

“componentname” is the name of the control. Since I will be building a file input control here, I will use the component name as “FileControl”.

“template” – As of the current pre-release only two values are supported for this field and dataset

So my command line would be

pac pcf init --namespace XrmforyouControls --name FileControl --template field
Create PCF Control step by step

As you can see, my project is created successfully.

4. The next step is to install project dependencies. Your component project would required lots of external files to build successfully. To install the dependencies, run the command “npm install”

Create PCF Control step by step

It may take some time to install the dependencies. Your screen would resemble above while installing. Once installation is done, your project environment is ready and we will start building the control.

Advertisements

The first step as we discussed earlier in to build the manifest file which is explained in the next article.

You will also like the below posts

One thought on “Part 2: SET up development environment for PowerApps Component Framework (PCF) Project”

  1. Small update to the blog – we need to update the CLI to be the latest verion by running the command – pac install latest . As the current version throws up and error now.

Leave a Reply