Power Apps Code Apps Project Scaffolding

Context

Task

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

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

• 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

• 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

• 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

• 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

// 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

pac code push