To add your apex domain to Azure Static Web App, you must complete the below steps in order.

1. You'll need to have Azure DNS created as some providers like GoDaddy/Google. They don't support domain records that affect configuring your apex domain.
2. Once you create your Azure DNS with the same name as your Apex domain name. You'll need to go to your Azure Static Web App and create a TXT record, which will validate your ownership of the Apex domain.
3. Then, you'll need to create an A record which points to your Azure static web app resource.
4. If all of the above is done, you can create a www CNAME record, which points to your apex domain. So that whenever users type www.yourdomain.com, they get redirected to yourdomain.com.

I had faced many issues while adding my custom domain from GoDaddy to Azure. So I thought I'd write this detailed post on adding a custom domain to Azure Static Web App.

Basic Terminology

First, I'll explain some basics before going into detail with the steps for adding a domain.

• Domain - A domain name is an easy-to-remember name that's associated with a physical IP address on the Internet.
• Sub Domain - A subdomain is a prefix to a domain name; for example, google.com has multiple subdomains like search.google.com, mail.google.com, etc. Each subdomain can be considered a different compartment/site. So it will have a different IP address.
• Name Servers - Nameservers are a fundamental part of the Domain Name System (DNS). They allow using domains instead of IP addresses.
• Apex Domain - An apex domain is a custom domain that does not contain a subdomain. If you want to add the domain to your Azure Static Web App, you bought it from GoDaddy or other domain providers. Will be explaining this in more detail in a later section.
• DNS Records - DNS records are text instructions stored on DNS servers. They help with the DNS lookup and redirect to the correct IP address.
• A Record - A stands for Address. This is the most fundamental type of DNS record, indicates the IP address of the given domain
• CNAME Record - CNAME stands for a Canonical Name record. This DNS record maps an alias name to a true or canonical domain name.
• TXT Record - TXT stands for Text record. This type of DNS record has some text value, which is majorly used for Domain verification by other services, like Azure, Google, etc.

Creating Azure DNS resource

Azure DNS resource is a must for configuring Apex domains as Azure Static Web App doesn't provide IP addresses. It is managed internally by Azure using load balancers etc. So you'll need to create a CNAME record for your Apex domain, which many domain nameservers don't implement.

Creating an Azure DNS with the same name is preferred. You can go about creating the Azure DNS following this document.

Once you're done, you'll be able to see the nameservers in the top right plane. These are the nameservers going to use from now on.

Now go to your domain registrar and change your name servers to those you created with Azure DNS Zone.

Changing nameserver for your GoDaddy domain

First, go to the GoDaddy website and log in. You'll see a page similar to below. If you're unable to find your domain, go to the top-right corner and click on that arrow to see a menu appearing with an option for Products.

You'll be able to see the domain you've bought; click on the three dots icon, where you'll see the Manage DNS option, allowing you to change the nameservers for your domain.

Then you'll see an option called Enter my own nameservers (advanced). But make sure that you create your Azure DNS and note down the nameservers, which you'll find in the top-right plane, before trying to change your nameservers.

Please make sure that you copy the nameserver without the last dot, as it will not be a valid address if you copy it.

Once you update these nameservers, GoDaddy cannot manage your DNS records; all the DNS records should be governed by the Azure DNS you've created.

With this, you've finally been able to move your nameserver to Azure DNS. The next step is to update the DNS records for your domain.

Adding TXT & A record For Apex Domain in Azure DNS

Goto to your Azure Static Web App and then navigate to Custom Domain Section, where you'll be able to see an add button. You'll first mention your apex domain, i.e., only domain.com; there should not be any www etc., prefixed to it. Then click on next, you should be able to see a similar image as below.

Clicking on Generate will create a unique TXT value. You need to add a domain record to your Azure DNS so that Azure knows that you're the owner of the domain you're trying to connect.

Now you'll need to wait for at least 1-2 hours for Azure to validate your ownership. Once this is done, you can add your A record with Azure DNS.

As Azure Static Website is managed by Azure, we can add A record which is canonical in nature, to the Azure resource. Once this is done, we can type in domain.com in the web browser to know if we have mapped it correctly.

Adding a www subdomain to your Azure static website

It's good to add a www CNAME record to point to the same website so that if users type www.domain.com, they get redirected to same address.

You can configure the same in your custom domain section for your azure static website.

This is very easy compared to adding your apex domain. You'll just need to create a CNAME record pointing to your Azure Static Website address in Azure DNS

The process is explained in detail in the official docs for the same.

Conclusion

Once you create these three records TXT, A, CNAME for www, your apex domain is fully configured to work with your Azure Static Web app/site.

Please also go through the official documentation if you still face any issues with adding a custom domain.