Canvas Apps

Power Apps code apps guide: how to build, deploy, and run them in production

José Martínez Lago

José Martínez Lago

— 3 min read
Power Apps code apps guide: how to build, deploy, and run them in production

Power Apps code apps are one of the most interesting shifts in the platform right now. You get a code-first developer experience in your IDE, while still deploying and operating on a managed Power Platform runtime.

If you are asking how to write them, deploy them, and avoid painful mistakes, this guide is for you.

What are Power Apps code apps

Code apps let you build custom web apps with frameworks like React or Vue, develop locally, and then run those apps in Power Platform. You keep control over your UI and business logic, while using Power Apps capabilities like connector access, Entra auth, and managed platform controls.

Why this model matters

  • Code-first development in VS Code and standard web tooling.
  • Power Platform hosting and governance in production.
  • Access to Power Platform connectors from JavaScript through the SDK.
  • Policy coverage such as Conditional Access and DLP enforcement at launch.

Prerequisites checklist

  • Power Platform environment with code apps enabled.
  • Node.js LTS.
  • Git.
  • Power Apps CLI (PAC).
  • Visual Studio Code (recommended).
  • Power Apps Premium licensing for end users who run code apps.

How to write a code app from scratch

Step 1. Scaffold a starter

Microsoft’s quickstart uses a Vite template. Typical flow:

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

Step 2. Authenticate and select environment

pac auth create
pac env select --environment <environment-id>

Use the environment you actually plan to publish into.

Step 3. Install dependencies and initialize the app

npm install
pac code init --displayname "My Code App"

Step 4. Run local dev

npm run dev

Open the Local Play URL in the same browser profile used for your Power Platform tenant.

Step 5. Build and publish

npm run build
pac code push

After a successful push, you get a Power Apps URL where the app can be run and shared.

Architecture you should understand before scaling

Code apps are easier to troubleshoot when you separate concerns:

  • Your code for UI and business logic.
  • Power Apps SDK for APIs and generated connector models/services.
  • power.config.json for metadata used by SDK and CLI.
  • Power Apps host for end-user auth, app loading, and runtime messaging.

Deployment and ALM done right

Use solutions from day one

Do not leave deployments in default solution land. Use a non-default solution and preferably set a preferred solution so pac code push lands in the right place by default.

Target specific solution when needed

pac code push --solutionName <solutionName>

Move through stages with pipelines

Once in solution, use Power Platform Pipelines for Dev → Test → Prod, with dependency checks and cleaner promotion flow.

Security baseline and CSP strategy

CSP in code apps is environment-level and enforced by default. Treat it as a first-class production control, not a checkbox.

  • Start with defaults and only add sources you can justify.
  • Use reporting mode endpoint early to detect violations before hard enforcement changes.
  • Document every custom directive addition with business reason.

If you automate CSP, Microsoft documents environment settings APIs and helper PowerShell patterns.

Best practices that save real time

  1. Use read-first data paths first when introducing new connector logic.
  2. Pin toolchain versions (Node, PAC, SDK) in CI and team docs.
  3. Treat environment selection as code to avoid wrong-target pushes.
  4. Instrument early with health metrics and App Insights where applicable.
  5. Keep ALM boring by standardizing solution names and promotion flow.

Known limitations you should plan for

  • No Power Platform Git integration support (at time of writing).
  • No SharePoint forms integration support.
  • No support in Power Apps mobile app / Power Apps for Windows.
  • No code apps solution packager support in current ALM limitations.

Common mistakes teams make

  • Building fast locally but skipping solution discipline.
  • Letting CSP grow without governance.
  • Ignoring browser local-network restrictions during dev and misdiagnosing failures.
  • Mixing environments manually instead of explicit pipeline paths.

Final take

Power Apps code apps are not “canvas apps with extra steps.” They are a serious code-first path for teams that want web engineering speed with enterprise platform controls. If you combine strong ALM, clear security boundaries, and disciplined deployment, this model scales very well.

References

Read more