Cloudflare Apex Proxying for Azure Static Web Apps with www Redirect

azurecloudflarednsstatic-web-apps

If you want example.com to sit behind Cloudflare and still serve an Azure Static Web App, the main wrinkle is the apex record. Azure recommends an ALIAS, ANAME, or equivalent flattened record for the root domain, and Cloudflare supports that pattern with apex CNAME flattening.

This walkthrough uses Cloudflare for DNS and proxying, connects the apex domain to Azure Static Web Apps, and then redirects www.example.com back to https://example.com.

Before you start

  • Your domain is added to Cloudflare and your registrar is using Cloudflare name servers.
  • You already have an Azure Static Web App.
  • You know your Static Web App generated hostname, such as polite-wave-012345678.1.azurestaticapps.net.

In the Azure portal, copy the generated URL from your Static Web App overview page before you begin.

Why the apex setup works

Azure's apex-domain guidance for external DNS providers calls for an ALIAS, ANAME, or CNAME-flattening style setup at the root domain. Cloudflare allows a CNAME at the zone apex by flattening it before responding to DNS queries, so you can point example.com at your Azure Static Web App hostname without falling back to a single regional A record.

That keeps the configuration aligned with Azure's recommended approach for apex domains.

1. Add the domain to Cloudflare

Create the zone in Cloudflare if you have not already done so, then update your registrar to use the Cloudflare name servers for the domain.

Once the zone is active, open the DNS page for the domain in Cloudflare.

2. Create the apex CNAME in Cloudflare

Add a DNS record for the root domain:

Type: CNAME
Name: @
Target: <your-static-web-app-hostname>
Proxy status: Proxied

Example:

Type: CNAME
Name: @
Target: polite-wave-012345678.1.azurestaticapps.net
Proxy status: Proxied

Cloudflare flattens this apex CNAME automatically, which is the key detail that makes this pattern viable on the root domain.

3. Add the apex custom domain in Azure Static Web Apps

In the Azure portal:

  1. Open your Static Web App.
  2. Go to Settings > Custom domains.
  3. Select + Add.
  4. Choose Custom domain on other DNS.
  5. Enter your apex domain, for example example.com.
  6. Continue to the validation step.

For an apex domain on external DNS, Azure will ask you to validate ownership with a TXT record before the custom domain can finish attaching.

4. Add the TXT record that Azure generates

In Azure, choose the TXT validation option and generate the validation code. Then add the record in Cloudflare using the generated value.

Type: TXT
Name: @
Content: <value generated by Azure>

After the TXT record is in place, return to Azure and complete the custom domain validation. If Azure does not validate immediately, wait for DNS propagation and try again.

5. Verify the apex domain

Once validation completes, browse to https://example.com.

You should see your Azure Static Web App load through Cloudflare on the apex domain with HTTPS enabled.

6. Redirect www to the apex domain

Cloudflare's redirect guidance uses Bulk Redirects for this pattern. Create a redirect from www.example.com to https://example.com with:

  • Status code: 301
  • Preserve query string: enabled
  • Subpath matching: enabled
  • Preserve path suffix: enabled

Then add a proxied DNS record for www so Cloudflare can receive the request:

Type: A
Name: www
IPv4 address: 192.0.2.1
Proxy status: Proxied

The placeholder IP is intentional for this redirect pattern. Traffic terminates at Cloudflare and gets forwarded by the redirect rule instead of reaching that origin address.

7. Test the redirect

After the DNS and redirect rule propagate, test the redirect:

curl --head -i https://www.example.com/

You should get a 301 response with a location header pointing to https://example.com.

Final record summary

For this setup, the important DNS entries are:

@    CNAME  <your-static-web-app-hostname>   Proxied
@    TXT    <azure-validation-code>
www  A      192.0.2.1                        Proxied

The result is:

  • example.com serves your Azure Static Web App through Cloudflare
  • www.example.com permanently redirects to https://example.com
  • Azure still gets explicit ownership validation through the TXT record

References