Stop 15 · DevOps & DeploymentTopics · 8/8

Domain & HTTPS Setup

Part of the Full Stack Developer Roadmap

In short

myshop.vercel.app works, but myshop.in looks real. Pointing your domain at the frontend, api.myshop.in at the backend, and getting HTTPS on both takes a few DNS records and a little patience.

Pointing a custom domain at your deployed frontend, and a subdomain like api. at your backend, with HTTPS automatically provisioned on both.

The blob character hangs a framed certificate inside a new shop with its shutter up and a side door open.

Think of it like this

A new shop in the market complex

You rent shop 14 in a market complex. The directory at the gate tells visitors where to go, customers use the front entrance, suppliers use the back gate, and the trade licence hangs framed on the wall. DNS is the directory, www and api are the entrances, and the certificate is the licence.

Watch it happen

Two names, two hosts, both HTTPS

Browser

DNS

Frontend host

API host

myshop.in?

1/6The browser asks DNS where myshop.in lives.

The big ideas

What you need to know

A and CNAME records

An A record points a name at an IP address. A CNAME points a name at another name, like your host's domain.

DNS takes time

Changes can take minutes to hours to show up everywhere, because resolvers cache old answers until the TTL runs out.

Free automatic HTTPS

Hosts like Vercel, Netlify, Render and Railway get Let's Encrypt certificates for your domain once DNS points at them.

Update CORS and cookies

Allow https://myshop.in in the API's CORS settings, and set cookie domains and the Secure flag for the new names.

See it in code

Walk through the code

bash

1# DNS records at your domain registrar2# Type   Name   Value3# A      @      <IP your frontend host gives you>4# CNAME  www    <target your frontend host gives you>5# CNAME  api    my-api.onrender.com6 7# Check the records resolve8dig +short myshop.in9dig +short api.myshop.in10 11# Check the API's certificate12curl -vI https://api.myshop.in 2>&1 | grep -iE "subject|expire"

1/3The bare domain and www go to the frontend host; api goes to the backend host.

Your hosts show the exact values to enter. myshop.in and my-api.onrender.com are example names.

Save yourself the pain

Common mistakes

Oops

Adding a CNAME on the bare domain at a DNS provider that doesn't allow it.

Do this instead

Use the A record your host gives you, or ALIAS or CNAME flattening if your DNS provider supports it.

Oops

Forgetting to update CORS after moving to the new domain.

Do this instead

Add https://myshop.in to the API's allowed origins, or every request from the live site will be blocked.

Your mission

Put your app on its own domain

~30 min

Quick check

You moved the frontend to https://myshop.in and now every API call fails with a CORS error. What's the fix?

Go deeper

1Point a domain at your frontend and a subdomain, e.g. api.yourdomain.com, at your backend.
2Confirm both are served over HTTPS with valid certificates.
3Update your frontend's API URL environment variable to the new custom domain.