Modern Web App Sample

This repository provides a UI-only starter for building modern customer-facing experiences that plug directly into Microsoft Power Apps. It uses the current Power Apps client library for code apps and npm-based Code Apps CLI workflow, so you can focus on composing React interfaces before connecting to a backend or data source.

Tech Stack

• Vite for fast bundling and local development
• React with TypeScript for type-safe, component-driven UI work
• Tailwind-based design tokens and reusable components
• Power Apps client library for code apps via @microsoft/power-apps

Project Layout

src/
├── App.tsx             # Application shell
├── app/                # Route-level pages and entry layouts
├── assets/             # UI imagery, icons, and design tokens
├── components/         # Shared UI building blocks (`components/ui` for primitives)
├── features/           # Domain modules (accounts, contacts, dashboard, reports)
├── hooks/              # Cross-cutting client hooks
├── lib/                # Utilities and helpers
├── main.tsx            # Vite entry point

Static assets meant for the build pipeline live in src/assets/, while public files served unchanged reside in public/. Production bundles are emitted to dist/ when you run the build.

Getting Started

# clone the sample
git clone <repo-url>
cd paca-modern-web-app-sample

# install dependencies
npm install

# start the Vite + Power Apps development workflow
npm run dev

# build the production bundle
npm run build

Use npm run dev:vite or npm run dev:power-apps if you prefer to run each process independently. Before pushing changes, verify npm run lint and npm run build both succeed.

Deploying to Power Apps

After enabling Power Apps code apps for your environment, use the npm-based Code Apps CLI to initialize and publish the app. Microsoft’s current documented workflow is npx power-apps init, npm run dev, and npx power-apps push. Always follow the official Microsoft documentation for the latest prerequisites, command syntax, and environment requirements.

Tip: Open the Local Play URL in the same browser profile as your Power Platform tenant. Since December 2025, Chrome and Edge can block public-to-localhost requests by default, so local development may require explicit browser permission for local network access.

First-time initialization

Run init once for a new repo clone:

npx power-apps init --displayName "Modern Web App Sample" --environmentId <your-environment-id>

This creates power.config.json for the project. If that file already exists, init fails with App configuration already exists. In that case, update the existing power.config.json instead of rerunning init.

Local development

npm run dev

Deploy the configured environment

The current npm CLI flow expects the target environment to already be stored in power.config.json. In practice, npx power-apps push reads the environment from that file.

Set the environment in power.config.json:

{
  "environmentId": "<your-environment-id>"
}

Then publish:

npm run build
npm run push

Multiple environments

For Dev/Test/Prod, keep environment-specific config files and copy the right one into place before pushing:

cp power.config.test.json power.config.json
npm run build
npm run push

Suggested files:

• power.config.dev.json
• power.config.test.json
• power.config.prod.json

For ALM, Microsoft recommends pushing into a preferred non-default solution and using connection references when you add connectors so the app is portable across Dev/Test/Prod environments.

Next Steps

• Customize feature modules under src/features/ to match your domain.
• Integrate data sources by adding connectors with the Code Apps CLI and consuming the generated typed services under src/generated/.
• Add automated tests (Vitest + React Testing Library) alongside features as your app grows.
• Add solution-aware deployment and connection references for ALM across environments.

Preview Disclaimer

The Power Apps Code Apps experience is still evolving. Capabilities, commands, and environment requirements can change, so monitor Microsoft release notes and Code Apps documentation to stay aligned with the latest supported workflow.