18 Nov, 2025

Building a Power Apps Code-First Application from Scratch: A Step-by-Step Guide

Posted on 18 Nov, 2025 by Rohit Bhagat, Posted in Microsoft Power Platform Power Apps

Blogs

Introduction:

Power Apps has long supported rapid app development with low-code/no-code tools. With Code-First Apps, developers can now create fully customised applications using familiar coding frameworks. This guide demonstrates how to build a Code-First App from scratch and deploy it to your Power Platform environment.

Pre-requisite:

Before you start, ensure you have the following:

• Visual Studio Code
• Node.js (LTS version)
• Power Apps CLI (PAC CLI)
• Power Platform environment with Code Apps enabled

Step 1: Environment Setup

• Go to the Power Platform Admin Center.
• Select your environment.
• Navigate to Settings → Product → Features → Enable Code Apps.
• Save the changes.

Note: If you don’t see the toggle, ensure your environment has the latest admin updates and preview features enabled.

Step 2: Project Initialization

Before creating the project, open your terminal in the directory where you want to store your Code App files to keep your workspace organized.

1.  Create a new project in your terminal:

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

       During this setup:

• If asked, agree to install create-vite by typing y.
• Accept the default project name (AppFromScratch) by pressing Enter.
• When prompted, choose React as the framework.
• For the variant, select TypeScript.

    2. The Power Apps SDK currently requires the app to run on port 3000.
         Install Node.js type definitions for TypeScript to avoid errors in your editor:

• npm i --save-dev @types/node

Once these commands are executed, a new React-based project structure will be created in your selected directory, containing all the initial files required to start building your Code App.

     3. Open the vite.config.ts, and update to be:

• import { defineConfig } from 'vite'
  import react from '@vitejs/plugin-react'
  import * as path from 'path'

  // https://vite.dev/config/
  export default defineConfig({
    base: "./",
    server: {
      host: "::",
      port: 3000,
    },
    plugins: [react()],
    resolve: {
      alias: {
        "@": path.resolve(__dirname, "./src"),
      },
    },
  });

   4.  After setup, run this command in your project folder:

• npm run dev

The terminal will show a local URL (usually http://localhost:3000). Press Ctrl + Click on the URL to open your app in the browser.

Important: If you don't see port 3000, then revisit the previous steps.

 5. Press Ctrl + C to stop the server.

Initialize your code Component

Now that your project is ready, it’s time to connect it to your Power Platform environment and initialize it as a Code App.

Step 1: Authenticate with the Power Apps CLI:
           Open your terminal and run:

• pac auth create

         Log in with your Power Platform account when prompted.

Step 2: Select Your Environment
             Choose the environment where you want to create your app:

• pac env select -env < select your environment >
  

Step 3: Initialize the Code App
           Run this command to set up your app as a Power Apps Code-First project:

• pac code init --displayName "App From Scratch"

Step 4: Install the Power SDK
          Now install the Power Apps SDK so your app can connect with Power Platform:

• npm install --save @microsoft/power-apps

Step 5: Update package.json
         Open your package.json file and find this line:

• "dev": "vite"
  
  Change it to:
  
  "dev": "start pac code run && vite"

       This makes sure both the Power SDK and your app start together

Step 6: Add PowerProvider File
         Create a new file in the src folder named PowerProvider.tsx.
         Copy the code from Microsoft’s GitHub here:
          PowerProvider.tsx (GitHub)

Step 7: Update main.tsx File
          Add this import line:

• import PowerProvider from './PowerProvider.tsx'

         Then wrap your component like this and save it.

Step 8: Run and Test Your App

• npm run dev

             It starts both the Vite development server and the Power SDK server.

        Press Ctrl + Click on the URL to open your app in the browser.
        If it doesn’t open automatically, copy the URL and paste it into the same browser where you are signed in to Power Platform.

Important: Open the app URL in the same browser where you are signed in to Power Platform. This makes sure it works correctly.

Step 9: Build and Push Your App to Power Platform
             Once your app is ready and tested locally, it’s time to publish it to your Power Platform environment.
             Open your terminal in the project folder.
             Run the command:

• Build the app:
  npm run build
• Push the app to your Power Platform environment:
  pac code push

          If the command runs successfully, you’ll get a Power Apps URL that lets you open the app.

         You can also open Power Apps directly to view the app. From there, you can play, share, or view its details.

 Congratulations! You’ve successfully pushed your first Power Apps Code-First