chore: publish from staged [skip ci]

2026-02-21 10:55:13 +00:00 · 2026-02-19 04:11:47 +00:00
parent 8ac0e41cb0
commit 812febf350
185 changed files with 33454 additions and 0 deletions
--- a/plugins/power-apps-code-apps/commands/power-apps-code-app-scaffold.md
+++ b/plugins/power-apps-code-apps/commands/power-apps-code-app-scaffold.md
@@ -0,0 +1,150 @@
+---
+description: 'Scaffold a complete Power Apps Code App project with PAC CLI setup, SDK integration, and connector configuration'
+agent: 'agent'
+tools: ['changes', 'search/codebase', 'edit/editFiles', 'problems', 'search']
+model: GPT-4.1
+---
+
+# Power Apps Code Apps Project Scaffolding
+
+You are an expert Power Platform developer who specializes in creating Power Apps Code Apps. Your task is to scaffold a complete Power Apps Code App project following Microsoft's best practices and current preview capabilities.
+
+## Context
+
+Power Apps Code Apps (preview) allow developers to build custom web applications using code-first approaches while integrating with Power Platform capabilities. These apps can access 1,500+ connectors, use Microsoft Entra authentication, and run on managed Power Platform infrastructure.
+
+## Task
+
+Create a complete Power Apps Code App project structure with the following components:
+
+### 1. Project Initialization
+- Set up a Vite + React + TypeScript project configured for Code Apps
+- Configure the project to run on port 3000 (required by Power Apps SDK)
+- Install and configure the Power Apps SDK (@microsoft/power-apps ^0.3.1)
+- Initialize the project with PAC CLI (pac code init)
+
+### 2. Essential Configuration Files
+- **vite.config.ts**: Configure for Power Apps Code Apps requirements
+- **power.config.json**: Generated by PAC CLI for Power Platform metadata
+- **PowerProvider.tsx**: React provider component for Power Platform initialization
+- **tsconfig.json**: TypeScript configuration compatible with Power Apps SDK
+- **package.json**: Scripts for development and deployment
+
+### 3. Project Structure
+Create a well-organized folder structure:
+```
+src/
+├── components/          # Reusable UI components
+├── services/           # Generated connector services (created by PAC CLI)
+├── models/            # Generated TypeScript models (created by 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
+```
+
+### 4. Development Scripts Setup
+Configure package.json scripts based on official Microsoft samples:
+- `dev`: "concurrently \"vite\" \"pac code run\"" for parallel execution
+- `build`: "tsc -b && vite build" for TypeScript compilation and Vite build
+- `preview`: "vite preview" for production preview
+- `lint`: "eslint ." for code quality
+
+### 5. Sample Implementation
+Include a basic sample that demonstrates:
+- Power Platform authentication and initialization using PowerProvider component
+- Connection to at least one supported connector (Office 365 Users recommended)
+- TypeScript usage with generated models and services
+- Error handling and loading states with try/catch patterns
+- Responsive UI using Fluent UI React components (following official samples)
+- Proper PowerProvider implementation with useEffect and async initialization
+
+#### Advanced Patterns to Consider (Optional)
+- **Multi-environment configuration**: Environment-specific settings for dev/test/prod
+- **Offline-first architecture**: Service worker and local storage for offline functionality
+- **Accessibility features**: ARIA attributes, keyboard navigation, screen reader support
+- **Internationalization setup**: Basic i18n structure for multi-language support
+- **Theme system foundation**: Light/dark mode toggle implementation
+- **Responsive design patterns**: Mobile-first approach with breakpoint system
+- **Animation framework integration**: Framer Motion for smooth transitions
+
+### 6. Documentation
+Create comprehensive README.md with:
+- Prerequisites and setup instructions
+- Authentication and environment configuration
+- Connector setup and data source configuration
+- Local development and deployment processes
+- Troubleshooting common issues
+
+## Implementation Guidelines
+
+### Prerequisites to Mention
+- Visual Studio Code with Power Platform Tools extension
+- Node.js (LTS version - v18.x or v20.x recommended)
+- Git for version control
+- Power Platform CLI (PAC CLI) - latest version
+- Power Platform environment with Code Apps enabled (admin setting required)
+- Power Apps Premium licenses for end users
+- Azure account (if using Azure SQL or other Azure connectors)
+
+### PAC CLI Commands to Include
+- `pac auth create --environment {environment-id}` - Authenticate with specific environment
+- `pac env select --environment {environment-url}` - Select target environment
+- `pac code init --displayName "App Name"` - Initialize code app project
+- `pac connection list` - List available connections
+- `pac code add-data-source -a {api-name} -c {connection-id}` - Add connector
+- `pac code push` - Deploy to Power Platform
+
+### Officially Supported Connectors
+Focus on these officially supported connectors with setup examples:
+- **SQL Server (including Azure SQL)**: Full CRUD operations, stored procedures
+- **SharePoint**: Document libraries, lists, and sites
+- **Office 365 Users**: Profile information, user photos, group memberships
+- **Office 365 Groups**: Team information and collaboration
+- **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 integration
+- **Microsoft Translator V2**: Multi-language translation
+- **Dataverse**: Full CRUD operations, relationships, and business logic
+
+### Sample Connector Integration
+Include working examples for Office 365 Users:
+```typescript
+// Example: Get current user profile
+const profile = await Office365UsersService.MyProfile_V2("id,displayName,jobTitle,userPrincipalName");
+
+// Example: Get user photo
+const photoData = await Office365UsersService.UserPhoto_V2(profile.data.id);
+```
+
+### Current Limitations to Document
+- 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
+
+### Best Practices to Include
+- Use port 3000 for local development (required by Power Apps SDK)
+- Set `verbatimModuleSyntax: false` in TypeScript config
+- Configure vite.config.ts with `base: "./"` and proper path aliases
+- Store sensitive data in data sources, not app code
+- Follow Power Platform managed platform policies
+- Implement proper error handling for connector operations
+- Use generated TypeScript models and services from PAC CLI
+- Include PowerProvider with proper async initialization and error handling
+
+## Deliverables
+
+1. Complete project scaffolding with all necessary files
+2. Working sample application with connector integration
+3. Comprehensive documentation and setup instructions
+4. Development and deployment scripts
+5. TypeScript configuration optimized for Power Apps Code Apps
+6. Best practices implementation examples
+
+Ensure the generated project follows Microsoft's official Power Apps Code Apps documentation and samples from https://github.com/microsoft/PowerAppsCodeApps, and can be successfully deployed to Power Platform using the `pac code push` command.
+
+