The process of linking a custom domain to a deployed vercel 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 bought 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.
What is Vercel App?
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
What is Google Domain Service?
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.
How to link Google domain to Vercel App ?
- Firstly, you need to make sure your application is deployed and running well on vercel under the
.vercel.appdomain. Suppose your application name is
xyzthen the domain on which your application currently running would be
- Go to the
Settingssection in your application workspace and then go to
Domains. 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 domainsto the Input field in the
View Domainssection 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
- 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
DNSoption on the tab to the left of your screen.
- Under the
DNSsection, scroll below and you would get the
Custom resource recordssection.
- Now, we will add the
Arecord for the domain
CNAMErecord for the
www.xyz.comas this has an alias
- Copy the
A recordValue from your vercel domain section where you added your domain and add it to the
Custom resource records. While adding it, leave the default name the same as
@, Type as
A, and TTL as
1h. Only add the IPv4 address which you copied from the Vercel Domain section. Click on Add.
- Copy the
CNAME recordValue from the vercel domain section where you added your domain and add it to the
Custom resource records. While adding it, make sure the Name is
www, Type is
CNAME, and leave TTL as
1h. 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 ticksunder 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 in general, the DNS propagation takes 24-48hrs. ⌚ But in my case, it hardly took 5 minutes. 😄
- You can check whether your URL has propagated with this awesome tool DNS Checker.
You are all set now ! Domain is linked to your Vercel App.