Power Pages SPA: main setup

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 @yourname.onmicrosoft.com.

I have it set to [e-mail] -> 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 dev01 -> Group None -> Region Norway - Default -> Type Developer -> Add a Dataverse data store Yes activated by default -> click Next -> select Language iaw with your region, see Note on Language further down, I select norsk bookmål (Norge), Deploy sample apps and data No -> enter URL for dev01 -> 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.

Open environment dev01 -> Settings -> Privacy + Security

While still in admin.powerplatform.microsoft.com, you need to enable js extensions.

Find Blocked Attachments -> remove js; wording in Block these file extensions.

Go to make.powerpages.microsoft.com -> select environment dev01

First -> Add English

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

Click on the settings cog (top right corner) -> find Language and time zone -> right-click Change your language -> open in new Tab -> Preferred language to English (United States) -> Regional format toEnglish (South Africa) to have it like this 2000/08/31; 01:01 - 23:59 that is my own preference -> Close this Tab

In still opened tab make.powerpages.microsoft.com click again on the settings cog (top right corner) -> select Advanced settings -> Instillinger -> Administrasjon -> Språk -> find and select Engelsk -> click Bruk -> click OK.

Wait until the English language is activated (could take some minutes).

Still on this Instillinger tab -> click on the settings cog (top right) -> select Alternativer -> Språk tab -> in Brukergrensesnittspråk select Engelsk -> select Formatter tab -> select Engelsk (Sor-Afrika) -> click OK -> close this tab.

Provision a new portal

In environment dev01 -> click Start from blank -> Give your site a name dev01a -> Create a web address dev01a (dev01 was not available) -> select English (if it's not added as explained above, it will not be there) -> click Done.

The website will be provisioned shortly.

Open 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

Go to make.powerapps.com -> select environment dev01

Click on the settings cog (top right corner) -> select Power Apps settings -> Choose language English -> click Save and refresh.

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) and User.Read.All (Read all users' full profiles) -> Click Grant admin consent for Your-Organization

Go to Authentication

Redirect URIs are required for obtaining authorization tokens.

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

Click Add a Platform -> Select Single-page application -> add http://127.0.0.1:8000/ -> click Configure.

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 * or http scheme.

Go to Manifest

Find the following code and change from:

"spa": {
    "redirectUris": [
        "https://127.0.0.1:8000/"
    ]
}

to:

"spa": {
    "redirectUris": [
        "http://127.0.0.1:8000/page-not-found/token-redirect/",
        "https://dev01a.powerappsportals.com/page-not-found/token-redirect/"
    ]
}

Click Save.

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

Next steps...

Go to Power Pages SPA: components Part 1 post.