Power Pages SPA: structure

Default structure of pages in Power Pages

Each actual web page you navigate to in a browser is based on a page template that is based on a web template. So dependencies look like this in the order of priority:

1. Web Template
2. Page Template
3. Web Page

Structure of our SPA

SPA pages will be rendered with a fragment-based (hash) routing as explained in the next post.

We will have only a one home route / that is represented by the Home Web Page in the Power Pages Management app.

This Home page can be accessed only by the user within my organization Azure tenant (since we set the home page to Authenticated Users in the previous step).

So when someone navigates to https://your-site.powerappsportals.com, the flow will be automatically redirected for authentication. If successful, the Home page will rendered from Content Snippets, if not - No Access content from Content Snippets will be rendered instead.

If someone will navigate to a route that doesn't exist, ie. https://your-site.powerappsportals.com/lkj;lkj;j;lj, the content of the default page Page Not Found will be rendered. This page has route page-not-found in Web Pages, and we will customize this as well.

Page Not Found has public assess by default. So even if we have set the home page to be accessed by the authenticated users only, the content of Page Not Found will always be shown to anyone. And we will use it to our advantage as follows:

1. Under this route page-not-found we will place some core js and css files meant for public access, e.g. bootstrap.css, msal-browser.min.js, bootstrap.bundle.js and something else.

2. When MSAL library obtains a token from Azure and redirects the token back as URL hash, the page that receives the token shall be blank, shall not manipulate the hash or further redirect the flow as explained here in the MSAL docs.

So page-not-found route is perfect for us in this regard.