Previously
In my 3 part blog series about Azure Static Web Apps (Part 1, Part 2, Part 3), I showed how the fundamentals for this site and its blog section were set up. Now, obviously this site is using a custom domain, and since I have been working on building new platforms using subdomains with colleagues, this also needed to be configured.
While this might have been an easy job using Azure DNS, it unfortunately doesn't support DNSsec yet, so I had to rely on the register for DNS settings. This wasn't an easy process so let me share my findings.
Custom domains for Azure Static Web Apps
A Static Web App always comes with an auto-generated url which looks something like this: polite-pond-021b2d203.1.azurestaticapps.net. While these are often very funny urls, they are not very recognizable or useful for personal or business purposes. Let's look at how we can add a custom domain!
When you are in the interface of your Azure Static Web App, go to the Customs domains tab in the blade. Continue by clicking on + Add to add a new domain.
A new window will appear on the right hand side asking you to add your domain. NOTE: For this, it is important to know that there is a difference between Yourdomain.com and www.Yourdomain.com. This means that, for proper url usage, you will have to differentiate between a url with and without the ‘www.’.
When adding your domain without ‘www.’, you need to use a TXT record type. Click on Generate code and wait until the unique ID has been generated. Copy the code and click on Close.
You will see that your custom domain is awaiting validation from your register’s DNS.
Before going to your register’s DNS settings to add the TXT record, you will also have to copy the auto-generated name of the Static Web App to use for the CNAME you will have to add afterwards.
My register uses Direct Admin as management portal for domains, DNS and more. This may vary for you and your register, so take this into account.
Add the TXT record with @ as Host and the copied ID as Value.
Now let's also add the CNAME record for the ‘www.’ domain. NOTE: I noticed when your register is using Direct Admin as management portal, you need to remove your A and AAAA record for ‘www’ first, and when adding your values you need to add a . (dot) behind it.
After adding both the TXT and CNAME record, it is possible that you are required to also add a Forwarding/ Redirect to directly go to your ‘www.’ domain like in this example: yourdomain.com => www.yourdomain.com.
Now let's go back to Azure and add the domain again by repeating the previous steps but now add your domain with ‘www.’ in front of it.
For custom domains with ‘www.’ you will need a CNAME record type and click on Add. It will now validate the previous added CNAME record at your register. Depending on the Time to Live (TTL) set within your DNS settings, this can take several minutes to hours before this might be validated and added.
When both domains are validated and ready, they will appear as Validated with a green check in front of it. Now you can use your custom domain for your Azure Static Web App!
Subdomains for Azure Static Web Apps
Since I have been working on multiple new websites which are using subdomains with my colleagues, I have noticed that subdomains can be quite unclear on how to add them properly.
For the multiple new websites we are building, we do use a separate Static Web App per website, which uses the subdomains as custom domain. This should separate workloads better and make them act independently from each other. Let them function as sort of “microservices”.
The process of adding a subdomain is similar, but now use the subdomain within your domain, such as events.yourdomain.com.
When adding your subdomain with the TXT record to your register, this can't always be done with the @ as host. If your register creates separate controls for subdomains, this might work, but in my case I had to add the subdomain as value instead of the @.
The same goes for the CNAME record, instead of using ‘www.’ I had to use the ‘www.’ subdomain.
After I added the subdomains at my register, it was just a matter of adding the CNAME in Azure and validating them.
But that is still not all, I still had to add the Forward/ Redirect to the ‘www.’ subdomain, but that wasn't possible straight away from any menu within the Direct Admin management portal of my register.
To fix this, I had to make an A record, which requires the IP address of your Azure Static Web App, but I first needed to know the IP of the Static Web app. For this, I used WhatsMyIP's DNS-LookUp tool.
Now knowing the IP, I could add the A record with the subdomain as Host and it now Forwards/ Redirects to the ‘www.’ subdomain.
What's next?
It has been a double blog Friday, stay tuned for more next week and be suprised by the subject.