Add a Custom Domain for your Azure Static Web App

In this post I will go through the steps to add and configure a custom domain in Azure Static Web Apps. So whether you are coming from my previous post or not, you are in the right place.

I will assume you have a domain already registered with one of the many domain providers out there. If not, please go do that first and then come back here. You don’t need to worry about an SSL certificate, as it will be included and configured for you by Azure for your custom domain. How sweet is that?! One less thing to worry about.

If you got a domain registered, you are good to continue.

I will be using Name.com as my domain provider. But fear not, as many domain registrars use similar tools to perform domain configurations so you should be able to follow along using your chosen domain provider.

Configure the WWW Subdomain

The WWW solely exists to identify the web address. Compared to other subdomains like FTP or SMTP which are used to signify file and email servers, the WWW signifies that this is a web server’s address. So, even though you don’t technically need to use it, you do want to make sure you account for the use of the WWW subdomain in your site. So, if someone happens to visit www.yourdomain.com you want to make sure they land on the intended URL of your site, with or without www (some hosting platforms automatically take care of this for you, like Render). For SEO purposes, you want to make sure your URLs are consistent across your website. Remember, Google sees www.yoursite.com and yoursite.com as two separate sites so you need to redirect one to the other. You will need to decide if your website URLs will show the WWW or not. Whichever you choose is fine, as long as all URLs are the same throughout your site and not mixed.

In my case, I want any visits to https://www.hsnyc.co to redirect to https://hsnyc.co because I have been using non-www URLs since the publishing of my website. So, I will show you how to configure the WWW subdomain to forward to your root domain, and how to do it the other way too, making the root domain redirect to www.yourdomain.com.

In an effort to simplify the instructions I will make some assumptions and skip some details, like “login to your Azure Portal” and so on.. as this should be somewhat obvious…

Ok, with that out of the way, Lets go!

Step 1: Create a CNAME in your domain registrar

In your Azure Portal, start by copying your Azure default URL because you are going to need it.

In your domain provider (registrar), find the Manage DNS Records option for your domain.

You will then add a DNS entry with the following settings:

Type	Host	Answer / Value	TTL
CNAME	www	[your Azure default URL]	[leave as default value]

Step 2: Create a CNAME in Azure Static Web Apps

Back in the Azure Portal, under Custom domains, click on Add, and pick Custom domain on other DNS.

Add your domain with the www prefix, for example www.hsnyc.co. Then click Add. It will take a few minutes while it validates the record.

Once it is validated you will see the ‘Validated’ green check.

You should now be able to check your static site by visiting your domain with the www subdomain.

Now, let’s move on to the root domain.

Configure the Root Domain (Apex Domain)

This is the domain without any subdomain, otherwise known as the Root or Apex domain, for example hsnyc.co is my root domain.

Best choice to configure your root domain is to use an ALIAS, ANAME or a CNAME record for the best performance. You can also use an A record but Azure does not recommend this approach.

Step 1: Validate ownership of root domain

Under Custom domains, click on Add, and pick Custom domain on other DNS. (yes, same as before).

Add your root domain (without the www prefix this time, for example hsnyc.co). Then click Next.

Leave Hostname record type as TXT. You can also use a CNAME but I will show how to do it using a TXT record. Click on Generate code. We will use this code to validate the domain.

This may take a minute or two to generate. Once it is generated, you will see ‘Validating’ under Status. Once we add the TXT record in our registrar it should validate.

Copy this generated value.

On your registrar, under DNS settings (same as in previous steps) create a TXT records with the following values:

Type	Host	Answer / Value	TTL
TXT	@	[The TXT generated code value you copied in the Azure portal]	[leave as default value]

Step 2: Add CNAME, ALIAS or A Record

In the Azure portal, again copy your Azure default URL. Then head back to your registrar’s DNS settings.

Some registrars use ANAME instead of ALIAS, but this is basically the same. In my case, I will be using a ANAME record since my registrar uses this record in place of ALIAS. Also, since I already configured my www subdomain with a CNAME my domain registrar would not allow me to use another one (CNAME) pointing to the same host.

On your registrar, under DNS settings create an ALIAS (or ANAME) record with the following values:

Type	Host	Answer / Value	TTL
ANAME	@	[your Azure default URL]	[leave as default value]

This is how it looks like once added in my registrar (name.com):

Once that is added, you can go back to the Azure portal and check that the domain has been validated. This may take several minutes to complete. You can click Refresh after a few minutes to refresh the screen. In rare cases it may take longer, up to 12 hours.

Once you domain validates you should be able to visit your site using www and without it.

NOTE: If you are migrating your domain from another registrar make sure you delete or update any records pointing to the old host.. like CNAME, ALIAS or A records. Since I just updated the CNAME and ALIAS, I forget to delete an A record with my old hosts IP and it was causing my site not to load until I deleted the record (and of course I realized this after an hour of trying to figure out why the site was not loading).

Set your Default Domain

This is the last step. You want to make sure you select the default domain you want to use. In my case, like I mentioned earlier, I want my root domain to be the URL that is used to serve all my site pages, without the www. So I set my root as the default. Azure will then take care of routing my traffic from www.hsnyc.co to hsnyc.co. If you want to use your domain with www, then just select it as the default. It’s that simple.

Hope this was useful and if you would like more details on Azure’s Custom domain setup, check out their resource page.

Let me know if you were able to setup your domain successfully or if you had any issues in the comments below. Peace ✌️.