DEV Community

Andrew Elans
Andrew Elans

Posted on • Edited on

Power Pages SPA: main setup

Edited 03.11.2025

Ref. to https://github.com/AndrewElans/PowerPagesSPA/blob/main/README.md#steps

In this post I requirements for provisioning Single Page Application with Power Pages. I will not dive deep in these as many tutorials can easily be found online.

This post is long. So follow the steps closely.

I will be doing it with my fresh azure developer subscription.

Go to portal.azure.com

Log in with your private email you used to create a developer subscription. I used my gmail.com account.

Go to Users -> select yourself (you will be the only one) -> click Edit properties and modify the User principal name to something more pleasant.

Note you cannot modify the part after @250101dev.onmicrosoft.com.

I have it set to andrew.elans@250101dev.onmicrosoft.com -> that is the email address I will be using to log in to power apps websites.

Go to admin.powerplatform.microsoft.com

Note that you cannot login with your gmail account in here. You will get the following error: You can't sign in here with a personal account. Use your work or school account instead.

Log in with your main user email you created in portal.azure.com. Note that you would need to setup the microsoft authenticator app as a security measure. I omit this bit here.

Go to Environments -> you will see 2 environments there with types: Default and Developer -> delete the developer one as this is created by default when your developer subscription was provisioned.

Create new environment -> click New -> Name 250101 -> Group None -> Region Europe -> Type Developer -> Add a Dataverse data store Yes activated by default -> click Next -> select Language (see Note on Language further down), I select norsk bookmål (Norge), Deploy sample apps and data No -> enter URL for 250101 -> click Save.

The new environment will be provisioned shortly.

Note on Language of Dataverse

You may tend to select English (United States) to have table names, settings and UI in English. However, if your data will have some Latin-1 characters like æ å ø, you would need to select the right language from start, in my case it's norsk bookmål (Norge).

Why? It has to do with the database collation issues when sorting and searching Latin-1 specific characters.

Here is the difference:

If you have selected norsk bookmål (Norge) and then change UI language to English (I prefer English and usually set UI to it), it will work. However, some of the limitation include inability to see some of the environment settings due to language differences. You would have to switch back to Norwegian in cases you would need to change some specific settings.

Microsoft documentation on dataverse collation here.

In admin.powerplatform.microsoft.com -> Open environment 250101 -> Settings -> Product:

1) Enable js extensions

Click Privacy + Security -> in Blocked Attachments find and remove js;.

2) Add system language English

I prefer system settings in English, so let's update the system before a new portal is created.

Click Languages -> new window opens -> select Engelsk -> click Bruk -> click OK.

Keeping this window open wait until it is activated (takes 5-10 minutes).

3) Change UI to English

Click Resources -> All legacy settings -> new window opens -> click on the settings cog (top right) -> select Alternativer -> Språk tab -> in Brukergrensesnittspråk select Engelsk -> click OK -> close this tab.

Provision a new portal

Go to make.powerpages.microsoft.com -> select environment 250101 -> click Get Started -> Next -> Start with a Template -> select Blank page -> choose this template -> Give your site a name and web addresssite-250101-> select English (if it's not added as explained above, it will not be there) -> clickDone`.

The website will be provisioned shortly.

Click Security tab (on the left) -> select Identity providers

Since I'm making the app for corporate employees, I will use only Microsoft Entra ID authentication. We will enable it later in make.powerpages.com. For now, we disable all here:

1) Disable Local sign in
2) Disable Microsoft Entra ID and set as default

Click Set up -> select Site Search

  • Disable Site search with generative AI (this is provided on route \search)
  • Disable Enable auto-suggestions

Go to portal.azure.com

Go to App registrations -> open Portal-dev01a

Go to API permissions

Click Add a permission -> find and add Dynamics CRM, user_impersonation (Access Common Data Service as organization users) -> then Microsoft Graph, User.Read (Sign in and read user profile) -> Click Grant admin consent for Your-Organization

Go to Authentication

Redirect URIs are required for obtaining authorization tokens.

Select Web -> add https://site-250101.powerappsportals.com (may already be present).

Click Add a Platform -> Select Single-page application -> add value `https://127.0.0.1:8001.

Click Save down there.

We need now to tweak some things in the Authentication but through Manifest as URI in Authentication do not allow saving the wild character *.

Go to Manifest

Find the following code and change to:

"spa": {
  "redirectUris": [
    "https://127.0.0.1:8001/*",
    "https://127.0.0.1:8002/*",
    "https://site-250101.powerappsportals.com/_layout/tokenhtml/",
    "https://site-250101.powerappsportals.com/page-not-found/"
  ]
}
Enter fullscreen mode Exit fullscreen mode

Click Save.

Note: instead of <url>/page-not-found/ and another one we can use <url>/* with the same result but let's stick to specific pages.

Notes:
127.0.0.1:8001 - will be provided with command npm run dev
127.0.0.1:8002 - command npm run preview
/page-not-found/ - endpoint for full page msal redirect
/_layout/tokenhtml/ - endpoint for silent msal

Next steps...

Go to Power Pages SPA: components Part 1 post.

Top comments (0)