Implementing custom UI with React in Power Pages

Power Pages, while traditionally based on ASP.NET and Liquid templates, can be extended with modern JavaScript frameworks like React to build rich, dynamic, and highly interactive user interfaces. Using React in Power Pages allows you to bring in modular components, implement single-page application (SPA) behavior, and offer a more seamless user experience, especially when working with data from Microsoft Dataverse.

Below is a step-by-step guide to implementing custom UI with React in Power Pages.

1. Understand the Architecture

Power Pages supports:

Web Files (for JavaScript, CSS, and assets)
Web Templates (for injecting HTML and Liquid logic)
Content Snippets (dynamic text content)
IFrames (if isolating the React app is needed)

React apps can be:

Fully embedded within a Web Page/Web Template
Hosted externally (e.g., on Azure Static Web App) and embedded using iframe
Or run directly by injecting the React bundle into a Web Template or Web File

2. Set Up Your React App

Create a new React app using Vite or Create React App:

npx create-react-app my-react-app
cd my-react-app
npm run build

You’ll get a /build folder containing:

index.html
main.js (or bundle.js)
styles.css (if used)

3. Upload React Files into Power Pages

Go to Power Pages Management interface or Power Apps > Portal Management:

a. Create Web Files

Upload main.js, styles.css, and any assets (images, icons, fonts) as Web Files
Set Partial URL: /js/main.js, /css/styles.css, etc.
Set MIME types correctly:
- JavaScript: application/javascript
- CSS: text/css

b. Optional: Use Azure Blob Storage/CDN

If React is large or uses dynamic content, store it in Azure Blob Storage and reference it externally.

4. Create a Web Page and Web Template

Web Template

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>React in Power Pages</title>
    <link rel="stylesheet" href="/css/styles.css" />
</head>
<body>
    <div id="root"></div>
    <script src="/js/main.js"></script>
</body>
</html>

You can also include Liquid to dynamically render or pass data:

<script>
    window.portalData = {
        username: "{{ user.fullname }}",
        isAuthenticated: {{ user.id != empty | json }}
    };
</script>

Web Page

Set this Web Template as the source for your Web Page
Assign necessary Web Roles for visibility

5. Fetch Data from Dataverse

Use Power Pages Web API with authentication enabled:

fetch("/_api/contacts", {
    headers: {
        "OData-MaxVersion": "4.0",
        "OData-Version": "4.0",
        "Accept": "application/json",
        "Content-Type": "application/json",
    },
    credentials: "include"
})
.then(response => response.json())
.then(data => console.log(data));

Or send the data using window.portalData or embed it in Liquid output.

6. Handle Routing and Navigation

Since Power Pages is multi-page and React is SPA-based, use React for sub-navigation within a page:

Use react-router-dom for internal routing inside your React app
Do not attempt to override Power Pages page routing unless your entire portal is React-based

7. Add Interactivity & Forms

Build forms using React and submit data using Power Pages Web API
Implement input validation, animations, modal popups, etc.
Add state management using Context API or Redux if needed

8. Make it Mobile Responsive

Use Bootstrap (already part of Power Pages) or TailwindCSS
Ensure components respond well using media queries or responsive design

9. Debugging and Maintenance

Use browser DevTools for runtime inspection
Use Fiddler/Postman for testing Power Pages APIs
React DevTools can help during development (use them in browser extensions)

10. Security Considerations

Sanitize inputs in forms
Ensure authentication (for Web API)
Use role-based visibility for React components if needed
Do not hardcode sensitive data into JS files

Use Cases

Use Case	Benefit
Custom dashboards	Real-time updates, charts (with Chart.js or Recharts)
Interactive forms	Better validation and dynamic input
Client-side filtering/search	Improved UX
Portal extensions	Adding new modules without touching core Power Pages logic