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.

  1. 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>.

  2. Go to the newly created folder using the command cd <specify your new folder path>.

  3. 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>
    

    Note

    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.

  4. To retrieve all the required project dependencies, run the command npm install.

  5. 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.

  6. 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.

Tip

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

See also

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