Pages project, how to connect a branch preview deploy to a branch specific custom domain


I am trying to setup a staging environment so we can test the interaction of all our apps and api’s in way that is very close to our production setup.

Let’s say our production domain is and we have serval apps

In cloudflare DNS we have configured our apps to be accessible like this:

The api and the events apps have an express server and are hosted on heroku, and the widget and dashboard are serveless apps currently hosted on

Now i am working on setting up a staging environment, and I want to move my serverless apps from surge to cloudflare Pages (first only for staging, later also for production)

I registered a staging domain and I want all the apps to be accessible for the staging environment in a way that matches production, like:

I have been able to configure the api and events apps that run on heroku without a problem, including the subdomain cname’s on cloudflare.

Now I am trying to deploy the serverless apps on cloudflare pages, but it seems not possible to set it up how I want. I created a testapp (simple webpack/react application) to try things out.

I created a testapp project on Pages, connect it to the testapp github repo (main branch) and this is automatically the Production deploy. I can add a custom domain ( and this works.
Then I push a commit to the staging branch and I see a preview deploy happening. I read in the docs that this will be available via an alias (and it is), but I cannot add a custom domain for this branch (at least not in Pages). Also if I go to the DNS section of my domain and manually add a cname there, it gives an error when I go to (Error 522, connection timeout).

My question is, how can I accomplish this?
And a secondary question is, how to provide branch specific environment variables? (like netlify has with their netlify.toml config file)

Thank you

1 Like

I have tried to achieve the same, I’m having my production pointing to
And I have created a branch called staging and its works perfectly with , so I tried to create a CNAME for that points to , but it didn’t work…

Though I get Error 1016 Origin DNS error and not 522. (I do get 522 when I configure as a CNAME on Cloudflares as DNS and then add as a CNAME on my original DNS provider)

I guess its because we don’t verify our domain for previews alias domains, so Cloudflare blocks request that didn’t come from a verified domain (though we did verify it for production), so no-one will be able to use our pages at their domain.