Recently, I released a web application called cinefil.me. During development I wanted to debug an application like a production URL as an alpha development. My goal was to set up a subdomain test.cinefil.me using Cloudflare Pages.

Prerequisites

• The application is already deployed on Cloudflare Pages
• A custom domain has been added to the project (and DNS is managed via Cloudflare)

Setting Up a Subdomain on Cloudflare Pages

Add Subdomain on Cloudflare Pages

Navigate to “Workers & Pages” and select the application that you want to add a subdomain to. Then go to the “Custom domains” tab and click “Set up a custom domain”.
Enter your ideal subdomain and click “Continue”.

Cloudflare will automatically create a DNS record. Once it finishes and the status changes to “Active”, your subdomain is ready to access.

Set up DNS record

By default, the subdomain points to your main Pages development, e.g. YOUR_APPLICATION_NAME.pages.dev. However, I wanted the subdomain to display the develop branch instead of main (or master) branch.

When you push to develop branch, it will be deployed to a preview URL and develop.YOUR_APPLICATION_NAME.pages.dev. We’ll make the subdomain point to that URL instead.
Go to “Manage Cloudflare DNS” and click “Edit” of subdomain you added.

Then change like this (the example is for case test.cinefil.me):

• Type: CNAME
• Name: test
• Target: cinefil.pages.dev → develop.cinefil.pages.dev

※ cinefil will be your application name.