Build a Svelte Code App on Power Apps with Vite

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 separate @microsoft/power-apps-cli package provides the pa command-line tool. 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

If create-vite asks Install with npm and start now?, answer No and run the cd and npm install lines yourself. Saying Yes also starts the dev server, which you do not need yet. The commands are shown one per line on purpose: Windows PowerShell 5.1 rejects && between commands, while PowerShell 7, cmd and bash accept either form.

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 { svelte } from '@sveltejs/vite-plugin-svelte'
import { defineConfig } from 'vite'
import { powerApps } from '@microsoft/power-apps-vite/plugin'   // added

export default defineConfig({
  plugins: [svelte(), powerApps()],   // powerApps() added
})

After that, install the Power Apps CLI once (it provides the pa command), then bind the app to your environment. The init command opens a browser sign-in if you are not signed in yet, adds the CLI to the project as a dev dependency, and writes power.config.json. Its output ends with a hint to run npm install again; that installs the project-local copy of the CLI and is optional, because the global pa command already works:

npm install --global @microsoft/power-apps-cli
pa app init -n "My Svelte App" -e <environment-id>

Finally, run locally and publish:

pa app run
npm run build
pa app push

When pa app run starts the dev server, the plugin prints a Local Play URL. Open it in the same browser profile as your Power Platform tenant, and accept the browser’s Local Network Access prompt the first time: Chrome and Edge block calls from the player to localhost until you do. When you push, the CLI returns a live app URL.

This is what you should see when you open the live app URL: the app running inside Power Apps after pa app push, with the name you gave pa app init in the header.

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 31 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.