Simplify App Management: Custom Domains for Canvas Apps

Canvas apps in Power Apps offer incredible flexibility for building tailored applications. However, by default, canvas apps lack the ability to have custom domains, so most of the cases you have to share the long, hard to remember links with the end users, which they have to bookmark not to lose.

Furthermore, assuming you are doing proper ALM (Application Lifecycle Management) and have at least three environments for the application, it is sometimes hard to tell if you are in development, uat or production environment, and can sometimes lead you to validating your development changes in UAT (User acceptance) environment.

Introduction

We've found a clever workaround to enable custom domains in canvas apps. In this article, I'll explore the benefits of using custom domains, walk you through the step-by-step process using Azure, and provide practical examples to help you implement this solution seamlessly.

Benefits

1. Branding: Custom domains allow you to create a branded experience for your users. By using your organization's domain or subdomain, you can reinforce your brand identity and create a more professional appearance.
2. Easy App Management: With custom domains, you can update or delete your app without changing the link. This makes it easier to manage your app and ensures that users can access it even if changes are made.
3. User-Friendly URLs: Custom domains make it easier for users to remember and access your app. By using a simple and meaningful domain or subdomain, you can create a user-friendly URL that is easy to type, bookmark, and share.
4. Better version control: Since you can modify the favicon (the icon next to the title in url bar) and the title of the application, you are also able to set the title to contain the environment in which the application is in, for example, Falck GPT Dev.

Let's Get Started

Using custom domains in canvas apps is quite simple and straight forward, so will not be spending much time on this. To understand the core concept and logic here, you can think of the static app we will review later as a mirror, that is just showing the reflection of the canvas app that Microsoft hosts at apps.powerapps.com.
This will be always up to date, so there should not be any problems as such, at least none that we have encountered.

Registering Your Domain

First, we will need to either use an existing domain, if you have one, or purchase a new one. For our power platform and AI services at Falck we opted for purchasing a new domain, not to use the one that is currently exposed to any of our customers. Of course every solution in the Power Platform is secured using AD login, and it is best to choose for search engines not to index the pages that we want to keep for internal use, but there should not be any problems even if you do.

There are many services that provide domain registration; my go to used to be google.domains, but unfortunately they are no longer offering domain name registration. Best solution would be to purchase a domain from Azure, as it will be much easier from cost aspect and overall setup, but for our case we chose to go with the external provider approach, as we were unable to get the specific domain suffix (.ai).

Setting up the static web app

Before we begin setting up our custom domain, let me explain what I mean by a static web app. A static web app is a website made up of pre-built files, served directly from a server without processing or queries. Ideal for content that doesn't change frequently. With a clear understanding of what a static web app is, it is now time to set it up and deploy the code to it.

We use Azure for almost everything, so in this guide I will be focusing on that as well. Truth be told, this can be basically any other hosting provider, or even GitHub pages if you would like to just explore this custom domain workaround for canvas apps. Anything that can host a static html page will work for us. This will be a general overview of what you need to follow to set the web app, so for more details you can go to Microsoft learn to see how to create a new static web app, install visual studio code, deploy to the app directly (or set up a repo and host the code there).

We have made a super simple repository, which you can find here; there are so many different ways you can address this, you can have one single file and add some logic inside it. We just chose this approach as we can add new applications, and all three Dev, UAT and prod instances in a matter of 30 seconds, without having to change the domain
DNS settings.

static-web-app/
|-- index.html (root level, AI solution, prod version)
|-- billing/
|   |-- index.html (billing solution, prod app)
|   |-- dev/
|   |   |-- index.html (billing solution, dev app)
|   |-- uat/
|      |-- index.html (billing solution, uat app)
|-- fire/
    |-- index.html
    |-- dev/
    |   |-- index.html
    |-- uat/
        |-- index.html

The only two things that we change for each of these index.html files is the link in the iframe, and the title of the page. Our strategy is simple - the title contains the solution name, and the environment prefix. So at any given time you can tell in which env you are in, and you will not be by accident testing dev changes in UAT environment, or modifying prod data by accident, if you are not familiar with the app id itself. For example, the Falck GPT solution title would be Falck GPT Dev for our development instance.

Setting up DNS for the domain

Here the general idea is simple, we need to point the domain to our new static app either in Azure or another provider. In Azure there is an option to link a custom domain, and you can follow the interactive setup in the portal itself. It will also describe what records in DNS you need to create or modify for it to point to the right place.

The second thing we need to do is make sure that users are going to be always redirected to www, and that we enforce HTTPS. Good thing for us, if you followed the guide and opted to go for Azure Static Web App, the SSL certificate is included in both generated domain, and any other custom domain you link to the static app. It was a little surprise from Microsoft end, but we had reviewed the documentation, and were pleasantly surprised about this.

Here's a simple example using GoDaddy as a domain registrar:
1. Log in to your GoDaddy account.
2. Navigate to the "DNS" tab for your domain.
3. Scroll down to the "Forwarding" section and click on "Add".
4. Select https, enter the www subdomain (e.g., "www.example.com") in the "Forward to" field, and select a permanent redirect (301)

Remember, it might take up to 48 hours for the changes to take place, but usually it will updated within 10-15 minutes, so keep it in mind before assuming something is not working as expected. You will still be able to test the functionality of the solution using the generated link in static app when deploying, before setting up custom domain, so you can see that it works before you proceed.

Enjoy 😊
Once you have pointed the domain to the web app, after some time it will work for your users, and now all of your canvas apps will have a nice domain, that users do not need to necessarily bookmark; it will have a custom favicon, and a title that you can customize to include the version or environment in which the application is in.

In case you find any better solution or approach, feel free to reach out and let me know, and I will update the guide. This was a quick shower thought that took 15 minutes to set up, and ended up being a great idea that we plan to adopt in all of our solutions to improve the user experience and further increase the professionalism of Power Platform, especially since we are working on enterprise scale applications with it.