Create and build a code component

Article
08/17/2022
2 minutes to read

This article demonstrates how to create and deploy code components using Microsoft Power Platform CLI. Ensure that you have installed Microsoft Power Platform CLI.

Note

Unsure about entity vs. table? See Developers: Understand terminology in Microsoft Dataverse.

Create a new component

To begin, open Developer Command Prompt for VS 2017 or higher after installing Microsoft Power Platform CLI.

In the Developer Command Prompt, 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 pac pcf init command:

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

The above command will also run npm install command for you to retrieve all the required project dependencies.
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 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

Create and build a code component

Create a new component

Build your component

See also

Feedback