Hosting a FullStack Javascript Web App on Digital Ocean Part 3

This is part 3 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 2 here. You can also start from the beginning here.

Deploying both the front-end and back-end

Here I am going to assume that you have a MERN stack app ready for deployment on Github or any other hosting service. The first step to deploy our apps is therefore, to clone the repositories from Github on to the server. So ssh into your server:

$ ssh username@serverIpAddress

To avoid entering your Github username and password with every command we want to clone the repos using ssh. So enter the following command to create a new ssh public key:

$ ssh-keygen

Accept all the defaults by hitting enter repeatedly until you see the following output:

+ — -[RSA 3072] — — +
| +.. . |
| o =.. . o |
| E . o =..oo.. . |
|. o = o .o.. .|
| + . S … .|
| o …. o o o.|
| . …. o . +o*|
| .. . . .BB|
|.o. o++=O|
+ — — [SHA256] — — -+

Then enter the following command to stream your ssh public key:

$ cat ~/.ssh/id_rsa.pub

Copy the ssh key and then go to Github and navigate to your user settings (click on your profile image on the top left and then click on Settings on the dropdown). Select ‘SSH and GPG keys’ from the menu on the left and then click on ‘New SSH Key’. Give the ssh key a memorable title and then paste the public key in to the ‘key’ textbox. After this you should now be able to select the ssh tab on the git clone button on Github, copy your repo’s url and then clone it on to your droplet like so:

$ git clone git@github.com:github_username/project-name.git

Go into your repo’s directory and install all npm dependencies. Then start the application and see if it runs on the droplet.

$ cd project-name
$ yarn install
$ yarn start

If you need to install Node & Npm you can do so by following this and then installing yarn using Npm. Do the above for both your Node back-end and React front-end applications. Once you’ve made sure both apps are running without errors you can shut them down using Ctrl + C.

Using Nginx as a reverse proxy to serve the Javascript apps on the domain names.

For the React front-end app we need to make a production build and serve it using Nginx:

$ yarn run build

This should produce a build folder inside the project folder. Next, we configure nginx to serve the build folder for requests to the main domain. First, back up the default nginx config file:

$ cd /etc/nginx/sites-available
$ sudo cp default default.bk

Then open the default file:

$ sudo nano default

Replace the line:

root /var/www/html;

with the following line while replacing username and project-name with the appropriate names:

root /home/username/project-name/build;

Now enter the following to test the nginx config:

$ sudo nginx -t

If the test is successful then restart nginx with:

$ sudo systemctl restart nginx 

You should now be able to go to your main domain name e.g example.com and see your React front-end running.

The next step is to install PM2 which is an npm package we will use to run the Node JS back-end app as a background service and make sure that it survives reboots. Enter the following to install PM2:

$ sudo npm install pm2 -g

You can find PM2 documentation here. To get the back-end app running on port 5000 enter:

$ pm2 start index.js --name project-name

Next, we need to configure Nginx as a reverse-proxy to redirect all requests to the back-end domain name i.e api.example.com, to our Node app at port 5000. To do that enter the following:

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

Then paste the following into the location block so as to create the reverse-proxy:

proxy_pass http://localhost:5000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;

Test the nginx configuration by entering:

$ sudo nginx -t

If the result is successful then go ahead and restart the nginx server using:

$ sudo systemctl restart nginx

You should now see your back-end app response by going to your domain name on the browser e.g api.example.com. Make sure to use Ctrl + Shift + R to reload the page if it’s still showing the sample page from part 2. To setup the test server, first make sure you have a test branch on the codebase for both apps. Next, do the above for both the front-end and back-end while making sure to point the root of the server in test.example.com.conf file to the test branch of the front-end app in a separate directory and to run the test branch of the back-end app on a different port e.g 5001 using PM2 and then proxying nginx to it in the test.api.example.conf file.