Power Apps Code — React Project Structure Explained (PAC CLI)

When you scaffold a Power Apps Code app with the Power Platform CLI (PAC CLI), you get a modern React + Vite + TypeScript project with a specific layout. This guide walks every folder and file in that project, explains what each part does, and flags which ones you should never edit by hand — so you can build better, faster Power Apps whether you are a developer or a maker.

The project at a glance

A typical PAC CLI React project looks like this:

powerapp-react-sample/
├─ node_modules/        Dependencies (installed by npm)
├─ public/              Static assets served as-is
├─ src/                 Your source code
│  ├─ assets/           Images, icons, fonts
│  ├─ generated/        Auto-generated code (do not edit)
│  ├─ App.tsx           Root React component
│  ├─ main.tsx          Application entry point
│  └─ index.css         Global styles
├─ .power/              PAC CLI metadata & config
├─ index.html           HTML entry point (Vite)
├─ package.json         Metadata, scripts, dependencies
├─ power.config.json    Power Apps project configuration
├─ vite.config.ts       Vite build & dev-server config
├─ tsconfig.json        TypeScript configuration
├─ .eslintrc.cjs        ESLint rules
└─ .gitignore           Files Git should ignore

.power — the CLI's internal workspace

The .power folder stores Power Apps CLI metadata and project configuration. It is created automatically by the PAC CLI and holds internal files and settings used by Power Apps tooling.

• Created automatically by the PAC CLI.
• Stores internal metadata and configuration.
• Used during build, test and deployment.
• Don’t modify it unless you really need to — think of it as Power Apps’ internal workspace.

node_modules — your dependencies

The node_modules folder contains every installed npm package and dependency. When you run npm install, all required packages are downloaded and stored here.

• Typical packages: react, react-dom, typescript, vite, @microsoft/powerapps-component-framework, and many more.
• Never edit files inside this folder manually.
• Don’t commit it to source control — it is excluded via .gitignore and can always be rebuilt with npm install.

public — static files served as-is

The public folder stores static files that are copied directly to the root of the build output, untouched by the build tool. Use it for assets that don’t need processing.

• Examples: images (jpg, png, svg), favicon.ico, manifest.json and other static files.
• Best practice: keep only static assets here — never code or secret files.

src — the heart of your app

The src folder is where you’ll spend most of your time. It contains all of your application’s source code: components, screens, styles, logic and generated code.

• assets/ — images, icons, fonts and other static assets used by your code.
• generated/ — auto-generated code and APIs (do not edit — see below).
• Components / Screens — the React components and screens that make up your app.
• Styles — CSS / SCSS / global styles.
• Logic & utilities — custom hooks, context, services and helper functions.

generated — auto-generated code (hands off)

The generated folder holds code and artifacts created automatically by the Power Apps framework and CLI: generated APIs, TypeScript models and types, solution metadata, and other files the Power Apps runtime needs.

• Generated API clients and functions.
• Models & types (TypeScript types and data models).
• Solution metadata and configuration.

Important: don’t modify or delete files here manually — your changes may be lost on the next generation, or worse, break your app.

App.tsx — the root component

App.tsx is the main React component of your app. It loads and renders your screens, handles routing and navigation, and provides layout and any global providers. It’s generated by the template but fully customizable.

import { BrowserRouter, Routes, Route } from 'react-router-dom'
import CustomersScreen from './CustomersScreen'

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<CustomersScreen />} />
      </Routes>
    </BrowserRouter>
  )
}

export default App

• Main parent component and the root of your React component tree.
• Loads and renders your screens; handles routing and navigation.
• The natural place to wrap global state, context or providers.
• Keep it clean and modular — every screen is rendered from here.

main.tsx — the entry point

main.tsx is the entry point that starts your React application. It creates the root React element, renders <App /> into the DOM, and loads your global CSS. It runs only once, when the app starts.

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './index.css'

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
)

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
)

The flow is simple: main.tsx is executed → React is initialized → the App component is rendered → your UI appears in the browser. Without main.tsx, your React app won’t start at all, so avoid changing it unless you know what you’re doing.

package.json — project configuration

package.json defines your project metadata, dependencies, scripts and other settings. It’s the heart of your project configuration.

{
  "name": "powerapp-react-sample",
  "version": "1.0.0",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "lint": "eslint ."
  },
  "dependencies": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "@microsoft/powerapps-component-framework": "latest"
  },
  "devDependencies": {
    "typescript": "^5.4.5",
    "vite": "^5.2.0"
  }
}

• Dependencies — every npm package your project uses.
• Scripts — npm run dev (dev server), npm run build (production build), npm run preview (preview the build), npm run lint.
• Metadata & configuration — name, version, and settings used by tools.

Best practice: you rarely edit this by hand — add packages with npm install <package-name>.

power.config.json — Power Apps project settings

power.config.json configures your Power Apps project settings and behavior. The PAC CLI and development tools read it to understand how to build, run and deploy your app.

{
  "app": {
    "id": "YOUR-APP-ID",
    "name": "PowerApp React Sample",
    "version": "1.0.0.0"
  },
  "solution": {
    "publisher": "nextm365",
    "name": "PowerAppReactSample",
    "version": "1.0.0.0"
  },
  "deploy": {
    "environmentName": "Default-xxxxxxxx-xxxx",
    "msalType": "Public",
    "connectionReferences": []
  },
  "featureFlags": {
    "enableReactStrictMode": true
  }
}

• Project & solution settings — app id, name, version, publisher and solution name.
• Environment & deployment — default environment and connection details.
• Feature flags — enable or disable specific framework features.

Best practice: avoid manual changes unless necessary — prefer PAC CLI commands to update settings, so your project stays consistent across environments and teammates.

Vite & TypeScript config files

The rest of the root files come from the Vite + TypeScript template and power your development experience.

• vite.config.ts — Vite configuration: build options, plugins, aliases and dev-server settings.
• tsconfig.json — TypeScript compiler options, module resolution and paths.
• tsconfig.node.json — TypeScript config for the Node/Vite environment (build tools and scripts).
• index.html — the main HTML file Vite uses as the entry point to load your app.
• eslint.config.js (or .eslintrc.cjs) — ESLint rules for code quality and consistency.
• .gitignore — the files and folders Git should ignore (like node_modules and dist).

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: { '@': '/src' }
  },
  server: { port: 3000 }
})

Key takeaways

• This structure is created for you by the PAC CLI — you don’t assemble it by hand.
• Focus your custom code in the src/ folder; that’s where you build.
• Leave generated/, .power/ and node_modules/ alone.
• Commit regularly to source control, and use PAC CLI + Vite commands to manage the project.

Know the layout once, and every Power Apps Code project feels familiar — you’ll always know exactly where your code goes and which files to leave to the tooling.

---

Keywords: Power Apps Code, PAC CLI, Power Apps React project structure, React Vite TypeScript, .power folder, generated folder, App.tsx, main.tsx, package.json, power.config.json, vite.config.ts, tsconfig.json, Power Platform pro-code.