Power Apps Code App Scaffold

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

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:

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

Use these scripts:

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

PAC CLI commands

Connector integration

Focus examples on officially supported connectors:

Sample Office 365 Users calls:

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

## 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.