How to: Create a code app from scratch (preview)

This article walks through how to set up a blank app from Vite and turn it into a Power Apps code app. It covers configuring a TypeScript app using the Power Platform SDK

Prerequisites

• Power Platform environment with code apps enabled
• Visual Studio Code
• Node.js Long term support (LTS) version
• Power Platform Tools for VS Code

Initialize your Vite App

1. Open Visual Studio Code and open a new PowerShell terminal and enter:

   mkdir C:\CodeApps -Force
   cd C:\CodeApps
   npm create vite@latest AppFromScratch -- --template react-ts
   cd C:\CodeApps\AppFromScratch
   npm install
   

2. If asked, agree to install create-vite

3. Accept the default package name appfromscratch by pressing Enter.

4. If asked to select a framework, select React.

5. If asked to select a variant, select TypeScript.

6. At this time, the Power SDK requires the port to be 3000 in the default configuration.

   Install the node type definition using:

   npm i --save-dev @types/node
   

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

7. Save the file.

8. Enter the following to test your Vite app:

   npm run dev
   

   Note

   If you're developing on macOS, you might need to update package.json to not reference start vite. For instance you'd change the dev entry from start vite && start pac code run:

   "scripts": {    
      "dev": "start vite && start pac code run",
      "build": "tsc -b && vite build",
      "lint": "eslint .",
      "preview": "vite preview"
    }
   

   to vite && pac code run

    "scripts": {    
      "dev": "vite && pac code run",
      "build": "tsc -b && vite build",
      "lint": "eslint .",
      "preview": "vite preview"
    }
   

9. The template project starts and runs locally. Browse to the http://localhost:3000 address given.

   

   Important

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

10. Press Ctrl + C to stop the local server.

Initialize your code app

1. Authenticate the Power Platform CLI against your Power Platform tenant:

   pac auth create
   

   Sign in using your Power Platform account when prompted.

   Note

   You can also use the Power Platform Tools VS Code Extension to do authenticate.

2. Select your environment using:

   pac env select -env <URL of your environment>
   

   You can also use the Power Platform Tools VS Code Extension to select the environment.

3. Initialize your code app using:

   pac code init --displayName "App From Scratch"
   

   Notice that there's now a power.config.json file in your project.

4. Install the Power SDK using:

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

5. Open the package.json, and update the existing line:

   "dev": "vite"
   

   Change it to:

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

   Save the updated package.json.

6. Add a new file under the src folder named PowerProvider.tsx and grab the code from github.com/microsoft/PowerAppsCodeApps/docs/assets/PowerProvider.tsx

7. Save the file.

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

   import PowerProvider from './PowerProvider.tsx'
   

9. Update main.tsx:

   <StrictMode>
     <App />
   </StrictMode>,
   

   Change it to:

   <StrictMode>
     <PowerProvider>
       <App />
     </PowerProvider>
   </StrictMode>,
   

10. Save the file.

11. You can now test the code app by using:

    npm run dev
    

    This runs the Vite server, but also starts the Power SDK server:

    

12. Open the URL provided by the Power SDK Server.

    Important

    Open the URL in the same browser profile as your Power Platform tenant.

13. You should see the app open similar to:

    

Related information

• How to: Connect your code app to data
• Power Apps CLI