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
- Authenticate with specific environment
pac env select --environment
- 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:
// 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
Complete project scaffolding with all necessary files
Working sample application with connector integration
Comprehensive documentation and setup instructions
Development and deployment scripts
TypeScript configuration optimized for Power Apps Code Apps
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.