Hosting Multiple Static Web Apps on Azure using common custom domain name

Question

I have 3 to 5 direct static web apps (not storage account static web apps) that I have hosted them on Azure with custom domain name as below. for now all working fine,

www.app1.com
www.app2.com
www.app3.com

i will be creating common domain name www.testing.com across all apps.

i need to tag all the above static web apps to this common domain name and should able to browse like below,

www.testing.com/app1
www.testing.com/app2
www.testing.com/app3 etc.

This will prevent cross-domain requests and sharing of local/session storage across all photon apps.

How can i achieve this in azure?

I have tried using Azure front door but it didn't work for me.

Answer 1

To achieve this scenario in Azure front door, you can make use of below workaround:

I used a web app as I don't have a custom domain in a static web app. You can follow the same steps as below:

In web App -> configuration in path mapping I added path /app1 same for all apps

In static web app -> Edit workflow -> staticwebapp.config.json add your path /app1 same for other apps. Check this MsDoc

In Azure front door add origin group like below:

Update route like below:

when I redirect with front door with app1 and app2 it redirected successfully like below:

So, if you want to access www.testing.com/in Azure front door in routes you have to add app1, app2, app3 as three routes with origins. Then app1 should go to application1 same for all also static apps make sure to edit workflow and add your path for all apps.

if I get a request on this with /app1, it should forward that request to default Origin group like this Default Origin group is my app1 like this if /app1 should need to access make sure /app1also available in your web app (path mapping).

Reference:

Azure front Door routing rule not working throws error "The resource you are looking for has been removed, had its name changed, or is temporarily unavailable." - Microsoft Q&A by GitaraniSharma