A Svelte code app gives you the lightest footprint of any Power Apps stack, because Svelte compiles components away at build time. A Power Apps code app is just a Vite app, so the official React choice is not a requirement. As a result, you can scaffold Svelte with TypeScript and add one Vite plugin to get a working Power Apps code app.
This guide follows a build we actually tested. Moreover, it keeps each step short, so you can move from an empty folder to a published app quickly.
Why a Svelte code app works
The Power Apps glue sits in the Vite layer, not in framework code. Specifically, three pieces carry the load. First, @microsoft/power-apps provides the SDK and the power-apps npm CLI. Second, the @microsoft/power-apps-vite plugin sets the base path, configures CORS, serves your config, and prints the Local Play URL. Third, power.config.json points the app at your environment.
Because none of that depends on a framework, a Svelte code app needs no bridge. In fact, there is no provider and no init call to write. Therefore Svelte slots in cleanly.
Build your Svelte code app step by step
First, scaffold the Svelte stack:
npm create vite@latest my-app -- --template svelte-ts
cd my-app && npm install
Next, add the Power Apps SDK and the Vite plugin:
npm install @microsoft/power-apps
npm install -D @microsoft/power-apps-vite
Then register the plugin in vite.config.ts:
import { powerApps } from '@microsoft/power-apps-vite/plugin'
export default defineConfig({
plugins: [svelte(), powerApps()],
})
After that, bind the app to your environment:
npx power-apps init -n "My Svelte App" -e <environment-id>
Finally, run locally and publish:
npm run dev
npm run build && npx power-apps push
What to check as you go
Each step has a clear verification, so you never debug blind. For example, the build should emit relative ./assets/... paths in dist/index.html. Indeed, that relative path proves the plugin is active. Our Svelte code app build passed this check at roughly a 36 KB bundle, the smallest of the mainstream stacks.
Svelte-specific notes
One difference matters here. Because the default build script is just vite build, type-checking happens out of band. Therefore you should run npm run check, which calls svelte-check, before you push. To read context, import getContext from @microsoft/power-apps/app inside any <script lang="ts"> block. Data connectors, meanwhile, generate plain TypeScript services under src/generated/; you call XxxService.getAll() from a Svelte store.
Stress-test notes
Before publishing, we did more than build this Svelte code app – we tested it the way a real project runs. We added the extras a normal app needs (page navigation and shared state), loaded some data in the background, and called the Power Apps SDK. Then we opened the running app in an automated browser (a tool called Playwright) and confirmed it worked with no errors.
Two things are worth knowing, even if you are new to code.
Don’t make the app wait for Power Apps before it shows anything. The SDK call that reads the signed-in user (getContext()) only finishes when the app runs inside Power Apps. On your laptop it never finishes, so if your code waits for it, you get a blank screen. Just let that call run in the background instead.
Good news on navigation: nothing to configure. The router we used, svelte-spa-router, already puts a # in the address bar by default, which is exactly the mode Power Apps needs. So this Svelte code app needed no routing changes at all, which makes it one of the smoothest stacks to ship.
Where to go next
This Svelte walkthrough is one stack in a wider set. For the big picture, read the pillar guide on choosing any Vite framework for Power Apps code apps. From there you can weigh React, Vue, Solid, Preact, and Angular against your team’s skills.
For the authoritative platform reference, see the Power Apps code apps documentation on Microsoft Learn.
Leave a Reply