Update Power Apps Code Apps instructions: refine project context, improve folder structure, and clarify PowerProvider implementation

This commit is contained in:
Russ Rimmerman
2026-02-11 12:34:10 -06:00
parent 4555fee5d2
commit 836e4fc95d

View File

@@ -9,9 +9,9 @@ Instructions for generating high-quality Power Apps Code Apps using TypeScript,
## Project Context ## Project Context
- **Power Apps Code Apps (Preview)**: Code-first web app development with Power Platform integration - **Power Apps Code Apps**: Code-first web app development with Power Platform integration
- **TypeScript + React**: Recommended frontend stack with Vite bundler - **TypeScript + React**: Recommended frontend stack with Vite bundler
- **Power Platform SDK**: @microsoft/power-apps (current version ^0.3.1) for connector integration - **Power Platform SDK**: @microsoft/power-apps (current version ^1.0.3) for connector integration
- **PAC CLI**: Power Platform CLI for project management and deployment - **PAC CLI**: Power Platform CLI for project management and deployment
- **Port 3000**: Required for local development with Power Platform SDK - **Port 3000**: Required for local development with Power Platform SDK
- **Power Apps Premium**: End-user licensing requirement for production use - **Power Apps Premium**: End-user licensing requirement for production use
@@ -25,14 +25,15 @@ Instructions for generating high-quality Power Apps Code Apps using TypeScript,
src/ src/
├── components/ # Reusable UI components ├── components/ # Reusable UI components
├── hooks/ # Custom React hooks for Power Platform ├── hooks/ # Custom React hooks for Power Platform
├── services/ # Generated connector services (PAC CLI) ├── generated/
├── models/ # Generated TypeScript models (PAC CLI) │ ├── services/ # Generated connector services (PAC CLI)
│ └── models/ # Generated TypeScript models (PAC CLI)
├── utils/ # Utility functions and helpers ├── utils/ # Utility functions and helpers
├── types/ # TypeScript type definitions ├── types/ # TypeScript type definitions
├── PowerProvider.tsx # Power Platform initialization ├── PowerProvider.tsx # Power Platform context wrapper
└── main.tsx # Application entry point └── main.tsx # Application entry point
``` ```
- Keep generated files (`services/`, `models/`) separate from custom code - Keep generated files (`generated/services/`, `generated/models/`) separate from custom code
- Use consistent naming conventions (kebab-case for files, PascalCase for components) - Use consistent naming conventions (kebab-case for files, PascalCase for components)
### TypeScript Configuration ### TypeScript Configuration
@@ -159,23 +160,11 @@ Instructions for generating high-quality Power Apps Code Apps using TypeScript,
- Use generated TypeScript services from PAC CLI for connector operations - Use generated TypeScript services from PAC CLI for connector operations
- Implement proper authentication flows with Microsoft Entra ID - Implement proper authentication flows with Microsoft Entra ID
- Handle connector consent dialogs and permission management - Handle connector consent dialogs and permission management
- PowerProvider implementation pattern: - PowerProvider implementation pattern (no SDK initialization required in v1.0):
```typescript ```typescript
import { initialize } from "@microsoft/power-apps/app"; import type { ReactNode } from "react";
import { useEffect, type ReactNode } from "react";
export default function PowerProvider({ children }: { children: ReactNode }) { export default function PowerProvider({ children }: { children: ReactNode }) {
useEffect(() => {
const initApp = async () => {
try {
await initialize();
console.log('Power Platform SDK initialized successfully');
} catch (error) {
console.error('Failed to initialize Power Platform SDK:', error);
}
};
initApp();
}, []);
return <>{children}</>; return <>{children}</>;
} }
``` ```
@@ -539,8 +528,8 @@ Instructions for generating high-quality Power Apps Code Apps using TypeScript,
- Content Security Policy (CSP) not yet supported - Content Security Policy (CSP) not yet supported
- Storage SAS IP restrictions not supported - Storage SAS IP restrictions not supported
- No Power Platform Git integration - No Power Platform Git integration
- No Dataverse solutions support - Dataverse solutions supported, but solution packager and source code integration are limited
- No native Azure Application Insights integration - Application Insights supported through SDK logger configuration (no built-in native integration)
### Workarounds ### Workarounds
@@ -567,7 +556,7 @@ Instructions for generating high-quality Power Apps Code Apps using TypeScript,
- **Package installation failures**: Clear npm cache with `npm cache clean --force` and reinstall - **Package installation failures**: Clear npm cache with `npm cache clean --force` and reinstall
- **TypeScript compilation errors**: Check verbatimModuleSyntax setting and SDK compatibility - **TypeScript compilation errors**: Check verbatimModuleSyntax setting and SDK compatibility
- **Connector permission errors**: Ensure proper consent flow and admin permissions - **Connector permission errors**: Ensure proper consent flow and admin permissions
- **PowerProvider initialization errors**: Check console for SDK initialization failures - **PowerProvider issues**: Ensure v1.0 apps do not wait on SDK initialization
- **Vite dev server issues**: Ensure host and port configuration match requirements - **Vite dev server issues**: Ensure host and port configuration match requirements
### Deployment Issues ### Deployment Issues
@@ -577,11 +566,11 @@ Instructions for generating high-quality Power Apps Code Apps using TypeScript,
- **Connector unavailable**: Verify connector setup in Power Platform and connection status - **Connector unavailable**: Verify connector setup in Power Platform and connection status
- **Performance issues**: Optimize bundle size with `npm run build --report` and implement caching - **Performance issues**: Optimize bundle size with `npm run build --report` and implement caching
- **Environment mismatch**: Confirm correct environment selection with `pac env list` - **Environment mismatch**: Confirm correct environment selection with `pac env list`
- **App timeout errors**: Check PowerProvider.tsx implementation and network connectivity - **App timeout errors**: Check build output and network connectivity
### Runtime Issues ### Runtime Issues
- **"App timed out" errors**: Verify npm run build was executed and PowerProvider is error-free - **"App timed out" errors**: Verify npm run build was executed and the deployment output is valid
- **Connector authentication prompts**: Ensure proper consent flow implementation - **Connector authentication prompts**: Ensure proper consent flow implementation
- **Data loading failures**: Check network requests and connector permissions - **Data loading failures**: Check network requests and connector permissions
- **UI rendering issues**: Verify Fluent UI compatibility and responsive design implementation - **UI rendering issues**: Verify Fluent UI compatibility and responsive design implementation