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

[tech39]

Hello,

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 mydomain.com and we have serval apps
api
events
widget
dashboard

In Cloudflare DNS we have configured our apps to be accessible like this:
api.mydomain.com
events.mydomain.com
widget.mydomain.com
dashboard.mydomain.com

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 surge.sh

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 mydomain-staging.com and I want all the apps to be accessible for the staging environment in a way that matches production, like:

api.mydomain-staging.com
widget.mydomain-staging.com
dashboard.mydomain-staging.com
events.mydomain-staging.com

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 (testapp.mydomain.com) 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 staging.testapp.pages.dev (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 mydomain-staging.com domain and manually add a cname there, it gives an error when I go to testapp.mydomain-staging.com (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

[mark.davydov]

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

Though I get Error 1016 Origin DNS error and not 522. (I do get 522 when I configure staging.testapp.pages.dev as a CNAME on Cloudflares as testapp-staging.mydomain.com DNS and then add testapp.mydomain.com.cdn.cloudflare.net. 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.dev pages at their domain.

[cov]

https://developers.cloudflare.com/pages/how-to/custom-branch-aliases/ worked for me. I’m using the Cloudflare/pages-action GitHub Action and setting its branch parameter to the environment name.