Add Custom Subdomain to Azure Static Web App

Overview

If you have an Azure Static Web App created and want to use a custom subdomain on a domain registered hosted outside of Azure, follow these steps. For example, here is how I created https://SPblog.bullseyeconsulting.com which may still be available as you read this post. Azure grants up to two custom domains per static web app including an SSL certificate which means the site works using the encrypted HTTPS protocol. It is very easy and very free, an amazing value. Prerequisites

1. Azure Static Web Site hosted in your Azure account
2. The ability to add a CNAME DNS record via your domain’s DNS server.

Process

1. Navigate to your SWA in Azure > Custom domains > Add – Custom domain on other DNS

   

2. Enter the domain name without any punctuation except the periods > Next

   

3. Click the Copy button to copy the name value to your clipboard. Do not click Add.

   

4. In a new browser tab, navigate to your DNS Server editor and create a CNAME record with this value for your subdomain. Your UX may be different from ZoneEdit’s Streamlined Editor:

   

5. Return to the Azure “Add custom domain” browser tab and click Add. The status changes to Adding. As noted on the screen, validation may take a few hours, but in my small sample size of two subdomains, it has been under 15 minutes.
6. Once the status changes to Validated, click Close.
7. Optional: from the Custom domains page, set the subdomain as the default by selecting your new subdomain and clicking “Set default”

   

To test, click the Overview blade of your SWA and then the Browse button.

Reference: Set up a custom domain in Azure Static Web Apps