Module 7: Ship to Production
Lesson 4

Connecting Your Domain — DNS records, HTTPS, propagation

The Goal

By the end of this lesson, typing yourapp.com into any browser will load your app — with the secure padlock (HTTPS) working automatically. This is the step that turns "my project" into "my product."

There's a little waiting involved (DNS changes take time to spread), so start this when you've got a few minutes to spare and can come back later if needed.

Step 1: Add Your Domain in Vercel

  1. Go to vercel.com → your project → Settings → Domains.
  2. Type your domain into the input field: yourapp.com.
  3. Click Add.
  4. Vercel will ask how to handle the www version. Choose Redirect www to root — this makes yourapp.com the primary address and quietly forwards www.yourapp.com to it. (This is the most common choice.)
  5. Vercel will then show you the DNS records you need to add. Keep this screen open — you're about to copy from it.

Step 2: Set Up DNS

Vercel will show you something like this:

Type    Name    Value
A       @       76.76.21.21
CNAME   www     cname.vercel-dns.com

Two records, two jobs:

RecordWhat it does
A recordPoints your root domain (yourapp.com) to an IP address — Vercel's server. The @ means "the root domain itself."
CNAME recordPoints www.yourapp.com to a Vercel address, as an alias.

Always use the exact values Vercel shows you — IP addresses can change over time, so don't copy the ones in this example. Trust your dashboard.

You now have two ways to apply these. Pick one.

Path A: Add the Records at Your Registrar

Use this if you want to keep DNS at your registrar (for example, because you also use the domain for email). Here's how it looks on Namecheap — other registrars are very similar.

  1. Log into Namecheap.
  2. Go to Domain List → click Manage next to your domain.
  3. Open the Advanced DNS tab.
  4. Add the A record:
    • Type: A Record
    • Host: @
    • Value: the IP Vercel gave you (e.g. 76.76.21.21)
    • TTL: Automatic
  5. Add the CNAME record:
    • Type: CNAME Record
    • Host: www
    • Value: cname.vercel-dns.com
    • TTL: Automatic
  6. Delete any existing A or CNAME records that conflict — leftover records from a parked page are the most common cause of "it's not working."
  7. Save.

Path B: Hand DNS to Vercel's Nameservers

Simpler long-term if Vercel is the only thing using this domain. Instead of managing individual records, you delegate the whole domain to Vercel.

  1. In Vercel → Settings → Domains → click your domain.
  2. Find the Nameservers option. Vercel gives you something like: 
    ns1.vercel-dns.com
ns2.vercel-dns.com
  3. At Namecheap: Domain List → Manage → Nameservers → Custom DNS.
  4. Replace the existing nameservers with Vercel's.
  5. Save.

From now on, Vercel manages all your DNS and adds the correct records for you automatically.

Step 3: Wait for Propagation

When you change DNS, the update has to spread across servers worldwide. This is called propagation, and it's the part that tests your patience.

  • Officially, it can take a few minutes to 48 hours.
  • In practice, most registrars are done within 15–30 minutes.

Back in Vercel's domain settings, you'll see a status:

  • Pending — still spreading. Grab a coffee.
  • Valid Configuration ✅ — it's live.

Want to peek while you wait? Go to dnschecker.org, enter your domain, choose the record type (A or CNAME), and you'll see whether servers around the globe have caught up yet.

Step 4: HTTPS Is Automatic

Here's a thing you'd normally have to fight with — and don't.

Once your DNS is valid, Vercel automatically issues a free SSL certificate for your domain (via Let's Encrypt). That's the padlock icon in the browser. You don't have to do anything.

Visit https://yourapp.com — you should see your app, secured, padlock and all.

If HTTPS still isn't working after an hour, go to Vercel → Settings → Domains → Refresh Certificate.

Step 5: Tell Supabase About the New Domain

If your app uses Supabase auth, update its allowed URLs to your real domain — otherwise login (especially "Sign in with Google") will break on the custom domain.

  1. Supabase dashboard → Authentication → URL Configuration.
  2. Set Site URL to https://yourapp.com.
  3. Add https://yourapp.com/** to Redirect URLs.
  4. Save.

Step 6: Update Env Vars (If Needed)

Some apps store their own URL in an environment variable (certain OAuth setups do). If yours does:

  1. Vercel → your project → Settings → Environment Variables.
  2. Find any variable holding your old .vercel.app URL.
  3. Change it to your custom domain.
  4. Click Redeploy — environment variable changes only take effect after a fresh deploy.

If you're not sure whether your app has one of these, ask Claude Code:

Does my app use any environment variable that references its own URL? If so, which ones do I need to update for a custom domain?

Troubleshooting

SymptomLikely cause and fix
DNS_PROBE_FINISHED_NXDOMAIN in the browserDomain isn't resolving yet. Either DNS hasn't propagated (wait), or the records are wrong (recheck against Vercel).
Vercel says "Invalid Configuration"Your records don't match what Vercel expects. Compare carefully — watch for stray spaces or the wrong record type.
Browser shows "Not Secure"SSL certificate hasn't issued yet. Wait ~30 minutes, then use Refresh Certificate in Vercel.
Works at yourapp.com but not www.yourapp.comMake sure you added both records (A for root, CNAME for www) and enabled the www redirect in Vercel.

Summary

  1. Add your domain in Vercel → Settings → Domains.
  2. Vercel hands you the DNS records — an A record and a CNAME record.
  3. Add them at your registrar (Path A) or delegate to Vercel's nameservers (Path B).
  4. Wait for propagation — usually minutes, occasionally hours.
  5. HTTPS is automatic — Vercel provisions the padlock for you.
  6. Update Supabase's Site URL and Redirect URLs to your custom domain.
  7. Update and redeploy if any env var references your old URL.