Environment Setup for Power Apps Component Framework (PCF)

Below are the steps to Setup the environment to create PCF Code Components. You will be creating your first pcf code component.

System Setting when developing this component:

  • Machine OS: Windows 10
  • System Type: 64-bit OS
  • IDE: Visual Studio Code

Below are the steps to setup the environment. This is the one time setup and don’t need to repeat this again.

  • Install NPM:

NPM is Node Package Manager. npm is world’s largest Software Library. This is free to use. It includes CLI developers can use to download and install software. npm is installed with Node.js, which means we have to install NodeJS first.

Navigate to https://nodejs.org. Install the LTS version even if it is older then the latest version. The version keeps on changing. I will be using NodeJS version 18.13.0

Click on the LTS version. This will download the node-v18.13.0-x64.msi installer. Click on it and it will open the Installation wizard. The wizard is pretty straight forward. Click Next and install NodeJS. This installation will take a couple of minutes.

  • Install Power Apps CLI (Command Line Interface)

Click here to install Power Apps CLI. This will download .msi file. For me it downloaded powerapps-cli-1.0.msi. Click it and install CLI. It is a simple wizard, follow it and install it.

  • Install Visual Studio Code

I will be using Visual Studio Code for development purpose. It is free of code and you do not need a license for it. Download Visual Studio Code from here.

  • Power Platform Extension

Once you install Visual Studio Code, install Power Platform Extension. Open Visual Studio Code, go to Extensions, type Power Platform Tools. If you see 2 results of the same name, choose the one which is not in Preview mode. Preview Mode releases you can use for development/testing purpose, but they should not be used in Production. Click on Install. This will install the extension.