The app lives at tour-dash.pages.dev on Cloudflare Pages, and the
domain is registered at Namecheap. This is the click-by-click for joining the two, written so
you can follow it with the Namecheap tab open on one side and Cloudflare on the other.
Wherever it says yourdomain.com, read the domain you bought.
There are two ways to do this, and the choice comes down to one question: do
you want people to type the bare domain, or are you happy with a www in front of
it?
You keep the domain registered at Namecheap but hand its
DNS to Cloudflare by changing two nameserver entries. After that, both
yourdomain.com and www.yourdomain.com point at the app with a
couple of clicks and Cloudflare handles the certificate. This is the route to take.
You add one record in Namecheap and one custom domain in
Cloudflare. It works for a name with a prefix, such as www.yourdomain.com or
app.yourdomain.com. The bare domain cannot be attached to a Pages project
this way, so it has to redirect to the prefixed one instead.
Cloudflare Pages will only attach a bare domain when that domain's DNS is already on Cloudflare. That single rule is why Route A exists and why it is the one to use if you want the bare name to work.
Route A is also the one your other sites already use, since the Cloudflare
account that hosts Tour Dash is the same one Wrangler deploys to. Nothing about the app
changes on either route. The build, the deploy command and tour-dash.pages.dev
all keep working exactly as they do today.
Five stops. Two are in Cloudflare, one is in Namecheap, and two are waiting for the internet to notice.
Sign in to the Cloudflare dashboard with the account that hosts the
tour-dash project. On the account home page choose Add a domain (older
layouts call it Add a site), type yourdomain.com, pick the Free plan and
continue. Cloudflare scans whatever records Namecheap currently has and copies them over.
Look through that list before continuing: if the domain has email attached to it, the
MX records should be in the list. Continue to the last screen, which shows two
nameservers that look like ada.ns.cloudflare.com and
rob.ns.cloudflare.com. Leave that screen open.
In Namecheap go to Domain List, click Manage next to the domain, and stay on the Domain tab. Scroll to the Nameservers block. It will say Namecheap BasicDNS. Change the dropdown to Custom DNS, paste the first Cloudflare nameserver into the first field and the second into the second, then click the green tick to save. Namecheap warns that changes can take up to 48 hours. In practice it is usually well under an hour.
Back in Cloudflare the domain shows as Pending nameserver update. There is a Check nameservers now button; press it after ten minutes or so. When the status flips to Active Cloudflare also sends an email. Nothing else in this guide works until that happens, so this is a good moment to do something else.
In Cloudflare open Workers & Pages, click the tour-dash
project, then the Custom domains tab, then Set up a custom domain. Type
yourdomain.com and click Continue, then Activate domain.
Cloudflare creates the DNS record itself because the domain is now in the same account.
Do the same again for www.yourdomain.com so both spellings work.
Each custom domain sits at Initializing for a few minutes while the
certificate is issued, then turns Active. Open https://yourdomain.com
in a private window. You should see the landing page, and the padlock should be there
without any warning. Then go to section 04, because the app is not finished moving yet.
Use this only if you have a reason to keep Namecheap in charge of DNS. It gets
you www.yourdomain.com or app.yourdomain.com, plus a redirect from
the bare name.
Domain List, Manage, then the Advanced DNS tab. Under Host
Records click Add New Record. Type CNAME Record, host www
(or app if you prefer that address), value
tour-dash.pages.dev, TTL Automatic. Save with the green tick. If there
is an existing record for the same host, such as a parking-page URL Redirect
or a CNAME to parkingpage.namecheap.com, delete it first.
Still under Host Records, add a URL Redirect Record with host
@, value https://www.yourdomain.com, and set the type to
Permanent (301). That is what makes someone who types the bare name land on the
app instead of a Namecheap parking page.
Workers & Pages, the tour-dash project, Custom domains,
Set up a custom domain. Type www.yourdomain.com exactly as you set the
host in step 1. Cloudflare shows you the CNAME it expects, which is the one you already
added, and starts checking for it. Once the record is visible the status goes to
Active and the certificate is issued. This can take anywhere from a few minutes to
a few hours depending on how quickly Namecheap's change spreads.
If you start on Route B and later want the bare domain to serve the app directly, switch to Route A. The CNAME you added carries over when Cloudflare imports the records, so nothing is wasted.
The site loading at the new address is not the end. Two things still point at the old one, and one of them will lock people out of their accounts if it is left alone.
The app does not tell Supabase where to send people after a signup
confirmation or a password reset. It relies on the project's Site URL, which today is the
pages.dev address. Open the Supabase dashboard, project
wwgkjwudnixrfvcbwjpe, then Authentication, then URL
Configuration. Set Site URL to https://yourdomain.com (or the
www address if you went with Route B). Under Redirect URLs add
https://yourdomain.com/** and https://www.yourdomain.com/**, and
leave the existing tour-dash.pages.dev entry in place so old links keep
working. Until this is done, every reset-password email sends people back to the
pages.dev address.
There is one inside the app, the "View live site" button on the older
development report at /report, and this reports site links to
tour-dash.pages.dev in its footers and on the overview. None of them break,
because the pages.dev address stays live for as long as the project exists.
They are worth changing so the domain is the only address anyone ever sees. This is a
small code change and a redeploy of both sites; ask for it once the domain is active.
Anyone who bookmarked tour-dash.pages.dev will still get in, so
there is no rush. The social bios from the brand kit should carry the new address from now
on, and the landing page is where the domain earns its keep.
The same steps as a reference table, for when you are mid-click and just need the values.
| Where | Field | Value | Route |
|---|---|---|---|
| Namecheap, Domain tab, Nameservers | Dropdown | Custom DNS, then the two ns.cloudflare.com names Cloudflare gave you | A |
| Cloudflare, Workers & Pages, tour-dash, Custom domains | Domain | yourdomain.com, then again for www.yourdomain.com | A |
| Namecheap, Advanced DNS, Host Records | CNAME | Host www, value tour-dash.pages.dev, TTL Automatic | B |
| Namecheap, Advanced DNS, Host Records | URL Redirect | Host @, value https://www.yourdomain.com, Permanent (301) | B |
| Cloudflare, Workers & Pages, tour-dash, Custom domains | Domain | www.yourdomain.com | B |
| Supabase, Authentication, URL Configuration | Site URL | https://yourdomain.com | Both |
| Supabase, Authentication, URL Configuration | Redirect URLs | https://yourdomain.com/** and https://www.yourdomain.com/** | Both |
None of these are likely, but each one has cost someone an afternoon.
Namecheap's free email forwarding only works while the
domain uses Namecheap BasicDNS. If you have hello@yourdomain.com forwarding
to a Gmail inbox that way, switching nameservers turns it off. Cloudflare has its own
free Email Routing under the domain's Email tab, and setting it up takes about the same
five minutes. Paid mail such as Google Workspace or Namecheap Private Email is unaffected
as long as the MX records made it through the import in step 1.
A brand-new Namecheap domain ships with a parking-page
record. On Route A the Cloudflare import can bring it along, and on Route B it competes
with the CNAME you add. If you see a Namecheap "this domain is parked" page after the
switch, look for a record pointing at parkingpage.namecheap.com and delete
it.
DNS changes spread unevenly. Your phone on cellular can see the new site an hour before your laptop on home wifi does. If the padlock is fine in a private window and Cloudflare shows the custom domain as Active, it is done. Give it a few hours before assuming anything is wrong.
Adding a custom domain does not switch the
tour-dash.pages.dev address off, and there is no setting that does. The
deploy command in the project notes stays exactly the same, and every deploy updates both
addresses at once. If you ever want the old address to forward to the domain, that is a
single redirect rule in Cloudflare, not a change to the app.
Registrar lock, WHOIS privacy and auto-renew in Namecheap have nothing to do with any of this and can stay however they are. The domain stays registered at Namecheap on both routes; only where its DNS is answered from changes.