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. This guide is essential for anyone interested in learning How To Create Code App From Scratch.

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. Create Folder on desktop and open in vs code editor.
2. open vs code terminal & run below command

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

1. If asked, agree to install create-vite
2. Accept the default package name appfromscratch by pressing Enter.
3. If asked to select a framework, select React.
4. If asked to select a variant, select TypeScript.
5. 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"),
    },
  },
});

1. Save the file.
2. Enter the following to test your Vite app:

npm run dev

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

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

Sign in using your Power Platform account when prompted.

Select your environment using:

pac env select -env <URL of your environment> 

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.

Install the Power SDK using

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

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

"dev": "vite" 

Change it to:JSON

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

Save the updated package.json.

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

Save the file.

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

import PowerProvider from './PowerProvider.tsx'

Update main.tsx:TypeScript

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

Change it to:TypeScript

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

Save the file.

You can now test the code app by using:PowerShellnpm run dev This runs the Vite server, but also starts the Power SDK server:

Open the URL provided by the Power SDK Server. Important

1. You should see the app open similar to: