Power Apps Code Apps: Create Your First Code App

on


Power Apps Code Apps: Create Your First Code App


Crafting a Code App from the ground up lets you blend modern web frameworks with the Power Platform’s managed environment. In this guide, you’ll spin up a TypeScript React app using Vite, wire in the Power Platform SDK, and launch your first Code App—all within your local IDE.

Prerequisites

Before you dive in, make sure you have:

  • A Power Platform environment with Code Apps enabled

  • Visual Studio Code

  • Node.js (LTS version)

  • Power Platform CLI (pac) installed

Having these tools at your fingertips ensures a smooth setup and deployment process.

1. Scaffold a New Vite React-TypeScript App

  1. Open VS Code and launch your terminal.

  2. Create and navigate to your working folder:

    mkdir C:\CodeApps && cd C:\CodeApps

  3. Bootstrap a new Vite React-TypeScript project:

    npm create vite@latest AppFromScratch -- --template react-ts
    cd AppFromScratch
npm install

  4. Add type definitions:

    npm install --save-dev @types/node

  5. Update vite.config.ts so the dev server listens on port 3000 and uses ./ as its base:

    import { defineConfig } from 'vite'
    import react from '@vitejs/plugin-react'

export default defineConfig({
  base: './',
  server: { host: '::', port: 3000 },
  plugins: [react()],
  resolve: { alias: { '@': '/src' } }
})

  6. Run your app locally:

    npm run dev

    Open http://localhost:3000 to confirm your React app is live.

2. Authenticate the Power Platform CLI

  1. Connect pac to your tenant:

    pac auth create

  2. Follow the browser-based sign-in prompts.

  3. Optionally, use the Power Platform Tools extension for VS Code to manage authentication.

3. Initialize Your Code App

  1. If you need a First Release environment, create one:

    pac admin create --name 'Code Apps' --region 'unitedstatesfirstrelease' --type Developer

  2. Select your target environment:

    pac env select --env <ENVIRONMENT_URL>

  3. Scaffold the Code App manifest:

    pac code init --displayName "App From Scratch"

    This generates a power.config.json file to guide packaging and deployment.

4. Install the Power Platform SDK

  1. Add the Code Apps SDK as a dev dependency:

    npm install --save-dev "@pa-client/power-code-sdk@https://github.com/microsoft/PowerAppsCodeApps/releases/download/v0.0.4/7-31-pa-client-power-code-sdk-0.0.1.tgz"

  2. This library handles authentication and connector calls within your React code.

5. Wire Up the Dev Server and CLI Runner

  1. In package.json, locate the "dev" script.

  2. Change it from:

    "dev": "vite"

    to:

    "dev": "start pac code run && vite"

  3. This runs the local SDK server alongside Vite so your app can call Dataverse and other connectors during development.

6. Add the PowerProvider Component

  1. Create src/PowerProvider.tsx.

  2. Paste in the provider code from the docs to bootstrap authentication and connector context.

  3. In src/main.tsx, wrap your <App />:

    import React from 'react'
    import ReactDOM from 'react-dom'
import App from './App'
import PowerProvider from './PowerProvider'

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <PowerProvider>
      <App />
    </PowerProvider>
  </React.StrictMode>
)

7. Run and Test Your Code App

  1. In your terminal, run:

    npm run dev

  2. The SDK server will output a local endpoint URL.

  3. Open it in the same browser profile where you’re signed into your tenant.

  4. You should see your React app inside a Power Apps shell, ready to call connectors and Dataverse APIs.

8. Optional: Use the Fluent UI Sample

If you want to explore a ready-made UI built with Fluent UI, follow these steps:

  1. Clone the repository and navigate to the FluentSample folder:

    git clone https://github.com/microsoft/PowerAppsCodeApps.git
    cd PowerAppsCodeApps/samples/FluentSample

  2. Install dependencies:

    npm install

  3. Authenticate and select your environment if you haven’t already:

    pac auth create
    pac env select --env <ENVIRONMENT_URL>

  4. Review the sample’s power.config.json to see included connectors (for example, Microsoft Graph or Dataverse).

  5. Launch the sample in development mode:

    npm run dev

    This runs pac code run alongside Vite, enabling live connector calls.

  6. Open http://localhost:3000 to view the sample’s Fluent UI components in action—lists, command bars, dialogs, and theming tokens all styled with Fluent UI React.

  7. When you’re ready to deploy:

    pac codeapp push --path

  8. In the Power Apps maker portal, share the deployed FluentSample app with users.

This sample demonstrates how to integrate Fluent UI controls, themes, and Power Platform connectors in a Code App, providing a solid foundation for enterprise-grade line-of-business experiences.

Continue experimenting by adding data calls, custom connectors, and advanced UI patterns to make your Code App uniquely yours.

Comments

Post a Comment