Part 1: Creating Code Apps in Power Apps - A step-by-step guide (with real errors I faced & how I fixed them)

Intro

In this post I’ll walk you through how I set up a code-based app for Power Apps (React/Vite front-end + Power Platform CLI for packaging/deployment), the exact errors I ran into, and how I solved them. If you want a hands-on, copy-paste able guide that covers Node versions, pac auth, environment issues, and packaging tips, this is for you.

Prerequisites

  • Microsoft 365 account with access to a Power Platform environment

  • Node.js (20.19+ recommended LTS)

  • VS Code

  • Install power platform tools extension in VS Code.

Steps:

Step 1: Open Visual Studio Code and launch the integrated terminal.

Step 2: In the terminal, run the following commands one by one.
 mkdir D:\CodeApps -Force
cd D:\CodeApps
npm create vite@latest myfirstapp -- --template react-ts
cd D:\CodeApps\myfirstapp
npm install

Initially, I ran the command:
npm create vite@latest MyFirstApp -- --template react-ts
This gave the error:
Invalid package.json name
The issue was caused because package.json names must be lowercase. After changing MyFirstApp to myfirstapp, the issue was resolved.

Step 3: Install the Node.js type definitions by running the command:
npm i --save-dev @types/node

Step 4: Open the vite.config.ts file and update it as follows:

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"),
    },
  },
});

save the file.

Step 5: Test your Vite app by running the command:

npm run dev

This will start the template project locally.
Open your browser and navigate to http://localhost:3000
to see the app running.
image-20250530184115434
Once you’ve confirmed it’s working, press Ctrl + C in the terminal to stop the local server.

Step 6: Initialize your Code App
To authenticate the Power Platform CLI against your Power Platform tenant, run:
pac auth create

You will be prompted to log in with your Power Platform account.
In my case, this command opened a blank popup screen and did not work.
If you face the same issue, use the alternative command:

pac auth create --deviceCode

After running this, you’ll see a message like:
To sign in, use a web browser to open the page https://microsoft.com/devicelogin 
and enter the code 123ABCDE to authenticate.

Now, open the URL in your browser, enter the code, and sign in with your account to complete the authentication.

Step 7: Select Your Environment
Run the following command to select your target environment:
pac env select -env <URL of your environment>

You can find the environment URL by following these steps:
Open make.powerapps.com
Go to Settings (⚙️)
Click Session details
Copy the Instance URL and paste it into the command.

Step 8: Initialize Your Code App
Run the following command to initialize your Code App:

pac code init --displayName myfirstapp

After running this, you will see a new file created in your project:
-power.config.json → This file contains the configuration details for your Code App.

Step 9: Install the Power SDK using:

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"

Step 10: Open the package.json, and update the existing line:
"dev": "vite"
to be:
"dev": "start pac code run && vite",
Save the updated pacakage.json.

Step 11: Add a new file under the src folder named PowerProvider.tsx and add the below code.
import { initialize } from "@pa-client/power-code-sdk/lib/Lifecycle";
import { useEffect, type ReactNode } from "react";

interface PowerProviderProps {
    children: ReactNode;
}

export default function PowerProvider({ children }: PowerProviderProps) {
    useEffect(() => {
        const initApp = async () => {
            try {
                await initialize();
                console.log('Power Platform SDK initialized successfully');
            } catch (error) {
                console.error('Failed to initialize Power Platform SDK:', error);
            }
        };
        
        initApp();
    }, []);

    return <>{children}</>;
}



Save the file.

Step 12: Open main.tsx and add the following import under the existing imports:

import PowerProvider from './PowerProvider.tsx'

Step 13: Update main.tsx

<StrictMode>
  <App />
</StrictMode>,
to be

<StrictMode>
  <PowerProvider>
    <App />
  </PowerProvider>
</StrictMode>,
Save the file


Step 14: You can now test the Code App by using:

npm run dev
This will run the vite server, but also start the Power SDK server:

Open the URL provided by the Power SDK Server. Important: Open the url in the same browser profile as your power platform tenant.

