Create and build a code component
This topic demonstrates how to create and deploy code components using Power Apps CLI. Ensure that you have installed Microsoft Power Apps CLI.
Create a new component
To begin, open Developer Command Prompt for VS 2017 after installing Power Apps CLI.
In the Developer Command Prompt for VS 2017, create a new folder on your local machine, for example, C:\Users\your name\Documents\My_code_Component using the command
mkdir <Specify the folder name>.
Go to the newly created folder using the command
cd <specify your new folder path>.
Create a new component project by passing some basic parameters using the command:
pac pcf init --namespace <specify your namespace here> --name <Name of the code component> --template <component type>
Currently, Power Apps CLI supports two types of components: field and dataset for model-driven apps. For canvas apps, only the field type is supported for this experimental preview.
To retrieve all the required project dependencies, run the command
Open your project folder
C:\Users\<your name>\Documents\<My_code_Component>in any developer environment of your choice and get started with your code component development. The quickest way to get started is by running
code .from your command prompt once you are in the
C:\Users\<your name>\Documents\<My_code_Component>directory. This command opens your component project in Visual Studio Code.
Implement the required artifacts for the component like manifest, component logic and styling and then build the component project. More information: Create your first code component
Build your component
To build the component project, open the project folder that contains
package.json in Visual Studio Code and use the (Ctrl-Shift-B) command, then select the build options. Alternatively, you can build the component quickly using the
npm run build command in the Developer Command Prompt for VS 2017 window.
To debug the component during or after the build operation, see Debug a code component.
Finally when you're done implementing the component logic in TypeScript, you need to bundle all the code component elements into a solution file so that you can import the solution into Common Data Service. More information: Package a code component
Debug code components
Package a code component
Add code components to a field or entity
Updating existing code components
Power Apps component framework API reference
Power Apps component framework overview