Stop 18 · DeploymentTopics · 8/9

Domain

Part of the Frontend Developer Roadmap

In short

my-portfolio-x8f2.vercel.app works, but yourname.dev looks far more professional. Connecting a custom domain takes two DNS records and a bit of patience.

Connecting a custom domain name to your deployed app — configuring DNS records to point your domain at your hosting provider.

The jaadu carries a suitcase to a new place while a postman at the family home redirects letters.

Think of it like this

A permanent home address

You may shift PGs every year, but your family's home address stays the same, and the post office knows where to forward letters. Your domain is that fixed address. DNS records tell the internet which host your site currently lives with.

Watch it happen

What happens when someone types yourname.dev

Browser
Resolver
Name server
Your host

yourname.dev?

1/6The browser asks a DNS resolver for the IP of your domain.

The big ideas

What you need to know

Buy from a registrar

A registrar is a company that sells domains. You rent the name yearly and renew it.

Apex and subdomains

yourname.dev is the apex (root). www.yourname.dev and blog.yourname.dev are subdomains.

Records point the way

An A record points the apex to an IP address. A CNAME points a subdomain to another hostname.

Changes take time

Old answers stay cached until their TTL ends, so a change can take minutes or hours to show everywhere.

How it works

Connecting a custom domain

  1. 1

    Buy the domain

    Pick a registrar and purchase the name.

  2. 2

    Add it to your host

    In Vercel, Netlify or Cloudflare, add the domain to your project.

  3. 3

    Copy the records

    The host shows which A or CNAME records to create.

  4. 4

    Set them at the registrar

    Add those records in the registrar's DNS settings.

  5. 5

    Wait and verify

    The host checks the records and marks the domain as active.

See it in code

Walk through the code

text
1Type    Name    Value2A       @       <IP address your host gives you>3CNAME   www     <hostname your host gives you>4 5# Check what the world sees6dig yourname.dev A7dig www.yourname.dev CNAME

1/3The apex domain (@) points to an IP address.

@ means the apex domain itself. Always copy the exact values from your host's dashboard, because they differ between providers.

Save yourself the pain

Common mistakes

Oops

Adding a CNAME record on the apex domain.

Do this instead

Most DNS providers don't allow a plain CNAME at the root. Use the A record your host gives, or the provider's ALIAS or flattening option.

Oops

Setting up yourname.dev but leaving www.yourname.dev broken.

Do this instead

Add both, and redirect one to the other so people land on a single version.

Your mission

Map a domain (or a subdomain)

~30 min

Quick check

Which record would you usually use to point www.yourname.dev to your host?

Go deeper

  1. 1Point a domain (or subdomain) you own at a Vercel/Netlify deployment.
  2. 2Learn the difference between an A record and a CNAME record for this.
  3. 3Understand DNS propagation delay — changes aren't always instant.

More topics at this stop

Stuck on this topic? Ask an Insider

Get 1:1 guidance from people who've walked this exact path — on the InsideEdge app.

Download
InsideEdge