Create and build a code component

This article demonstrates how to create and deploy code components using Microsoft Power Platform CLI.

Prerequisites

You need install the following components:

1. Visual Studio Code (VSCode) (Ensure the Add to PATH option is select)
2. node.js (LTS version is recommended)
3. Microsoft Power Platform CLI (Use the Visual Studio Code extension)

Create a new component

Open Visual Studio code and open a new terminal window by selecting Terminal > New Terminal.

1. In the terminal window, create a new folder on your local machine, for example, C:\projects\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 pac pcf init command:

   pac pcf init --namespace <specify your namespace here> --name <Name of the code component> --template <component type> --run-npm-install
   

4. The above command will also run npm install command for you to retrieve all the required project dependencies.

5. Open your project folder C:\projects\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:\projects\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 Visual Studio Code terminal window for development purposes, or use npm run build -- --buildMode production for building a release version.

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 Microsoft Dataverse. More information: Package a code component

See also

Debug code components
Package a code component
Add code components to a column or table
Power Apps component framework API reference
Power Apps component framework overview