All built with Fluent UI v9 (@fluentui/react-components) and the Outlook connector — the same connector available to 1,400+ Power Platform integrations.

Prerequisites

Requirement	Version
Node.js	18+
npm	9+
PAC CLI	2.6+ (`dotnet tool install -g Microsoft.PowerApps.CLI`)
Power Apps environment	Licensed user
Microsoft 365 account	For the Outlook connector

Quick start

# 1. Clone & install
git clone <this-repo>
cd power-apps-codeapps-blog-part2
npm install

# 2. Run locally
npm run dev
# → opens at http://localhost:5173

# 3. Build for production
npm run build

The app uses mock data by default. To connect to real Outlook data, follow the connector setup below.

Project structure

power-apps-codeapps-blog-part2/
├── index.html               HTML shell
├── package.json              Dependencies & scripts
├── tsconfig.json             TypeScript config
├── vite.config.ts            Vite dev server & build
├── power.config.json         Power Platform app manifest (required by PAC CLI)
└── src/
    ├── main.tsx              Entry point — FluentProvider + theme
    ├── App.tsx               Main UI: nav rail, folders, email list, reading pane
    ├── index.css             Minimal reset (Fluent handles all component styles)
    ├── types/
    │   └── index.ts          Shared TypeScript types (Email, Folder, UserProfile)
    └── services/
        └── OutlookService.ts Mock connector (mirrors real generated service API)

Architecture

┌──────────────────────────────────────────────────────┐
│                    Your Code App                      │
│                                                       │
│   React + Fluent UI  →  Service Layer  →  Connector   │
│                                              ↕        │
│              ┌───────────────────────────────────┐    │
│              │    Power Platform Connectors       │    │
│              │  ───────────────────────────────── │    │
│              │  Outlook  │  Dataverse  │  Custom  │    │
│              └───────────────────────────────────┘    │
└──────────────────────────────────────────────────────┘

The app talks to connectors through a typed service layer. In development, OutlookService.ts returns mock data. In production, swap it for the auto-generated service from pac code add-data-source.

Connecting to real data

1. Check your connections

pac connection list

Example output:

Connected as lago@powerplatform.top
Id                               Name        API Id                                              Status
4839c34829284206bf6a11d4ce577491 Outlook.com /providers/Microsoft.PowerApps/apis/shared_outlook  Connected

2. Add the connector

pac code add-data-source \
  -a shared_outlook \
  -c 4839c34829284206bf6a11d4ce577491

This auto-generates typed TypeScript files:

src/connectors/shared_outlook/
  ├── OutlookModel.ts      ← request/response types
  └── OutlookService.ts    ← typed service with all connector actions

3. (Optional) Add Dataverse

pac code add-data-source \
  -a shared_commondataservice \
  -c <connection-id> \
  -t accounts \
  -d default

4. Swap mock for real service

Replace the import in App.tsx:

- import { OutlookService } from './services/OutlookService';
+ import { OutlookService } from './connectors/shared_outlook/OutlookService';

The method signatures are identical — no other changes needed.

Connection references (theory)

Code apps use connection references instead of binding directly to a user-specific connection. Benefits:

Benefit	Description
Environment promotion	Connections change per environment (dev → staging → prod) without code changes
Managed identity	Use system-assigned identities instead of user credentials
Governance	IT can audit which apps use which connectors via DLP policies

Fluent UI v9

This project uses Fluent UI v9 — the same design system that powers Microsoft 365:

FluentProvider with webLightTheme / webDarkTheme (auto-detected)
makeStyles for zero-runtime CSS-in-JS
Design tokens (tokens.colorBrandBackground, etc.) for consistent theming
All components: Avatar, Badge, Button, Dialog, Input, Textarea, Spinner, Tooltip, Divider, ToolbarButton

NPM scripts

Script	Description
`npm run dev`	Start Vite dev server at `http://localhost:5173`
`npm run build`	Type-check + production build
`npm run preview`	Preview the production build locally

Deploy to Power Platform

pac code deploy

This packages the app and registers it in your environment. Then add it to a solution and publish.

Key differences from Canvas Apps

Aspect	Canvas Apps	Code Apps
UI Framework	Power Fx formula bar	React / Vue / Svelte
Connector access	Built-in connector picker	PAC CLI + typed client library
Data model	Implicit, delegation-based	Explicit TypeScript types
Styling	Themed controls	Fluent UI / any CSS framework
Deployment	Packaged by Power Platform	`pac code deploy` + solution
Source control	Limited	Full git-native workflow

Supported connectors

Code apps support 1,400+ connectors:

Category	Examples
Microsoft 365	Outlook, Teams, SharePoint, OneDrive, Planner
Dataverse	Common Data Service (Dataverse)
Data	SQL Server, OData
SaaS	Salesforce, SAP, ServiceNow, Slack
Custom	Any standard REST connector

Not yet supported: Excel Online (Business), Excel Online (OneDrive).

References

How to: Connect your code app to data — Microsoft Learn
Power Apps code apps overview — Microsoft Learn
Code apps architecture — Microsoft Learn
Use CLI to discover, create, and wire connectors — Microsoft Learn
pac connection list — PAC CLI reference
pac code add-data-source — PAC CLI reference
Connector classification (DLP) — Microsoft Learn
Fluent UI v9 — React components — Microsoft
Part 1: Power Apps code apps tutorial — That's a good question