DEV Community

Alex Y
Alex Y

Posted on • Originally published at ybuild.io

Shipping an AI-built app to your own domain: the DNS-to-HTTPS path (and the cost trap nobody warns you about)

#webdev #ai #devops #beginners

An AI tool can turn a prompt into a working app in minutes. The part nobody shows you in the demo is the last mile: getting that app off a *.vercel.app preview URL and onto yourdomain.com with a padlock next to it.

That last mile is DNS and hosting. It's not hard, but it has two or three traps that eat an afternoon — and one that quietly eats money every month. Here's the whole path, start to finish.

Step 1: The two DNS records you actually need

Every custom-domain setup comes down to two questions: what happens when someone types yourdomain.com, and what happens when they type www.yourdomain.com.

  • The apex (root) domain — yourdomain.com with nothing in front. DNS rules say the apex normally needs an A record (pointing at an IP), which is fragile because IPs change. Better hosts support ALIAS / ANAME or CNAME flattening, which let the apex behave like a CNAME. On Cloudflare, flattening is automatic.
  • The www subdomain — easy: a CNAME pointing at your host's target (e.g. cname.vercel-dns.com, your-site.netlify.app, or your-project.pages.dev).

Then pick one as canonical and redirect the other. "www to apex" or "apex to www" — either is fine, but pick one or you'll split your SEO and confuse analytics.

The most common mistake: adding only the www record, then wondering why yourdomain.com shows a blank page. You need both, plus a redirect.

Step 2: HTTPS — why the padlock doesn't show up

All three major hosts issue free certificates (via Let's Encrypt) and auto-renew them. You don't buy an SSL cert in 2026. But provisioning silently fails in two situations, and the error messages are useless:

  1. DNS hasn't propagated yet. The cert can't be issued until the host can verify the domain points at them — a minute to a few hours. If HTTPS "isn't working," wait, then re-check. Don't start changing things.
  2. You put Cloudflare's proxy in front of another host. If your domain is on Cloudflare (orange cloud = proxied) and you deploy to Vercel or Netlify, you can get SSL handshake errors or infinite redirect loops — two systems both trying to terminate TLS. Fix: set that DNS record to DNS-only (grey cloud), or set Cloudflare's SSL mode to Full (strict). Never leave it on "Flexible" — that's the redirect loop.

Deploying to Cloudflare Pages while your domain is already on Cloudflare? None of this applies — it wires itself up.

Step 3: The cost trap nobody mentions

"Free hosting" is real, but the free tiers are shaped very differently, and the thing that bites you is almost never storage — it's bandwidth and build minutes, plus one licensing clause.

Rough shape of the three most common choices (always re-check current limits — these change):

Cloudflare Pages Vercel (Hobby) Netlify (Free)
Bandwidth Effectively unmetered ~100 GB/mo, then upgrade ~100 GB/mo, overages billed
Build minutes 500/mo limited ~300/mo
Commercial use, free tier Allowed Not allowed Allowed
Custom domain + SSL Free Free Free

Two things to internalize:

  • Vercel's Hobby plan is for non-commercial projects. The moment your app is a business, their terms want you on Pro ($20/mo). It's not a bandwidth wall you hit by accident — it's a licensing line you cross the day you charge money.
  • Netlify meters bandwidth + build minutes. A page that goes mildly viral, or a repo that rebuilds on every commit, can blow past the free tier fast, and overage pricing is steep.

For a hobby or static/marketing site, Cloudflare Pages is the boring, honest default — genuinely generous free tier, no commercial-use asterisk. For an app with server-side logic you're iterating on, Vercel and Netlify are excellent — just budget for the paid tier from day one instead of being surprised.

The clean path, end to end

  1. Put your DNS on the same provider you host with where possible (fewer moving parts, fewer TLS conflicts).
  2. Add the apex record (A / ALIAS / flattened CNAME) and the www CNAME.
  3. Pick a canonical host (apex or www) and redirect the other.
  4. Wait for DNS to propagate before touching SSL. Let the cert auto-issue.
  5. Proxying through Cloudflare in front of another host? Set SSL to Full (strict) — not Flexible.
  6. Test http:// and https://, apex and www, in an incognito window.

That's the whole thing. The AI writes the app; this is the ten steps between "it works on my screen" and "it works on my domain."

I keep field notes like this — real builds with AI tools, timed, with the raw numbers — over at Build Lab. The full walkthrough, with screenshots of each DNS panel, is here.

Top comments (0)