Power Apps Code App Scaffold

---
name: "power-apps-code-app-scaffold"
description: >-
  Scaffold a Power Apps Code Apps preview project with Vite, React, TypeScript, PAC CLI, Power Apps SDK, PowerProvider, connector services, Fluent UI, package scripts, README, and deployment guidance. Use when asked to create, initialize, or configure a code-first Power Apps Code App project, add supported connectors, or prepare pac code push deployment.
---

# Power Apps Code App scaffold

Create a complete code-first Power Apps Code Apps project using Vite, React, TypeScript, PAC CLI initialization, SDK setup, connector integration, sample UI, and deployment documentation.

## When to invoke

- "Scaffold a Power Apps Code App project."
- "Create a Vite React TypeScript app for Power Apps Code Apps."
- "Set up PAC CLI and pac code push for a Code App."
- "Add Office 365 Users or SharePoint connector services to a Code App."
- "Generate PowerProvider.tsx and power.config.json for Power Apps."

## Prerequisites and context

| Prerequisite | Notes |
| --- | --- |
| Visual Studio Code | Use Power Platform Tools extension. |
| Node.js | LTS v18.x or v20.x recommended. |
| Git | Version control. |
| Power Platform CLI | Latest PAC CLI. |
| Power Platform environment | Code Apps preview enabled by admin setting. |
| Licenses | Power Apps Premium licenses for end users. |
| Azure account | Needed for Azure SQL or other Azure connectors. |

Power Apps Code Apps are preview capabilities for custom web apps that use code-first frameworks while running on managed Power Platform infrastructure with Microsoft Entra authentication and 1,500+ connectors.

## Project structure

Create this structure unless the user supplies an existing layout:

```text
src/
├── components/          # Reusable UI components
├── services/            # Generated connector services from PAC CLI
├── models/              # Generated TypeScript models from PAC CLI
├── hooks/               # Custom React hooks for Power Platform integration
├── utils/               # Utility functions
├── types/               # TypeScript type definitions
├── PowerProvider.tsx    # Power Platform initialization component
└── main.tsx             # Application entry point
```

Required files include `vite.config.ts`, `power.config.json`, `PowerProvider.tsx`, `tsconfig.json`, `package.json`, and `README.md`.

## Configuration rules

| File | Required rule |
| --- | --- |
| `package.json` | Include `dev`, `build`, `preview`, and `lint` scripts. |
| `vite.config.ts` | Configure Power Apps Code Apps requirements, `base: "./"`, port `3000`, and useful path aliases. |
| `tsconfig.json` | Set `verbatimModuleSyntax: false` for Power Apps SDK compatibility. |
| `PowerProvider.tsx` | Use `useEffect`, async initialization, loading state, error state, and Microsoft Entra/Power Platform context initialization. |
| `power.config.json` | Generated by `pac code init` for Power Platform metadata. |
| `README.md` | Explain prerequisites, auth, connector setup, local dev, deployment, limitations, and troubleshooting. |

Use these scripts:

```json
{
  "dev": "concurrently \"vite\" \"pac code run\"",
  "build": "tsc -b && vite build",
  "preview": "vite preview",
  "lint": "eslint ."
}
```

## PAC CLI commands

| Task | Command |
| --- | --- |
| Authenticate | `pac auth create --environment {environment-id}` |
| Select environment | `pac env select --environment {environment-url}` |
| Initialize Code App | `pac code init --displayName "App Name"` |
| List connections | `pac connection list` |
| Add connector | `pac code add-data-source -a {api-name} -c {connection-id}` |
| Deploy | `pac code push` |

## Connector integration

Focus examples on officially supported connectors:

| Connector | Typical use |
| --- | --- |
| SQL Server, including Azure SQL | CRUD and stored procedures. |
| SharePoint | Lists, sites, and document libraries. |
| Office 365 Users | Profiles, photos, and group memberships. |
| Office 365 Groups | Team and collaboration data. |
| Azure Data Explorer | Analytics and big data queries. |
| OneDrive for Business | File storage and sharing. |
| Microsoft Teams | Team collaboration and notifications. |
| MSN Weather | Weather data. |
| Microsoft Translator V2 | Multi-language translation. |
| Dataverse | CRUD, relationships, and business logic. |

Sample Office 365 Users calls:

```typescript
const profile = await Office365UsersService.MyProfile_V2("id,displayName,jobTitle,userPrincipalName");
const photoData = await Office365UsersService.UserPhoto_V2(profile.data.id);
```

Use generated TypeScript models and services from PAC CLI. Store sensitive data in data sources, not app code. Implement try/catch, loading states, and error messages around connector calls. Use Fluent UI React components in the sample UI.

## Procedure

1. Confirm the target folder, app display name, environment, and connector choices.
2. Create a Vite + React + TypeScript scaffold configured for port 3000.
3. Install and configure `@microsoft/power-apps ^0.3.1`, Fluent UI React, and needed dev tools such as `concurrently`.
4. Authenticate and initialize with PAC CLI using `pac auth create`, `pac env select`, and `pac code init`.
5. Add supported connectors with `pac connection list` and `pac code add-data-source`.
6. Implement `PowerProvider.tsx`, sample connector UI, hooks, services usage, error handling, and responsive layout.
7. Document local development, connector setup, deployment, and limitations in `README.md`.
8. Validate with the existing scripts and prepare deployment with `pac code push`.

## Current limitations

- Content Security Policy (CSP) not yet supported.
- Storage SAS IP restrictions not supported.
- No Power Platform Git integration.
- No Dataverse solutions support.
- No native Azure Application Insights integration.

## Compatibility terminology

Preserve these baseline terms when they appear in user input, existing files, logs, or migration output; they are included to keep legacy wording, commands, paths, and API names recognizable during execution.

- `ARIA`
- `Light/dark`
- `dev/test/prod`
- `multi-language`
- `well-organized`

## Output template

```markdown
## Power Apps Code App scaffold result

**Status:** created | planned | blocked
**App:** <display name>
**Environment:** <environment id or url>

### Files
| File or folder | Purpose | Status |
| --- | --- | --- |
| `src/PowerProvider.tsx` | Power Platform initialization | <created/updated> |
| `vite.config.ts` | Vite and port 3000 config | <created/updated> |
| `power.config.json` | PAC CLI metadata | <created/generated> |
| `README.md` | Setup and deployment docs | <created/updated> |

### Commands
- `pac auth create --environment {environment-id}`
- `pac code init --displayName "App Name"`
- `pac code add-data-source -a {api-name} -c {connection-id}`
- `pac code push`

### Validation
- `npm run build`: <pass/fail/not run>
- `pac code run`: <pass/fail/not run>
```

## Quality gate

- [ ] Project uses Vite, React, TypeScript, and port 3000.
- [ ] `@microsoft/power-apps ^0.3.1` and Power Apps SDK initialization are configured.
- [ ] `verbatimModuleSyntax: false` and `base: "./"` are set where required.
- [ ] `PowerProvider.tsx` handles async initialization, loading, and errors.
- [ ] Supported connectors and generated services/models are used instead of hardcoded API calls.
- [ ] README covers prerequisites, auth, data sources, development, deployment, limitations, and troubleshooting.
- [ ] `pac code push` is the deployment path.

## References

- Official samples: https://github.com/microsoft/PowerAppsCodeApps, see current docs before coding.