You should see the app open similar to:


Step 15: Publish the App to Your Power Apps Environment
To publish your app, first build the project with:

npm run build

Then push it to your Power Apps environment using:

pac code push

When I ran this, I encountered the following error:

Error: There was an error in pushing the app: bolt.authentication.http.AuthenticatedClientException: 
The environment '12b12ada-c234-e123-b84f-e123123' in tenant 'bd4a9f7e-t52e-4123-4312-432d123123we' 
does not allow this operation for this Code app 'n34cd6bc-12a0-3x23-834f-72343efd5688'. 
Please reach out to your environment admin to enable Code app operations.

This means that Code app operations are disabled in the selected environment.
To fix this, the environment administrator must enable the feature in the Power Platform Admin Center.

First you need to turn on this feature.

Go to Power Platform Admin center> Manage > Environment > Click On Settings > expand product 

Click Features > turn on toggle Enable code apps.

After if you run 
pac code push

you might still get the same error.
If that happens, remove your authentication profile and re-authenticate.

Then, reconnect the user by following Step 6 (Initialize your Code App)

Step 16:
Finally, run the following command to publish your app to the selected Power Apps environment:

pac code push

This will successfully push your code app into the environment, making it available inside Power Apps.


Comments

Post a Comment

Popular posts from this blog

Step-by-Step Guide: Power Automate Custom Connector Using Graph API from Azure App Service

Image
Step 1: Open Power Automate, navigate to the Custom Connectors tab, and select Create from blank as shown in the image below. custom connector(click image for better resolution) Step 2: In the General tab, upload an icon (less than 1MB), add a description, select the correct scheme (in my case, HTTPS ), and provide the host name. For example, if your API URL is https://graph.microsoft.com/v1.0/users/{email} , the host name will be the highlighted part — graph.microsoft.com . Step 3: Go to the Security tab. Here, you need to select the authentication method. Choose OAuth 2.0 as the authentication type, as shown in the image below. Step 4: Select the Identity Provider as Azure Active Directory . Check the box Enable Service Principal Support . This option allows you to create a connection using a Client ID and Client Secret instead of using the user's own authentication. Next, provide the Client ID , Client Secret , Tenant ID , and other required details as shown in t...
Read more

Calling Microsoft Graph API from Power Automate Using Azure App Services – Step-by-Step Guide

Image
Step 1: You should have an Azure subscription, or if you have access to the Microsoft Entra Admin Center, you can create an app from there. This app can then be used in Power Automate to connect to Microsoft Graph API. Step 2: Click on "New registration" , provide a name for your app, assign the required API permissions (such as Microsoft Graph permissions), and then click "Register" to complete the app registration process. Step 3: After registration, you'll be redirected to the app's overview page. From there, navigate to the API permissions tab and click "Add a permission" to assign the necessary Microsoft Graph API permissions. Step 4: Select Microsoft Graph as the API, and based on your requirements, choose the appropriate permissions. In my case, I selected Application permissions , which do not require user sign-in and are suitable for background services or automation. Step 5: Select the required Microsoft Graph API permissions. Yo...
Read more

Step-by-Step: Give Unique Permissions to OneDrive Files Using Power Automate and Graph API (No Premium License Needed)

Image
We are uploading files through Power Apps using the Attachment control. In the backend, a Power Automate flow uploads these files to OneDrive and assigns unique permissions . Since Power Automate does not have a built-in connector to directly assign unique permissions in OneDrive, we are handling this through the Microsoft Graph API (without using a custom connector). Step 1: Create a Blank Power Apps Application Open Power Apps Studio. Select New app > Start with a page design as shown below. Step 2 :  select Blank Canvas  Step 3: Add an Attachment Control In Power Apps, the Attachment control is not available directly from the standard controls list. To get the Attachment control: Add an Edit Form to your app. Connect the form to a SharePoint list . Once connected, the form will automatically include the Attachments field. You can then use this Attachment control to upload files. Step 4: Keep Only the Attachment Control Since we only need th...
Read more