Complete adoption guide for Power Apps Code Apps — from environment setup to production ALM.
Power Apps Code Apps (GA February 2026) allow professional developers to build full React/TypeScript web applications hosted natively in Power Platform. They combine the power of modern frontend development with the governance, security, and connector ecosystem of Power Platform.
This repository provides everything needed to:
- Set up the development environment and toolchain
- Build Code Apps following proven patterns and best practices
- Connect to Dataverse, Office 365, and 1,500+ connectors with typed access
- Deploy through a complete ALM pipeline (Dev → QA → UAT → Prod)
- Troubleshoot common issues with documented solutions
docs/
├── 01-introduction/
│ ├── what-are-code-apps.md # What are Code Apps, why they matter
│ ├── architecture.md # 4-layer runtime architecture
│ └── decision-tree.md # When to use Code Apps vs Canvas/MDA
├── 02-environment-setup/
│ ├── prerequisites.md # Tools, licenses, access requirements
│ └── getting-started.md # First app from scaffold to running
├── 03-development/
│ ├── project-structure.md # Anatomy of a Code App project
│ ├── data-integration.md # Dataverse patterns, connectors, typed services
│ ├── ui-components.md # Fluent UI v9, component patterns
│ ├── state-management.md # Zustand + React Query patterns
│ └── best-practices.md # Code standards, security, CSP, accessibility
├── 04-testing/
│ └── testing-strategy.md # Unit, integration, build verification
├── 05-deployment/
│ ├── build-deploy.md # Build + push workflow
│ ├── solutions.md # Solution management, connection references
│ └── environment-configuration.md # How env-specific values are managed (never hardcoded)
├── 06-alm/
│ ├── alm-overview.md # ALM strategy and environment promotion
│ ├── deployment-walkthrough.md # Step-by-step: DEV → QA → UAT → PROD (manual)
│ ├── ci-cd-github.md # GitHub Actions pipeline
│ └── ci-cd-azure-devops.md # Azure DevOps pipeline
├── 07-troubleshooting/
│ └── common-issues.md # 25+ documented issues with solutions
└── 08-advanced/
├── crud-patterns.md # Multi-level CRUD, junction tables, diff saves
├── migration-patterns.md # Mock-to-Dataverse migration
└── existing-apps.md # Working on and forking existing Code Apps
infographics/
├── architecture.svg # 4-layer architecture diagram
├── alm-pipeline.svg # Dev → QA → UAT → Prod workflow
├── decision-tree.svg # Code Apps vs Canvas vs MDA flowchart
├── dev-workflow.svg # Development lifecycle phases
└── project-structure.svg # Project file tree diagram
templates/
├── power.config.example.json # Reference power.config.json
├── tsconfig.reference.json # Reference TypeScript configuration
├── package.reference.json # Reference package.json with recommended deps
├── .azuredevops/
│ └── azure-pipelines.yml # Azure DevOps CI/CD pipeline
└── .github/
└── workflows/
└── code-app-ci.yml # GitHub Actions CI/CD pipeline
# 1. Scaffold from the official Microsoft template
npx degit github:microsoft/PowerAppsCodeApps/templates/vite my-app
cd my-app
# 2. Authenticate and select environment
pac auth create
pac env select --environment <environment-id>
# 3. Install and initialize
npm install
pac code init --displayName "My App"
# 4. Add a Dataverse table
pac code add-data-source -a shared_commondataserviceforapps -t <table-name>
# 5. Start local development
pac code run
# 6. Build and deploy
npm run build
pac code push| Requirement | Details |
|---|---|
| Node.js | LTS (20.x or later) |
| PAC CLI | v2.2.1+ (dotnet tool install --global Microsoft.PowerApps.CLI.Tool) |
| VS Code | With TypeScript support |
| Git | For version control |
| Power Platform | Environment with Code Apps enabled |
| License | Power Apps Premium ($20/user/month) for production; Developer Plan (free) for dev/test |
| Technology | Version | Purpose |
|---|---|---|
| React | 19.2.0+ | UI framework |
| TypeScript | 5.9+ | Type safety |
| Vite | 7.2+ | Build tool |
| @microsoft/power-apps | 1.0.4+ | Platform SDK |
| Fluent UI v9 | Latest | Component library |
| TanStack React Query | 5.x | Server state management |
| Zustand | 5.x | Client state management |
- Code Apps Overview — Microsoft Learn
- Code Apps Architecture — Microsoft Learn
- Create a Code App from Scratch — Microsoft Learn
- Connect to Dataverse — Microsoft Learn
- Connect to Data — Microsoft Learn
- PAC Code CLI Reference — Microsoft Learn
- Official Template — GitHub
- @microsoft/power-apps — npm
- Fluent UI v9 — Documentation