Power Apps Code Apps let you host a React or Vite app inside Power Apps. The CLI you use to build them now groups its commands under pa.

Lets build a code app from an empty folder, run it locally, and publish it to Power Platform.

Prerequisites

Make sure you have the following ready.

  • A Power Platform environment with code apps enabled.
  • Node.js Long Term Support (LTS) version.
  • The environment ID of your target environment. You can copy it from the Power Platform admin center.

Lets start by creating the project.

Create the Code App Project

  • Start from the Vite template published by the Power Apps team.
npx degit github:microsoft/PowerAppsCodeApps/templates/vite demo-new-pa-app
cd demo-new-pa-app
npm install
  • This gives you a standard Vite and React project. Nothing about it is specific to Power Apps yet.

  • Next install the CLI and the SDK globally.
npm install --global @microsoft/power-apps-cli
npm install --global @microsoft/power-apps

Initialize the Code App

  • Run the init command from the project folder.
pa app init
  • The CLI asks for two values, one after the other.
PromptWhat to enter
Please provide the environment IDThe environment ID you copied earlier
Please provide the display name for the appThe name shown in Power Apps, for example demo-app-pa-cli

You can also pass both values directly and skip the prompts.

pa app init --display-name "demo-app-pa-cli" --environment-id <environment-id>

When the command completes, it creates a power.config.json file in your project root. This file holds the app identity and the data sources you add later.

The output also suggests two follow up commands.

  • pa app add data-source to connect data to the app.
  • pa app run to start the app locally.

Note: If you are not signed in, pa app init opens the browser and signs you in first. To sign in ahead of time, use pa auth login.

Now the project is linked to your environment. Lets run it locally before publishing.

Run the App Locally

  • Start the local host with the run command.
pa app run

Two things happen. Vite starts the dev server, and the CLI prints a Local Play URL.

  • Vite picks the first free port. The Local Play URL points at apps.powerapps.com and passes your local server address to it.
  • Open the Local Play URL, not the plain localhost URL. The Local Play URL loads the app inside the Power Apps host.

Important: Open the URL in the same browser profile you use for your Power Platform tenant.

Note: Chrome and Microsoft Edge block requests from public origins to local endpoints. Your app talks to localhost during development, so you may need to allow this in the browser. For embedded scenarios, add allow="local-network-access" to the iframe tag.

The app runs locally now. Lets build it and publish it to Power Apps.

Build and Publish the App

Build the project first. The push command uploads compiled assets, so the build has to run before it.

  • To publish, build first and then push.
npm run build
pa app push
  • Play the App

That is a code app built and deployed with the new command set. Lets look at what changed since my earlier post.

What Changed Since My Last Post

If you followed my July post, the commands there map to new equivalents.

Taskpac codeEarlier CLICurrent CLI
Initialize a code apppac code initpower-apps initpa app init
Run local dev serverpac code runpower-apps runpa app run
Publish to environmentpac code pushpower-apps pushpa app push
Add a data sourcepac code add-data-sourcepower-apps add-data-sourcepa app add data-source
Add a Power Automate flow(not available)power-apps add-flowpa app add flow
List flows(not available)power-apps list-flowspa app list-flows
Sign inpac auth createpower-apps loginpa auth login
Check active accountpac auth listpower-apps auth-statuspa auth status
Sign outpac auth clearpower-apps logoutpa auth logout

Three points are worth calling out.

  • Commands are grouped now. The format is pa <group> <command>.
  • The CLI comes from a separate install. Installing the SDK alone no longer provides the pa command.
  • Note the flow and data source rows. The hyphen is now a space. add-flow is now add flow.
  • pac code remains on the deprecation list, so that part of my old post still applies.

Commands available only in pa

  • pa auth switch changes the active account when you are signed in to more than one.
  • pa app share shares a published app with users or service principals.
  • pa app push --non-interactive publishes from a build pipeline using a service principal.
  • pa app add dataverse-api calls Dataverse actions and functions from your code app.
  • pa connector list and pa connection create find connectors and create connections.

I will cover these in a separate post.

That covers the build and the changes. Here is a quick recap.

Summary

We created a code app from the Vite template, linked it to an environment, ran it locally, and published it.

  • Install @microsoft/power-apps-cli globally to get the pa command.
  • Run pa app init to create power.config.json and link the app to your environment.
  • Use pa app run and open the Local Play URL, not plain localhost.
  • Run npm run build before pa app push, because push uploads the compiled output.

Official documentation: Power Apps CLI command reference and Create a code app by using the Power Apps CLI

🙂

Leave a Reply

Discover more from Rajeev Pentyala – Technical Blog on Power Platform, Azure and AI

Subscribe now to keep reading and get access to the full archive.

Continue reading