This guide walks through how to set up an blank app from vite and turn it into a Power Apps Code Apps.

This guide covers:

• Configuring a TypeScript app using the Power Platform SDK

• Power Platform environment with Code Apps enabled
• Visual Studio Code
• Node.js (LTS version)
• Power Platform Tools for VS Code

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 you are asked, agree to install create-vite

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

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

5. If you are 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 defintions 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 are developing on macOS, you may need to update package.json to not reference ‘start vite’. For instance you’d change the dev entry from

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

to

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

1. The template project will start and run locally. Browse to the http://localhost:3000 address given.
   

[!IMPORTANT] If you do not see the port 3000, then revisit the steps above.

9. Press Ctrl + C to stop the local server when you have checked it runs ok.

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

   pac auth create

   Login as your Power Platform account when prompted.

[!NOTE] You can also use the Power Platform Tools VS Code Extension to do this.

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 is now a power.config.json file in your project.

4. Install the Power SDK using:

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

[!IMPORTANT] This SDK is currently not yet available on npmjs.com and must be installed from the GitHub release.

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

   "dev": "vite"

   to be:

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

   [!NOTE]
   If you are developing on macOS, use:

   "dev": "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 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>,
   

   to be

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

10. Save the file

11. 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:
    

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: