Set up a custom domain with Azure DNS in Azure Static Web Apps

  • Article

By default, Azure Static Web Apps provides an autogenerated domain name for your website, but you can point a custom domain to your site. Free SSL/TLS certificates are automatically created for the autogenerated domain name and any custom domains you may add.

Suppose you buy the domain example.com from a domain name registrar and then create a zone with the name example.com in Azure DNS. You want www.example.com to point to your Static Web Apps site.

Prerequisites

Map the domain to your website

Now that your domain is hosted on Azure DNS, you can create a CNAME record for www.<your domain> to point to your Static Web App.

  1. Sign in to the Azure portal.

  2. Enter the name of your static web app in the top search bar, or find the static web app in your resources.

  3. Under Settings, select Custom domains.

  4. Select + Add, then select Custom domain on Azure DNS.

  5. Enter the following values in the Add custom domain on Azure DNS window.

    Field name Value
    DNS zone Select your domain name hosted on Azure DNS
    Subdomain www

    The Full domain is updated and should match the desired custom domain name.

  6. Select Add

Static Web Apps makes the necessary adjustments to the DNS zone (including adding a CNAME), then validates the changes are available in the global DNS system.

Warning

If you receive the message CNAME Record is invalid, then check that your DNS zone lists the Microsoft DNS services with your DNS registrar. If you have recently moved the domain to Azure DNS, you may need to wait for DNS propagation before adding the custom domain.

Validate the custom domain

It may take some time for the DNS changes to propagate. The default time for Azure DNS is 1 hour.

Open a new browser and go to your domain (for example, https://www.example.com). Inspect the location to verify that your site is served securely using https.