Create Your First Power Apps Code App with PAC CLI

Your first Power Apps Code app is a regular modern web app that becomes a managed Power Platform app. You start from a Vite + React + TypeScript template, connect your machine to a Power Platform environment with PAC CLI, initialize the code app, test it locally, and then publish it to Power Apps.

This guide keeps the flow practical: one app, one environment, one complete path from empty folder to published code app.

What you will build

You will create a basic Power Apps Code app from the official Vite template and publish it into a Power Platform environment where code apps are enabled.

The workflow is:

1. Scaffold the Vite React starter.
2. Authenticate PAC CLI against your Power Platform tenant.
3. Select the target environment.
4. Initialize the project as a Power Apps Code app.
5. Run the app locally and open Local Play.
6. Build and publish the app to Power Apps.

Prerequisites

Before you start, make sure you have the basics ready:

• Power Platform environment with code apps enabled.
• Power Apps Premium license for users who run code apps.
• Node.js LTS and npm.
• Git, because the starter template is pulled from GitHub.
• Power Platform CLI available as the pac command.
• VS Code or another code editor.

Note: Microsoft also provides a newer npm-based CLI through the Power Apps client library for code apps v1.0.4 and later. This article uses the PAC CLI workflow because it is still common in existing projects and learning material.

Step 1 - Create the project

Open a terminal and create a new app from the official Power Apps Code Apps Vite template:

npx degit github:microsoft/PowerAppsCodeApps/templates/vite my-first-code-app
cd my-first-code-app

Install the project dependencies:

npm install

At this point you have a normal Vite React project on disk. It is not yet registered as a Power Apps Code app.

Step 2 - Authenticate PAC CLI

Connect PAC CLI to your Power Platform tenant:

pac auth create

When prompted, sign in with the Microsoft account that has access to your Power Platform environment.

Then select the environment where the app should be created and published:

pac env select --environment <your-environment-id>

You can use an environment ID, URL, unique name, or partial name depending on your setup. To confirm the selected profile and environment, run:

pac auth list

Step 3 - Initialize the code app

Now turn the web project into a Power Apps Code app:

pac code init --displayName "My First Code App"

The --displayName value is the friendly app name users will see in Power Apps. The command initializes code app metadata for the current directory and links the project to your selected environment.

You can also provide optional values such as app URL, build path, description, entry point, logo path, region, or environment when you need more control:

pac code init --displayName "My First Code App" --description "A first Power Apps Code app built with React" --environment https://<your-environment>.crm.dynamics.com

Step 4 - Run locally

Start the Vite development server:

npm run dev

Open the URL shown as Local Play. Use the same browser profile where you are signed in to your Power Platform tenant; this avoids identity and local connection issues during development.

If your browser asks for local network access, allow it for development. Modern Chromium-based browsers can block public-origin access to local endpoints unless permission or enterprise policy allows it.

Step 5 - Make a small change

Open the project in your editor:

code .

Find the main React component in src/ and make a small visible change, such as a heading or button label. Keep the first change simple so you can prove the local loop works before adding data sources or business logic.

Save the file and confirm the local app reloads in the browser.

Step 6 - Build the app

When the app looks correct locally, build the production assets:

npm run build

This runs the build script defined in package.json, typically compiling TypeScript and producing Vite output in the configured build folder.

Step 7 - Publish to Power Apps

Publish a new version of the code app to the selected environment:

pac code push

When the push succeeds, PAC CLI returns a Power Apps URL. Open that URL to test the published app. You can also go to make.powerapps.com to view, play, share, and manage the app.

Common issues

• Code apps are not enabled - ask a Power Platform admin or environment admin to enable Power Apps code apps for the target environment.
• Wrong environment selected - run pac auth list and pac env select --environment <id-or-url> before initializing or pushing.
• Local Play does not load - open it in the same browser profile as your tenant login and check local network access permissions.
• Build fails - run npm install, check TypeScript errors, and confirm the template dependencies are installed.
• Push fails - verify your license, permissions, selected environment, and whether code apps are enabled.

Key takeaways

• A Power Apps Code app starts as a modern React app and is published into the Power Platform.
• pac auth create connects your machine to Power Platform.
• pac code init initializes the current folder as a code app.
• npm run dev is your local development loop.
• npm run build and pac code push publish the app.

Once you understand this first-app loop, every later Power Apps Code topic gets easier: project structure, data sources, Dataverse, APIs, ALM, and reusable components all build on this foundation.

---

Keywords: Power Apps Code, create first code app, PAC CLI, pac code init, pac code push, Power Platform CLI, Vite React Power Apps, TypeScript Power Apps, pro-code Power Platform, Microsoft 365.