Power Pages single-page apps: Create a “Hello World!” website

Power Pages has a lot of great features to build powerful websites that are directly connected to business data in Microsoft Dataverse. Makers can build web pages with static content as well as data connected components such as lists and forms that are based on model-driven Power Apps forms and views. To further extend your site, you can add multi-step forms, cards, and even build custom web template components to display and manipulate data in a variety of ways.

Currently in private preview, you can also create Copilot AI agents to allow users to interact with data through a Power Pages website.

More of a video watching? Check out the YouTube version of this post:

Even with all of those great features, there are situations where you need to have greater flexibility and control over your user interface components to build your web application using tools like Vue, Angular, and React.

We also live in a time where anyone can use tools like Replit, Lovable, Firebase Studio, or even GitHub Spark and vibe-code your way to a data-driven web based application. Most of these tools generate React code from the natural language prompts.

Microsoft business applications are not immune either; Generative Pages and Code Apps are also React based.

If you are developer needing to extend Power Platform solutions, the message is clear: Learn React before you need to react! (*Session title already used for a number of community events in 2026).

Even with the great features of React based apps, what is missing is still fundamental core features of Power Pages, such as Authentication and security.

Microsoft recently announced the ability to “bring your own code” (React, Angular, Vue) to host single-page applications (SPAs) Power Pages.

Build Modern Single-Page Applications in Power Pages (Preview)

This brings together the best of both worlds – Power Pages security, authentication, and ability to host a website AND the power of building a web application (with AI assisted tools like GitHub Copilot) using a framework like React, Angular, or Vue.

What are single-page applications?
A single-page application (SPA) loads one web page once, then updates parts of it with JavaScript as you navigate with no full page reloads. It fetches data in the background, so it feels fast and app-like.

What is React?
React is a JavaScript library for building user interfaces from small, reusable “components.” It efficiently updates the screen when data changes (using a virtual DOM), making apps fast, interactive, and easy to scale, especially for SPAs.

What if I have never built a web application using React before?

Welcome to the club! Years ago, I built sites using ASP.NET and connected to Dynamics CRM (essentially Dataverse today), a few HTML/JavaScript sites, and even had Power Automate build me some static sites and of course a lot of websites built using Power Pages, Liquid and the WebAPI.

Confession: Up until very recently, I have never built a site or application using React.

It’s been on my to-do list forever and even my podcast co-host Ulrikke and I challenged each other to learn React, Typescript, and how to build PCF components last winter. (And we haven’t… yet!)

Thanks to the magic of GitHub Copilot, ChatGPT, and looking at sample code, I was able to build a simple “hello world” website using React, and uploaded to Power Pages.

To level set, I’ll assume you have some good knowledge on how Power Pages works, some basic HTML skills and that you aren’t afraid of JavaScript and may have cut and pasted a few snippets in your apps before. You don’t need to be a full pro-code developer. (Who, in reality, are just professional code cut and pasters as well, don’t tell them I said so.)

In follow up posts/videos, my plan is to expand this site so that it will read and display records from a Dataverse table using the WebAPI, followed up by authentication and full CRUD operations. Stay tuned!

These are *very* simple examples, but also show the power of how you can take these foundational steps and build powerful business applications.

If you are an experienced React developer, feel free to skip to the Upload to Power Pages part. Or read through the next bit, eye roll and criticize my code. (if its bad, its Copilot’s fault)

Hello World

This is the traditional application that anyone should build when learning a new development language or framework.

Of course, these days we don’t write code, we prompt. Using Visual Studio Code and GitHub Copilot, I began my journey:

create a simple react app that simply displays "hello world"

I then instructed GitHub Copilot to create the structure and files.

Followed by

NPM run build

Which compiled my code. To be fair, I ran into a few issues that required some updates to NPM and a few other Copilot suggestions, which is vibe coding in its purest form (trusting the machine…)

Once successful, I followed this by

NPM start

Which started a local server, so I could see my code in action:

This is not exactly the killer enterprise application that will make me millions of dollars, but the process requires baby steps.

Now, this is meant to be a learning exercise, not a humblebrag of my awesome React coding prompting skills. Lets take a look at the structure:

If you have built websites before (even in Notepad), you will know that the index.html page is what gets loaded by default (usually).

This is the main HTML file. It has a <div id=”root”></div> where your React app will appear. It’s like an empty container waiting to be filled.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My React App</title>
</head>
<body>
    <div id="root"></div>
</body>
</html>

Taking a look at the index.jsx file. This is the entry point for your JavaScript code. It tells React to take your App component and render it inside the <div id=”root”> in index.html. Think of it as the bridge between your HTML and your React code.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

Finally the App.jsx. This is your main React component. It returns the UI you want to show, in this case, just “Hello World” inside a <div>. You can add more components and logic here as your app grows.

import React from 'react';

function App() {
    return (
        <div>
            Hello World
        </div>
    );
}

export default App;

Upload to Power Pages

Now that our site is built (and tested), we can upload to Power Pages and really set the world on fire.

Ensure that you have the Power Platform tools extension installed in Visual Studio Code.

Using the PAC CLI in the terminal window and connect to a Dataverse environment (NOT PROD).

pac auth create -env <<environment id>>

TIP: You can get the environment id by selecting the Session details from the gear icon in the Power Pages home page or the Power Apps maker studio.

You’ll be prompted for your credentials, and then you’ll be connected to your Dataverse environment.

Next, upload the site by entering the following command:

pac pages upload-code-site --rootpath <<path where site is located>> --compiledPath <<path where code is compiled>> --siteName <<sitename>>

Here is my example:

pac pages upload-code-site --rootpath C:devmy-react-app --compiledPath C:devmy-react-appbuild --siteName HelloWorld

The site will be uploaded to your Dataverse environment. Go to the Power Pages home page, and navigate to the Inactive sites, you should see your uploaded SPA website. Reactivate the site.

Enter the details and select DONE.

When the site is ready, there will be some tell-tale signs that the site is a SPA. You won’t be able to add or edit pages and you can’t use any of the default styling templates. You will be able to setup authentication and table permissions (this will become important in later posts0.

Selecting Preview and you should see your amazing single page web application in all its glory! (Hello World…)

Summary

The ability to create applications using React and upload them to Power Pages is going to be a game changer in building web applications. Imagine having all the features of capabilities or React (or Vue or Angular) as well as all the great foundational features of Power Pages! The feature is still currently in preview, so expect some glitches and the team is open to feedback.

Is this something you will use on your own implementation projects?

Coming up…

In the next post/video (hopefully next week ) I’ll show how I was able to display a list of records securely from Dataverse on a SPA site in Power Pages. Stay tuned!

Nick Doelman is a Microsoft MVP, podcaster, trainer, public speaker, and competitive Powerlifter. Follow Nick on X at @readyxrm or LinkedIN, and now; Bluesky.

Need Power Platform expertise or training? Check out Nick’s website for more details.

Listen or watch the the Power Platform Boost podcast with Nick and co-host Ulrikke Akerbæk every second week for news and updates from the Power Platform community.

Original Post https://readyxrm.blog/2025/09/04/power-pages-single-page-apps-create-a-hello-world-website/