Add domain to Digital Ocean Droplet


Posted 4 weeks ago by Ryan Dhungel

Category: Digital Ocean MERN-Stack Domain

Viewed 177 times

Estimated read time: 5 minutes

Course of the day!

Vue Vuex Firebase -  Building Advance Web App (Slack Clone)

Vue Vuex Firebase - Building Advance Web App (Slack Clone)

In this article I will be adding a domain name to my digital ocean droplet. I have just deployed my fullstack react node project to digital ocean. This is a Production ready MERN (MongoDB Express React Node) Stack App with Ultimate Authentication. This app includes Email Activation, Forgot/Reset password, Login with Facebook and Google, Admin Auth Routing, ACL (access control) and profile update feature. The entire process is covered in a video course and it live on Udemy Check it out if interested!

Adding a domain name to your digital ocean droplet

We have deployed out app to digital ocean but there is a bit more to do if you want to use it in real world. And that is adding a domain name.

Why I choose to write articles and not videos

  1. You don't have to pause play repeat hundred times (there will be lot of steps, some will take hours of wait)

  2. Written steps with screenshots are very easy to follow

  3. For every project you have to go through the same steps so written steps will become a good reference

  4. What else ... I am sure there are plenty of benefits but lets not worry about it and start the process of adding domain...

Buy your favourite domain name from namecheap/godaddy

I just bought a domain mern-stack.com from namecheap.

  1. I recommend namecheap because their annual price is cheaper (godaddy is cheap/free? only first year).

  2. They have very good live chat support 2/47.

  3. Easy to use dashboard. I will be using namecheap for this project.

Login to your namecheap dashboard, there you will see your domain name.

Domain list in namecheap dashboard

 

Login to digital ocean

  1. In your dashboard on top right click on green button that says Create

  2. Choose option Domains/DNS from the dropdown list

digital ocean droplet

 

Add a domain

  1. Once clicked, that will take you to Networking page

  2. Just below the title Networking, you will see a sub title that says Add a domain

  3. You can enter your domain name there and click the button Add Domain

digital ocean - add a domain

Enter hostname

Now you will see a page where your domain name is on top with sub title that says Create new record

Create new record

  1. The first option A is choosen by default

  2. Type HOSTNAME @ , pick WILL REDIRECT TO choose from dropdown your droplet name (MERN-AUTH) with IP

  3. Click create Record

digital ocean create new record

 

Now you see one A record is added in DNS records. Not only A record, you will also see three NS records there

with the text something like ns1.digitalocean.com ns2.digitalocean.com ns3.digitalocean.com

digital ocean add A record DNS record

Copy those NS (nameservers) record. and go back to your namecheap dashboard

 

Adding nameservers to your domain

In namecheap dashboard, Click on the Manage button on the right side of your domain name

namecheap - add nameservers to domain

 

Now on Nameservers option you will see Namecheap Basic DNS by default

 

namecheap basic dns

 

Adding custom DNS records

  1. Click on that and pick Custom DNS

  2. Add those 3 NS records that you copied from digital ocean ns1.digitalocean.com ns2.digitalocean.com ns3.digitalocean.com

  3. Once done click green tick icon to save

namecheap - add custom dns record

Digital ocean droplet is now associated with a domain name

  1. Believe it or not, we are done!

  2. Visit your site now. i will visit mern-stack.com

adding domain to digital ocean droplet

 

This project is a Production ready MERN (MongoDB Express React Node) Stack App with Ultimate Authentication. This app includes Email Activation, Forgot/Reset password, Login with Facebook and Google, Admin Auth Routing, ACL (access control) and profile update feature. The entire process is covered in a video course and it live on Udemy Check it out if interested!

This course has more topics covered than you would think. Here are some of the new lectures added to this course:

  • Adding a domain name
  • Cloudflare CDN and Free SSL
  • Force HTTP to HTTPS
  • Redirect all www to non-www
  • Updating Google and Facebook login redirect to production domain
  • Redirect Digital Ocean IP to actual domain name

If you come across any issues. Please leave your comments bleow. Cheers!