Code Apps In Power Apps

By
On:

In this quickstart, build a code app, run it locally, and then publish it. These instructions guide you to download a sample code app and use PAC CLI to target a Power Platform environment to publish the app. Then you publish the app before running the app hosted in Power Platform.

Prerequisites

Code apps require several developer tools like Visual Studio Code, git, dotnet, node.js, and npm to be available on the command line.

Install the following developer tools

Use these tools while creating code apps:

Enable code apps on a Power Platform environment

Code apps can be enabled via an environment setting that Power Platform Admins and environment admins can set. The environment setting respects groups and rules set by Power Platform Admins.

  1. As an admin, go to Power Platform admin center
  2. Navigate to Manage > Environments > select the environment where you’ll use code apps
  3. Navigate to Settings > Expand the Product subsection > Select FeaturesEnable features
  4. Navigate to the feature Power Apps code apps and use the Enable code apps toggle for enablement.Enable code apps
  5. Select Save in the settings experience.

Code Apps In Power Apps

This repository has the start of a TypeScript app that already includes the Power Platform SDK. Later we’ll add guidance to that allows you to start from scratch without using this base app.

PowerShell

git clone https://github.com/microsoft/PowerAppsCodeApps.git
cd PowerAppsCodeApps

Open the HelloWorld sample

Open the HelloWorld sample using Visual Studio Code.

PowerShell

cd samples\HelloWorld

Authenticate PAC CLI and point to your development environment

In Visual Studio Code, open a new terminal window and use the pac auth create command to create an authentication profile.

PowerShell

pac auth create --environment {environment id}

All Power Platform apps, flows, and agents publish to an environment. The PAC CLI’s auth command prompts you to authenticate with your Microsoft Entra identity and ensure the code app you add connections to and publish to Power Platform go in the specified environment.

Install dependencies

In the terminal window, run these commands:

PowerShellCopy

npm install
pac code init --displayName 'Hello World'
  • npm install Installs the dependent libraries found in the package.json file.
  • pac code init Initializes a code app in the current directory.

Run locally

In the terminal window, run these commands:

PowerShellCopy

npm run dev | pac code run
  • npm run dev Runs the scripts configured in the package.json file with the key value of dev. In this case, the script is "concurrently \"vite\" \"pac code run\"".
  • pac code run Runs a local server for connections loading locally in the app.

Build and deploy to Power Apps

In the terminal window, run these commands:

PowerShellCopy

npm run build | pac code push
  • npm run build Runs the scripts configured in the package.json file with the key value of build. In this case, the script is "tsc -b && vite build".
  • pac code push Publishes a new version of a Code app.

If successful, this command should return a Power Apps URL to run the app.

Optionally, you can open Power Apps to see the app. You can play, share, or see details from there.

Congratulations! You successfully pushed your first code app!

Leave a Comment