Power Apps Code Apps + SvelteKit

A starter template for building Power Apps code apps with SvelteKit, Tailwind CSS, and TypeScript.

Prerequisites

• Node.js (LTS)
• pnpm
• Power Platform CLI
• A Power Platform environment with code apps enabled

Getting started

Scaffold a new project from this template:

pnpm dlx degit chumleesockson/power-apps-code-apps-sveltekit my-app
cd my-app

Authenticate, select your environment, install dependencies, and initialize your code app:

pac auth create
pac env select --environment <your-environment-id>
pnpm install
pac code init --displayname "My App"

Developing

Start the dev server:

pnpm dev

Open the Local Play URL printed in the terminal to test inside the Power Apps host. Open it in the same browser profile as your Power Platform tenant.

Building and publishing

Build and push to Power Apps in one step:

pnpm build | pac code push

Connecting to data

Add a data source using the PAC CLI. For example, to add a Dataverse table:

pac code add-data-source -a dataverse -t <table-logical-name>

For other connectors (e.g. Office 365 Users, SQL), use a connection reference for portability across environments:

pac code add-data-source -a <apiName> -cr <connectionReferenceLogicalName> -s <solutionId>

This auto-generates typed model and service files in generated/. Use them in your Svelte components:

<script lang="ts">
  import { AccountsService } from './generated/services/AccountsService';
  import type { Accounts } from './generated/models/AccountsModel';

  const result = await AccountsService.getAll();
</script>

See the full guide: Connect to data | Connect to Dataverse

Project structure

src/
  app.html          - HTML shell (includes Power Apps URL fix)
  routes/
    +layout.svelte  - Root layout with Tailwind CSS
    +layout.ts      - Disables SSR for static SPA output
    +page.svelte    - Home page
svelte.config.js    - SvelteKit config (adapter-static -> dist/)
vite.config.ts      - Vite config with Power Apps and SvelteKit plugins
power.config.json   - Power Apps metadata (managed by SDK/CLI)

Key configuration

• adapter-static outputs to dist/ to match power.config.json's buildPath
• paths.relative ensures asset paths work on the Power Apps CDN
• app.html includes a history.replaceState fix so SvelteKit's router handles the deep URL path Power Apps serves from
• @microsoft/power-apps-vite provides the Vite plugin for local dev play and CORS

Other commands