Setup root level custom domain for Azure Static Web App(preview)

Azure Static web app which is in preview mode does not support creating root level custom domain. (Setup a custom domain in Azure Static Web Apps | Microsoft Docs). For example you can have https://www.flickwall.com but not https://flickwall.com.

One of the workaround mentioned in this blog (How to configure a root domain in an Azure Static Web App — Burke Holland) is creating CNAME records on Cloudflare. This works by creating two CNAME entries one for root domain and other for “www”. This works as Cloudflare supports CNAME flattening. So instead of creating an A record which can point to IP address, now you can directly add root domain in CNAME tag.

Above solution also requires removing NS entries from your Azure DNS. Azure does not support removing NS entries, however you can co-host with other NS entries from Clodflare. If you manage to add NS entries and make it work, you will face another issue with root level certificate. Azure static web app provides free non-root level certificate which will not work for https://flickwall.com/. Azure Static web app currently does not support binding of our own certificate(Can you bring your own certificate to Azure Static WebApp? — Microsoft Q&A).

I used Azure Front Door to support custom root level domain. AFD provides scalable and secure entry point to your applications. AFD has three parts, frontends, backend pools and routing rule.

You can add custom domain to AFD with steps described here — Tutorial — Add custom domain to your Azure Front Door configuration | Microsoft Docs. After this step you can onboard your own certificates with steps described here- Tutorial — Configure HTTPS on a custom domain for Azure Front Door | Microsoft Docs. I used Namecheap to get the root level domain certificate for as low as $5 a year.

Next, you can add your Azure Static Web App as backend with backend pool.

You can also define routing rules for http and https traffic. I created two rules one for https traffic which forwards to backend pool and another for http incoming traffic which redirects it to https. This step is required. If you simply forward the http to https then browser will flag the request as “not secure connection”. AFD also supports creating firewall policies for protection against DoS attacks.