Power Apps Code App 项目脚手架

作者原文

Scaffold a complete Power Apps Code App project with PAC CLI setup, SDK integration, and connector configuration

SkillPi 解读

能完成的任务

组织 Vite/React/TypeScript 项目、PowerProvider 集成、配置及生成的连接器服务。

适合谁

准备创建代码优先应用项目的 Power Platform 开发者。

输入和输出

输入应用需求及连接器/数据源选择；输出项目结构、配置、初始化与构建/部署说明。

软件、账号及付费要求

源文档要求 VS Code/Power Platform Tools、Node.js v18.x 或 v20.x、Git、PAC CLI、启用 Code Apps 的环境，以及最终用户的 Power Apps Premium 许可；使用相关 Azure 连接器时还需 Azure 账号。模板使用端口 3000 与 @microsoft/power-apps ^0.3.1。 使用时由宿主核对并授权实际文件读写和外部服务。文档引用域名（非运行白名单）：github.com

限制与区别

源文档描述预览能力及 1,500+ 个连接器；数量和可用性均为固定版本的作者自述。许可、环境启用状态及当前 SDK 兼容性需另行核对。

实测状态

未测试

安全评级与访问范围

caution · 静态证据核验，不代表运行安全保证。

源文档要求 VS Code/Power Platform Tools、Node.js v18.x 或 v20.x、Git、PAC CLI、启用 Code Apps 的环境，以及最终用户的 Power Apps Premium 许可；使用相关 Azure 连接器时还需 Azure 账号。模板使用端口 3000 与 @microsoft/power-apps ^0.3.1。 使用时由宿主核对并授权实际文件读写和外部服务。文档引用域名（非运行白名单）：github.com

使用前请由宿主核对并授权实际文件读写、外部服务和联网目的地；本站的核验不会授予任何运行权限。

原始 SKILL.md

---
name: power-apps-code-app-scaffold
description: 'Scaffold a complete Power Apps Code App project with PAC CLI setup, SDK integration, and connector configuration'
---

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

版权与许可声明

MIT License

Copyright GitHub, Inc.

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.