How to CNAME a non-production branch in Cloudflare Pages

Hey there,

We’re just switching over from Netlify, but we’re having a couple issues getting our dev branches up and running.

Our main app uses the domain “app.example.com”. This is accessible now that we’ve added the correct custom domain settings.

Accessing “develop.example-app.pages.dev” also works fine, but when I try to CNAME it I start to get errors. For example, I’ve tried to cname with the following:

In the first example I receive an SSL mismatch error. In the second I receive a 522 timeout, but it occurs so quickly I think it must have something to do with us not explicitly having the “devapp” subdomain in our Cloudlare pages config.

Does anybody know if it’s possible for us to do this? And if so, how? I’ve found a couple forum posts online that describe the same setup I’ve tried, but that’s not working for me (I’m guessing because our production app is already a subdomain).

Thanks!

Hey,

To use a custom domain on a specific branch of your Pages project, first follow the instructions to add the custom domain to your Pages project. If your custom domain is not whitelisted on Pages, this will not work. Next, go to your DNS settings, and find the CNAME record for your custom domain pointing to your Pages.dev domain. Add the branch name to the front of your Pages.dev domain, so a CNAME for dev.mywebsite.com pointing to excelsior.pages.dev would be changed to point toward dev.excelsior.pages.dev.

Thanks for the reply!

I’m not quite sure that this answers my specific use case. Our main production branch is itself on a subdomain (app.example.com). Aside from that, I’ve tried to mirror the same configuration you mention in the examples I gave, but neither seem to work.

I’m assuming that Pages doesn’t support custom subdomains for previews when the main domain is a subdomain, but I’d love to get a definitive answer on it before trying something else.

It does.

Let’s say you want the staging branch that you want a custom domain for. Add the custom domain which you want, let’s say staging.app.example.com. Once it’s active go to your DNS settings and modify the record Pages automatically added. Change the pages.dev link to staging.<project>.pages.dev from <project>.pages.dev

1 Like

Thanks! I didn’t think to change the CNAME record after adding it to Pages.

For anyone stumbling upon this in the future, here is my setup:

Production: app.example.com (Added as a domain in Pages)
Develop: dev.app.example.com (Added as a domain in Pages, and the CNAME record changed to “develop.app-name.pages.dev”)

Alternatively, Develop can be added without the nested subdomain with the following:

Develop: devapp.example.com (Added as a domain in Pages, and the CNAME record changed to “develop.app-name.pages.dev”)

For me, I had to add and re-add the custom domain for the subdomain a couple times. The first time it said it worked, but after an hour things still weren’t working. Once I redid the process, things started working!

Thanks again for your help!

1 Like

This topic was automatically closed 3 days after the last reply. New replies are no longer allowed.