A Power Apps code app is just a Vite app, and that single fact unlocks your whole frontend toolbox. The official Microsoft template ships React with TypeScript, so many makers assume React is mandatory. It is not. Because the platform glue lives in the Vite layer, you can build a Power Apps code app with the framework your team already knows. This guide proves that claim with builds we actually tested, and it gives you one recipe that works across stacks.
A Power Apps code app running locally across several Vite frameworks
Note: Since Power Apps SDK v1.0.4, the preferred CLI is the npm-based CLI (npx power-apps). This replaces the old pac code commands (deprecated), previously making it available to choose the Vite frameworks. That is no longer directly available and because of this I decided to write this walkthrough.
What actually makes a Power Apps Code App
To understand why framework choice is free, look at what the platform requires. Specifically, three framework-agnostic pieces turn any Vite app into a Power Apps code app.
First, the @microsoft/power-apps package provides the SDK and the power-apps npm CLI, which runs init, run, and push. Second, the @microsoft/power-apps-vite package provides a Vite plugin called powerApps(). That plugin sets the asset base path to relative, configures CORS for the player domains, serves your power.config.json, and prints the Local Play URL. Third, the power.config.json file points the app at your environment and needs little more than an environment id.
Notably, none of these pieces is React-specific. Moreover, the current template carries no provider component and no init call in application code. Therefore the work that once felt React-shaped now lives entirely in Vite and the SDK. That is precisely why a Power Apps code app runs on any Vite stack.
The tested results
We did not assume compatibility; instead, we scaffolded each stack, added the plugin, and ran a production build. A build counts as a pass when it exits cleanly and emits relative ./assets/... paths in dist/index.html, because that relative path proves the powerApps() plugin took effect.
| Framework | Slot-in effort | Bundle |
|---|---|---|
| React (official) | built in | ~192 KB |
| Vue | one plugin line | ~64 KB |
| Svelte | one plugin line | ~36 KB |
| Solid | one plugin line | ~16 KB |
| Preact | one plugin line | ~20 KB |
| Angular | Vite-native setup | ~100 KB |
In short, five of six stacks are literal drop-ins. Angular is the instructive exception, which we cover below.
One recipe for any create-vite stack
Because the glue is shared, the path is the same for React, Vue, Svelte, Solid, and Preact. First, scaffold any Vite template (below is an example for vue with typescript, for javascript developers, the templates can be changed from vue-ts to vue):
npm create vite@latest#main *appname* -- --template vue-ts
cd my-app && npm install
Next, add the SDK and the Vite plugin:
npm install @microsoft/power-apps
npm install -D @microsoft/power-apps-vite
Then add powerApps() to the plugins array in vite.config.ts:
import { powerApps } from '@microsoft/power-apps-vite/plugin'
// plugins: [<framework-plugin>(), powerApps()]
After that, bind the app to your environment, which opens a browser sign-in and writes power.config.json:
npx power-apps init -n "My App" -e <environment-id>
Finally, develop and publish:
npm run dev
npm run build && npx power-apps push
When the dev server starts, the plugin prints a Local Play URL; open it in the same browser profile as your tenant. After the push, the CLI returns a live app URL.
Choosing your Power Apps code app stack
Each framework brings a different trade-off, so pick the one your team will maintain happily. I made this post, because different companies that I’ve been working with has different stack defined as standards across the developer teams.
- For the smoothest start, a React code app needs zero setup, since the official template is already wired.
- For a popular and approachable alternative, a Vue code app drops in with one plugin line.
- For the lightest footprint, a Svelte code app compiles components away.
- For the smallest bundle and fine-grained reactivity, a SolidJS code app is hard to beat.
- For the easiest React migration, a Preact code app keeps the React API at a fraction of the size.
- For Angular teams, an Angular code app works too, although it needs a Vite-native setup (using AnalogJS) which requires some additional technical knowledge.
Angular is the exception
Angular deserves a special mention, because it shows the boundary of the paradigm. Unlike the others, Angular is not a create-vite template, and its CLI hides the Vite config you would normally edit. Therefore you cannot simply add the powerApps() plugin to a plugins array.
To make an Angular code app, you run Angular on a Vite config you control through the AnalogJS vite-plugin-angular. Once you do, the same three pieces apply and the build passes. However, watch the tsconfig: a misconfigured tsconfig.app.json can produce an empty bundle while still reporting success. Consequently, Angular is best used to teach the rule rather than to start fresh: when a framework hides Vite, you bring Vite back.
Connecting to data is also framework-neutral
Data access does not change your decision either. When you add a connector for Dataverse, SharePoint, or Office 365, the CLI generates plain TypeScript services under src/generated/. Because those services carry no framework dependency, you call XxxService.getAll() from a React hook, a Vue composable, a Svelte store, a Solid resource, or an Angular service. As a rule, keep the connector surface small; aim for ten connectors or fewer per app to avoid load-time and save issues.
How we tested every stack
Because claims are cheap, we validated each framework the same way. First, we scaffolded the project and added the powerApps() plugin. Next, we created a placeholder power.config.json so the tooling had an environment id to read. Then we ran the production build and inspected the output. Finally, we confirmed two things: the build exited cleanly, and dist/index.html referenced its assets with relative paths. Every stack in the table cleared that bar, which is why we can recommend any of them with confidence.
This was deliberately a local build check rather than a full deploy. We did not run init or push against a live tenant, since those steps require an interactive sign-in. However, the commands are identical across stacks, so the deploy path behaves the same once your environment is connected.
The takeaway
A Power Apps code app frees you from a single-framework mandate. Because the glue is a Vite plugin plus a small config, your existing skills transfer directly. So start from the stack your team knows, follow the shared recipe, and ship.
For the authoritative platform reference, see the Power Apps code apps documentation on Microsoft Learn.
Leave a Reply