How to Build Modern Applications with Power Apps Code Apps

Introduction

Microsoft Power Apps Code Apps is a new development approach that enables professional developers to build enterprise-grade applications using modern web technologies while seamlessly integrating with the Power Platform.

Unlike traditional Canvas Apps, which rely on drag-and-drop design and Power Fx formulas, Code Apps let developers create applications using React, TypeScript, HTML, and CSS. This approach offers greater flexibility, improved maintainability, and access to the entire JavaScript ecosystem.

Whether you're building internal business applications, customer portals, or enterprise solutions, Code Apps combine the power of modern frontend development with native Power Platform services.

What are Power Apps Code Apps?

Power Apps Code Apps allow developers to create Single Page Applications (SPAs) using React and TypeScript while leveraging Microsoft Power Platform capabilities such as:

Dataverse integration
Authentication
Environment management
Power Apps hosting
Security
Deployment

Instead of designing screens visually, developers write code just as they would for any React application.

Why Choose Code Apps?

Canvas Apps	Code Apps
Drag-and-drop UI	React + HTML + CSS
Power Fx	JavaScript / TypeScript
Citizen developers	Professional developers
Limited UI customization	Full UI control
Basic testing	Unit & Integration testing
Limited Git support	Full Git integration
Limited component reuse	Reusable React components

Benefits of Code Apps

Some of the major advantages include:

Modern React development
TypeScript support
Complete UI customization
Access to npm packages
Component-based architecture
Better performance
Git-based version control
Enterprise testing capabilities
CI/CD integration
Native Dataverse connectivity

Code Apps Architecture

The architecture consists of five major components:

Code

User
   │
Power Apps Host
   │
Power Apps SDK
   │
React Application
   │
Dataverse / APIs

User

The end user interacts with the application through Power Apps.

Power Apps Host

Responsible for:

Authentication
App lifecycle
Security
Navigation
Error handling

Power Apps SDK

Acts as the bridge between your React application and Power Platform services.

It provides APIs for:

Dataverse
User information
Navigation
Environment configuration

React Application

This is the application you build using:

React
TypeScript
HTML
CSS

Dataverse / APIs

Your application connects to:

Microsoft Dataverse
REST APIs
Azure Functions
External APIs

Prerequisites

Before creating a Code App, install the following tools:

Visual Studio Code
Node.js (Latest LTS)
Power Apps CLI
Git

Install Required Tools

Install Node.js

Download the latest LTS version from the official website: https://nodejs.org

Install Power Apps CLI

Code

npm install -g @microsoft/powerapps-cli

Verify installation:

Code

pac --version

Create a New Code App

Clone the official template:

Code

npx degit github:microsoft/PowerAppsCodeApps/templates/vite my-app

Navigate to the project:

Code

cd my-app

Install dependencies:

Code

npm install

Run the application:

Code

npm run dev

Project Structure

Code

my-app/
│
├── src/
├── public/
├── package.json
├── power.config.json
├── tsconfig.json
└── vite.config.ts

Example React Component

Code

export default function App() {
  return (
    <div>
      <h1>Welcome to Power Apps Code Apps</h1>
      <p>Hello World!</p>
    </div>
  );
}

Core Features

React Development

Develop using modern React components.

TypeScript

Write type-safe, maintainable code.

Dataverse Integration

Access Microsoft Dataverse using the Power Apps SDK.

npm Ecosystem

Install third-party libraries:

Code

npm install axios
npm install @fluentui/react-components

Version Control

Use Git for collaboration:

Code

git init
git add .
git commit -m "Initial commit"

When Should You Use Code Apps?

Choose Code Apps when you need:

Complex business applications
Highly customized UI
Advanced JavaScript logic
Enterprise-scale projects
Component reuse
Integration with external APIs
CI/CD pipelines
Professional development workflows

Canvas Apps vs Code Apps

Feature	Canvas Apps	Code Apps
UI	Drag-and-drop	React
Language	Power Fx	TypeScript
Custom UI	Limited	Full
Reusability	Basic	Excellent
Testing	Basic	Advanced
Git Support	Limited	Full
Best For	Business users	Professional developers

Best Practices

Use TypeScript for better code quality.
Organize your project into reusable components.
Store configuration in power.config.json.
Use Git from the beginning of the project.
Follow React best practices for state management.
Write unit tests for business logic.
Keep secrets and configuration out of source code.

Conclusion

Power Apps Code Apps bridge the gap between low-code development and professional software engineering. By combining the Power Platform with React, TypeScript, and modern web development practices, developers can build scalable, maintainable, and highly customizable enterprise applications.

If you're already familiar with React, Code Apps provide a familiar development experience while giving you seamless access to Microsoft Dataverse, authentication, and other Power Platform capabilities. For organizations building sophisticated business applications, Code Apps offer the flexibility of custom development without losing the benefits of the Power Platform ecosystem.