power-apps-code-app-scaffold
installsforks
How to install power-apps-code-app-scaffold?
github/awesome-copilot/power-apps-code-app-scaffold
$npx -y skills add github/awesome-copilot --skill power-apps-code-app-scaffoldScaffold a complete Power Apps Code App project with PAC CLI setup, SDK integration, and connector configuration
SKILL.md
| 1 | # Power Apps Code Apps Project Scaffolding |
| 2 | |
| 3 | 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. |
| 4 | |
| 5 | ## Context |
| 6 | |
| 7 | 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. |
| 8 | |
| 9 | ## Task |
| 10 | |
| 11 | Create a complete Power Apps Code App project structure with the following components: |
| 12 | |
| 13 | ### 1. Project Initialization |
| 14 | - Set up a Vite + React + TypeScript project configured for Code Apps |
| 15 | - Configure the project to run on port 3000 (required by Power Apps SDK) |
| 16 | - Install and configure the Power Apps SDK (@microsoft/power-apps ^0.3.1) |
| 17 | - Initialize the project with PAC CLI (pac code init) |
| 18 | |
| 19 | ### 2. Essential Configuration Files |
| 20 | - **vite.config.ts**: Configure for Power Apps Code Apps requirements |
| 21 | - **power.config.json**: Generated by PAC CLI for Power Platform metadata |
| 22 | - **PowerProvider.tsx**: React provider component for Power Platform initialization |
| 23 | - **tsconfig.json**: TypeScript configuration compatible with Power Apps SDK |
| 24 | - **package.json**: Scripts for development and deployment |
| 25 | |
| 26 | ### 3. Project Structure |
| 27 | Create a well-organized folder structure: |
| 28 | ``` |
| 29 | src/ |
| 30 | ├── components/ # Reusable UI components |
| 31 | ├── services/ # Generated connector services (created by PAC CLI) |
| 32 | ├── models/ # Generated TypeScript models (created by PAC CLI) |
| 33 | ├── hooks/ # Custom React hooks for Power Platform integration |
| 34 | ├── utils/ # Utility functions |
| 35 | ├── types/ # TypeScript type definitions |
| 36 | ├── PowerProvider.tsx # Power Platform initialization component |
| 37 | └── main.tsx # Application entry point |
| 38 | ``` |
| 39 | |
| 40 | ### 4. Development Scripts Setup |
| 41 | Configure package.json scripts based on official Microsoft samples: |
| 42 | - `dev`: "concurrently \"vite\" \"pac code run\"" for parallel execution |
| 43 | - `build`: "tsc -b && vite build" for TypeScript compilation and Vite build |
| 44 | - `preview`: "vite preview" for production preview |
| 45 | - `lint`: "eslint ." for code quality |
| 46 | |
| 47 | ### 5. Sample Implementation |
| 48 | Include a basic sample that demonstrates: |
| 49 | - Power Platform authentication and initialization using PowerProvider component |
| 50 | - Connection to at least one supported connector (Office 365 Users recommended) |
| 51 | - TypeScript usage with generated models and services |
| 52 | - Error handling and loading states with try/catch patterns |
| 53 | - Responsive UI using Fluent UI React components (following official samples) |
| 54 | - Proper PowerProvider implementation with useEffect and async initialization |
| 55 | |
| 56 | #### Advanced Patterns to Consider (Optional) |
| 57 | - **Multi-environment configuration**: Environment-specific settings for dev/test/prod |
| 58 | - **Offline-first architecture**: Service worker and local storage for offline functionality |
| 59 | - **Accessibility features**: ARIA attributes, keyboard navigation, screen reader support |
| 60 | - **Internationalization setup**: Basic i18n structure for multi-language support |
| 61 | - **Theme system foundation**: Light/dark mode toggle implementation |
| 62 | - **Responsive design patterns**: Mobile-first approach with breakpoint system |
| 63 | - **Animation framework integration**: Framer Motion for smooth transitions |
| 64 | |
| 65 | ### 6. Documentation |
| 66 | Create comprehensive README.md with: |
| 67 | - Prerequisites and setup instructions |
| 68 | - Authentication and environment configuration |
| 69 | - Connector setup and data source configuration |
| 70 | - Local development and deployment processes |
| 71 | - Troubleshooting common issues |
| 72 | |
| 73 | ## Implementation Guidelines |
| 74 | |
| 75 | ### Prerequisites to Mention |
| 76 | - Visual Studio Code with Power Platform Tools extension |
| 77 | - Node.js (LTS version - v18.x or v20.x recommended) |
| 78 | - Git for version control |
| 79 | - Power Platform CLI (PAC CLI) - latest version |
| 80 | - Power Platform environment with Code Apps enabled (admin setting required) |
| 81 | - Power Apps Premium licenses for end users |
| 82 | - Azure account (if using Azure SQL or other Azure connectors) |
| 83 | |
| 84 | ### PAC CLI Commands to Include |
| 85 | - `pac auth create --environment {environment-id}` - Authenticate with specific environment |
| 86 | - `pac env select --environment {environment-url}` - Select target environment |
| 87 | - `pac code init --displayName "App Name"` - Initialize code app project |
| 88 | - `pac connection list` - List available connections |
| 89 | - `pac code add-data-source -a {api-name} -c {connection-id}` - Add connector |
| 90 | - `pac code push` - Deploy to Power Platform |
| 91 | |
| 92 | ### Officially Supported Connectors |
| 93 | Focus on these officially supported connectors with setup examples: |
| 94 | - **SQL Server (including Azure SQL)**: Full CRUD operations, stored procedures |
| 95 | - **SharePoint**: Document libraries, lists, and sites |
| 96 | - **Office 365 Users**: Profile |
People who liked this also viewed
6 picksType
- microsoft-foundryDeploy, evaluate, fine-tune, and manage Foundry agents end-to-end with azd: hosted agent scaffold/run/deploy, prompt agent create, batch eval, continuous eval, prompt optimizer, Agent Optimizer scaffoSkillsJul 2026
- azure-deployExecute Azure deployments for ALREADY-PREPARED applications that have existing .azure/deployment-plan.md and infrastructure files. DO NOT use this skill when the user asks to CREATE a new application SkillsJul 2026
- azure-preparePrepare azd-based Azure projects for deployment: generates azure.yaml, infrastructure (Bicep/Terraform), and Dockerfiles for the Azure Developer CLI (azd) workflow. USE ONLY when the user explicitly wSkillsJul 2026
- azure-validate--- name: azure-validate description: "Pre-deployment validation for Azure readiness. Run deep checks on configuration, infrastructure (Bicep or Terraform), RBAC role assignments, managed identity pSkillsJul 2026
- azure-aigatewayConfigure Azure API Management as an AI Gateway for AI models, MCP tools, and agents. WHEN: semantic caching, token limit, content safety, load balancing, AI model governance, MCP rate limiting, jailbSkillsJul 2026
- azure-hosted-copilot-sdkOfficial agent plugin providing skills and MCP server configurations for Azure scenarios.SkillsJul 2026
