Create and build a code component
This article demonstrates how to create and deploy code components using Microsoft Power Platform CLI.
You need install the following components:
- Visual Studio Code (VSCode) (Ensure the Add to PATH option is select)
- node.js (LTS version is recommended)
- 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.
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>.
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> --run-npm-install
The above command will also run
npm installcommand for you to retrieve all the required project dependencies.
Open your project folder
C:\projects\My_code_Componentin 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_Componentdirectory. 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 Visual Studio Code terminal window for development purposes, or use
npm run build -- --buildMode production for building a release version.
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
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
Submit and view feedback for