Power Apps Code App: Quickstart Guide

Note: Code Apps are currently a preview feature. Preview features are not meant for production use and may have restricted functionality.

This repository guide walks you through setting up a blank app using Vite and converting it into a Power Apps Code App. It covers configuring a TypeScript app using the Power Platform SDK, building it, and deploying it to your environment.

---

📋 Prerequisites

Before you begin, ensure you have the following installed and configured:

1. Power Platform Environment- Must have Code Apps enabled (check your environment settings).

2. Node.js- Install the Long Term Support (LTS) version.

3. Power Platform CLI- Required for authentication and deployment commands (pac).

4. Git- Required for version control and cloning templates.

---

🚀 Getting Started

Follow these steps to initialize and configure your application.

1. Initialize the Project

Open a new terminal and run the following command to scaffold a new app using the Microsoft Vite template:

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

2. Authenticate with Power Platform

You need to connect the Power Platform CLI (PAC) to your tenant and select the correct environment where the app will be published.

1. Create an authentication profile:

pac auth create

• Sign in using your Power Platform account credentials when prompted.

2. Your environment list: Get the environment id from the list.

pac org list

3. Select your environment: Replace {environment id} with your actual Environment ID.

pac env select --environment {environment id}

4. Install Dependencies and Initialize: Install the necessary packages and initialize the Code App configuration.

npm install
pac code init --displayname "App From Scratch"

---

💻 Local Development

To test your app locally before deploying:

1. Run the development server:

npm run dev

2. Open the App:

• Look for the URL labeled Local Play in your terminal output.
• Important: Open this URL in the same browser profile where you are signed into your Power Platform tenant. You should see your blank app running locally.

---

📦 Build and Deploy

When you are ready to publish your app to Power Apps, use the build and push commands.

One-Step Deploy:

In your terminal, run the combined build and push command:

npm run build
pac code push --solutionName <solutionName>

What this does:

• npm run build: Runs the build scripts (tsc -b && vite build) defined in your package.json.
• pac code push: Publishes the new version of the Code App to your selected Power Platform environment.

Verification If successful, the command will output a Power Apps URL.

• Click the URL to open your app directly in Power Apps.
• You can now play, share, or view details of your app from the Power Apps portal.

---

🔗 Reference Library & Resources

Official Documentation

• Power Apps code apps overview
• Power Platform CLI Documentation
• How to: Connect your code app to data
• Troubleshoot adding a data source