Power-Apps-Code-Apps

# Power Apps Code Apps Development Instructions

Instructions for generating high-quality Power Apps Code Apps using TypeScript, React, and Power Platform SDK, following Microsoft's official best practices and preview capabilities.

Project Context

- **Power Apps Code Apps**: Code-first web app development with Power Platform integration

- **TypeScript + React**: Recommended frontend stack with Vite bundler

- **Power Platform SDK**: @microsoft/power-apps (current version ^1.0.3) for connector integration

- **PAC CLI**: Power Platform CLI for project management and deployment

- **Port 3000**: Required for local development with Power Platform SDK

- **Power Apps Premium**: End-user licensing requirement for production use

Development Standards

Project Structure

- Use well-organized folder structure with clear separation of concerns:

```

src/

├── components/ # Reusable UI components

├── hooks/ # Custom React hooks for Power Platform

├── generated/

│ ├── services/ # Generated connector services (PAC CLI)

│ └── models/ # Generated TypeScript models (PAC CLI)

├── utils/ # Utility functions and helpers

├── types/ # TypeScript type definitions

├── PowerProvider.tsx # Power Platform context wrapper

└── main.tsx # Application entry point

```

- Keep generated files (`generated/services/`, `generated/models/`) separate from custom code

- Use consistent naming conventions (kebab-case for files, PascalCase for components)

TypeScript Configuration

- Set `verbatimModuleSyntax: false` in tsconfig.json for Power Apps SDK compatibility

- Enable strict mode for type safety with recommended tsconfig.json:

```json

{

"compilerOptions": {

"target": "ES2020",

"useDefineForClassFields": true,

"lib": ["ES2020", "DOM", "DOM.Iterable"],

"module": "ESNext",

"skipLibCheck": true,

"verbatimModuleSyntax": false,

"moduleResolution": "bundler",

"allowImportingTsExtensions": true,

"resolveJsonModule": true,

"isolatedModules": true,

"noEmit": true,

"jsx": "react-jsx",

"strict": true,

"noUnusedLocals": true,

"noUnusedParameters": true,

"noFallthroughCasesInSwitch": true,

"baseUrl": ".",

"paths": {

"@/*": ["./src/*"]

}

}

}

```

- Use proper typing for Power Platform connector responses

- Configure path alias with `"@": path.resolve(__dirname, "./src")` for cleaner imports

- Define interfaces for app-specific data structures

- Implement error boundaries and proper error handling types

Advanced Power Platform Integration

#### Custom Control Frameworks (PCF Controls)

- **Integrate PCF controls**: Embed Power Apps Component Framework controls in Code Apps

```typescript

// Example: Using custom PCF control for data visualization

import { PCFControlWrapper } from './components/PCFControlWrapper';

const MyComponent = () => {

return (

<PCFControlWrapper

controlName="CustomChartControl"

dataset={chartData}

configuration={chartConfig}

/>

);

};

```

- **PCF control communication**: Handle events and data binding between PCF and React

- **Custom control deployment**: Package and deploy PCF controls with Code Apps

#### Power BI Embedded Analytics

- **Embed Power BI reports**: Integrate interactive dashboards and reports

```typescript

import { PowerBIEmbed } from 'powerbi-client-react';

const DashboardComponent = () => {

return (

<PowerBIEmbed

embedConfig={{

type: 'report',

id: reportId,

embedUrl: embedUrl,

accessToken: accessToken,

tokenType: models.TokenType.Aad,

settings: {

panes: { filters: { expanded: false, visible: false } }

}

}}

/>

);

};

```

- **Dynamic report filtering**: Filter Power BI reports based on Code App context

- **Report