mirror of
https://github.com/github/awesome-copilot.git
synced 2026-02-20 02:15:12 +00:00
Update Power Apps Code Apps instructions: refine project context, improve folder structure, and clarify PowerProvider implementation
This commit is contained in:
@@ -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
|
||||||
|
|||||||
Reference in New Issue
Block a user