Hosting a FullStack Javascript Web App on Digital Ocean Part 2

This is part 2 of a guide on how to host a fullstack Javascript web app (NodeJS/ExpressJS back-end, ReactJS front-end) on a single Digital Ocean droplet. Check out part 1 here.

Pointing Domain Names to DO NameServers

This part of the guide requires you to have already registered at least one domain name. You can register a domain name from here. Once you have a registered domain name, we can use Digital Ocean to configure DNS for it. Back on the Digital Ocean website, open the “Create” drop-down menu and click the “Domains/DNS” link.

In the “Add a Domain” section, enter your domain (this is usually the base only: example.com and not www.example.com) and click the "Add Domain" button.

Create a new domain

Once you have hit the “Add Domain” button, you will be taken to the “Create new record” page. You now need to add NS records for the domain on Digital Ocean servers. You’ll only be adding A records, which maps an IPv4 address to a domain name. This will determine where to direct any requests for your domain name.

Therefore, we need to create two A records for your website.

For the first one, enter @ in the HOSTNAME field and select the server you want to point the domain name to:

Add DNS A record

For the second one, enter www in the HOSTNAME field and select the same server:

Add DNS A record for www

Make sure the A records are pointed to the correct server droplet.

To use the Digital Ocean DNS, you’ll need to update the nameservers used by your domain registrar to point at Digital Ocean’s nameservers instead. For KenyaWebExperts, sign in to your account using the Customer Login link at the top left corner of the homepage. Then click on the My Account drop down and select My Domains. Select the relevant domain name from the table and go to the NameServers page:

KenyaWebExperts Nameservers page

In the “Nameservers” section of the resulting screen, select Use custom nameservers and enter the following nameservers:

ns1.digitalocean.com

ns2.digitalocean.com

ns3.digitalocean.com

It may take some time for the name server changes to propagate after you’ve saved them.

During this time, the domain registrar communicates the changes you’ve made with your ISP (Internet Service Provider). In turn, your ISP caches the new nameservers to ensure quick site connections. This process usually takes about 30 minutes but could take up to a few hours depending on your registrar and your ISP’s communication methods.

Installing Nginx and Configuring the Domain Names

To install Nginx we make use of the Ubuntu APT repository sources as shown below:

$ sudo apt update
$ sudo apt install nginx

Next, we need to configure our firewall to allow both http traffic through to Nginx. We only allow http and not https for now so as to avoid browser SSL errors. First, we check if Nginx has registered itself as a service by using:

$ sudo ufw app list

This should produce the following list of services:

Available applications:
  Nginx Full
  Nginx HTTP
  Nginx HTTPS
  OpenSSH

To enable http traffic type:

$ sudo ufw allow 'Nginx HTTP'

To verify the changes to the firewall rules type:

$ sudo ufw status

You should see that only http rules for Nginx are allowed by ufw. You can also verify that Nginx is running on the background by typing:

$ systemctl status nginx

You can also check out Nginx’s default page by entering your droplet’s IP address into your browser’s address bar. You should see the following:

Nginx default page

You should also see the above if you enter your chosen domain name into the address bar if the nameserver propagation is complete.

The next step, involves creating three new sub-domains names which we will later redirect to point to our Express back-end, a test version of our React front-end and a test version of our Express back-end. This is such that our production React front-end will live at our domain name. That is:

• example.com -> points to our production React front-end at port 3000
• api.example.com -> points to our production Express back-end at port 5000
• test.example.com -> points to our test React front-end at port 3001
• test.api.example.com -> points to our test Express back-end at port 5001

To create a new sub-domain in Digital Ocean, click on your main domain name to edit it and add the new sub-domains as shown below:

Add sub-domain to Digital Ocean

Now, we need to create different html files to be served on the different sub-domains we created so as to test whether Nginx is serving something different for each one. To start with, we create different directories for the html files:

$ sudo mkdir /var/www/html/api.example.com
$ sudo mkdir /var/www/html/test.example.com
$ sudo mkdir /var/www/html/test.api.example.com

Remember to change example.com to your chosen domain name. Next, we create the actual html files. For each of the above directories create a html file:

$ sudo nano /var/www/html/api.example.com/index.html

And then copy the following code into the file replacing each sub-domain name as appropriate.

<html>
<title>api.example.com</title>
<h1>Welcome to the api.example.com Nginx webserver.</h1>
</html>

Next, change the ownership of the html files:

$ sudo chown -R www-data:www-data /var/www/html/api.example.com

And then create the Nginx configuration files for each sub-domains by typing:

$ sudo nano /etc/nginx/sites-available/api.example.com.conf

Then copying the following into the configuration file and saving it.

server {
        listen 80;
        listen [::]:80;
        root /var/www/html/api.example.com;
        index index.html index.htm;
        server_name api.example.com;

        location / {
                try_files $uri $uri/ =404;
        }

}

Again, remember to change each sub-domain name in the above commands so that each sub-domain is configured appropriately. Next, we create symbolic links for each sub-domain to the sites-enabled directory:

$ sudo ln -s /etc/nginx/sites-available/api.example.com.conf /etc/nginx/sites-enabled/

Do this for each of the sub-domain configuration files. Finally, we test the nginx configuration using:

$ sudo nginx -t

And then restart the Nginx service for our changes to take effect:

$ sudo systemctl restart nginx

Now you should be able to see different html pages served to the different sub-domain names we created. This ends part 2 of the series. Check out part 3 here.