Linking a custom domain to a deployed application is confusing and at times you don't get a route on how to link the domain with the website. 😫
In this article, I will be explaining how to link a Custom domain brought in Google Domains service to an application hosted on Vercel.
Perks of using vercel is that it allows adding domain without any verification unlike Heroku/Netlify, which means you don't have to add your billing details to add a domain to your application. Moreover, it is fast, efficient, and easy to use.😁
Vercel is a deployment and collaboration platform for frontend developers. Vercel enables developers to host websites and web services that deploy instantly and scale automatically – all without any configuration. Source - Official Docs
Google Domains is a domain name registrar operated by Google. Google Domains offers domain registration, DNS hosting, DNSSEC, Dynamic DNS, domain forwarding, and email forwarding. It also offers a one-click DNS configuration that connects the domains with Blogger, Google Sites, Squarespace, Weebly, and Shopify. Source - Wikipedia
Without wasting much time, let us go deep on how to do it. 🤔
-
Firstly, you need to make sure your application is deployed and running well on vercel under the
.vercel.app
domain. Suppose your application name isxyz
then the domain on which your application currently running would bexyz.vercel.app
. -
Go to the
Settings
section in your application workspace and then go toDomains
. Under this section, you would see your domains which are currently linked with the application. You would also find the one mentioned above by default. -
Type the custom domain that you have purchased from
Google domains
to the Input field in theView Domains
section and add the domain. -
A popup like the one below would appear and you would be asked to choose one of the options. You can choose any of the options among the 3 given ones. Recommended one is the first option, so we will choose that as we want our website to work on both
xyz.com
and `www.xyz.com.
-
Currently both the domains would show Invalid configuration and you need to configure them on the Google Domains Dashboard. So, let us do it.
-
Go to Google Domains Dashboard and choose your domain that you have purchased. Under, the domain workspace, go to the
DNS
option on the tab to the left of your screen.
- Under the
DNS
section, scroll below and you would get theCustom resource records
section.
-
Now, we will add the
A
record for the domainxyz.com
andCNAME
record for thewww.xyz.com
as this has an aliaswww
in it. -
Copy the
A record
Value from your vercel domain section where you added your domain and add it to theCustom resource records
. While adding it, leave the default name the same as@
, Type asA
, and TTL as1h
. Only add the IPv4 address which you copied from the Vercel Domain section. Click on Add. -
Copy the
CNAME record
Value from the vercel domain section where you added your domain and add it to theCustom resource records
. While adding it, make sure the Name iswww
, Type isCNAME
, and leave TTL as1h
. Only add the Domain name value which you copied from the Vercel Domain section. Click on Add. -
Once the above step is configured correctly, wait for some time and you will see
Blue ticks
under your domain configs in the Vercel dashboard. This means that the configuration and linking were successful and the domain would be linked to your application soon. 🎊 This may take time for some of the users because, the DNS propagation takes 24-48hrs in general. ⌚ But in my case, it hardly took 5 minutes. 😄 -
You can check whether your domain has propagated or not, with this awesome tool DNS Checker.
Kudos 👏👏 your domain is configured and is linked to your Vercel app successfully.
Github 👨💻 - khushal87
LinkedIn 👨💻 - Khushal Agarwal
Thanks for all the love that I am getting in this Gist ❤️