Let's take a look into Power Platform Code Apps – part 1

Last week, I had the pleasure of presenting the results of my first attempts to build a Power Platform Code App during an internal meeting in the organization I’m currently working for. During the demo I was trying to present the process of Power Platform Code app creation together with connections into Microsoft Dataverse and Azure SQL Server data sources. I would also like to share some of my findings here. I hope it will let you avoid my errors and save your time when implementing your first Power Platform Code App.

I would like not to go into details about what Power Apps Code Apps are here. In case you’ve never heard of this technology, please read the following article from Microsoft Docs: https://learn.microsoft.com/en-us/power-apps/developer/code-apps/architecture. It is still in Preview version so try not to use it in production environments.

For the purpose of the Code Apps-related articles series, let’s try to create a Power Platform Code App named “ABC,” which will query and present data from the Dataverse Contact table and data from the Payment table inside the Azure SQL Server db-codeappdemo database.

The first step is to create a default application using npm and a Vite/React template. For those of you who didn’t hear about Vite, it is a new front-end solutions packager, a little similar to webpack, but (according to its creators) offering much better performance regarding initial faster startup and development process.

npm create vite@latest MyAppName -- --template react-ts

After executing above-mentioned command in the command line and answering few questions – we can see the following application inside our local browser.

Let’s make it clear – the application we’re currently looking at is not a Power Platform Code App. We need to execute some additional steps to make it working and ready to deploy into Power Platform environment.

1. Initialize Power Platform Code Application inside previously created ABC solution folder:

    pac code init --displayName “ABC"
   

2. Update vite.config.ts file to looks like the example below:

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

3. Replace "dev" script from package.json file from “vite” into “start pac code run && vite”

4. Download PowerProvider.tsx file from PowerAppsCodeApps/docs/assets/PowerProvider.tsx at main · microsoft/PowerAppsCodeApps and add it into your “src” folder.

5. Update your main.tsx file to looks like below:

    import { StrictMode } from 'react'
    import { createRoot } from 'react-dom/client'
    import './index.css'
    import PowerProvider from './PowerProvider.tsx'
    import App from './App.tsx'
   
    createRoot(document.getElementById('root')!).render(
      <StrictMode>
        <PowerProvider>
          <App />
        </PowerProvider>
      </StrictMode>,
    )
   

6. Install Power Apps SDK Package (https://www.npmjs.com/package/@microsoft/power-apps):

    npm install --save "@microsoft/power-apps“
   

7. Finally Run:

    npm run build
   

After all the above-mentioned operation, we should finally be able to run our app in the local environment. Or wait… When I started it with “npm run dev” command – I got the following error: “This app stopped working. Try refreshing your browser.” My only thought was “Meh”…

What I did as a last operation was updating environmentId value inside power.config.json file to be the one representing my selected environment in PAC CLI. I have no idea why was it required because I’ve never done any deployment in case of my app. Nevertheless, it has magically started working, and I was finally able to run in on my local computer.

The last step was to release my app into Power Platform environment using pac code push command. Remember that you need to enable Power Platform Code Apps support in your environment settings. After deployment operation completed, you will be able to run your application in the cloud, and it will be available from the Power Apps Maker portal.

Next time, I’ll show you how to connect to Dataverse and SQL Server database data sources using Power Platform connectors.