Deploy ReactJS Web App to Digital Ocean as Production

1. Creating a droplet on Digital Ocean

Details:https://www.digitalocean.com/docs/droplets/how-to/create/

2. Creating non-user account to access SSH

Details:https://www.digitalocean.com/community/tutorials/initial-server-setup-with-ubuntu-16-04

Simplest way open cmd write

ssh-keygen

Write ssh key name (for example: mywebapp) then save file. Now you have 2 key files (mywebapp, mywebapp.pub). Add ssh key file (mywebapp.pub) to created droplet settings on digital ocean

3. Login with PuTTY

Details:https://www.digitalocean.com/docs/droplets/how-to/connect-with-ssh/putty/

Be carefully we need key file with .ppk extension. Open PuTTYgen import created key file (mywebapp) then save with "save private key". Ok now we have mywebapp.ppk key file.

After logged successfully with PuTTY

4. Setup Nodejs on DigitalOcean Ubuntu 16.04

Write PuTTY command line

curl -sL https://deb.nodesource.com/setup_9.x | sudo -E bash -s
sudo apt-get install -y nodejs

5. Setup PM2 on DigitalOcean Ubuntu 16.04

We will need to install PM2 globally so it can be run anywhere on the server.

sudo npm install -g pm2
pm2 startup systemd

6.Setup Nginx on DigitalOcean Ubuntu 16.04

We’ll install Nginx as the webserver to be used for reverse proxy which will allow us to access the app directly with an IP address or domain instead of tacking port to the IP address.

sudo apt-get update
sudo apt-get install nginx

By default Firewall is inactive, you can check it by run command

sudo ufw status
sudo ufw app list

So let config FW allow those ports by

sudo ufw allow 'Nginx Full'
sudo ufw allow 'OpenSSH'
sudo ufw enable

Start Nginx: open your IP address ex: http://192.168.144.241 you should see “Welcome to nginx!”

sudo nginx

7. Fixed issue of bcrypt on Ubuntu 16.04

sudo apt-get install build-essential

8. Set Up Nginx as a Reverse Proxy Server

sudo vim /etc/nginx/sites-available/default

Within the server block you should have an existing location/block. Replace the contents of that block with the following configuration:

(Optionally connect with FileZilla go to '/etc/nginx/sites-available/default' edit default config file. Change location block copy and paste below codes )

location / {
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-NginX-Proxy true;
    proxy_pass http://localhost:5000;
    proxy_set_header Host $http_host;
    proxy_cache_bypass $http_upgrade;
    proxy_redirect off;
}

Save and exit vim.

9. Test to make sure there are no syntax errors in the configuration by running:

sudo nginx -t

Then restart Nginx:

sudo systemctl restart nginx

10. Deploy react app

cd /home
mkdir myreactapp
cd myreactapp
npm install

Open FileZilla transfer project files to /home/myreactapp folder

npm install

In the project folder, create server.js in the app directory.

===========server.js===========

const express = require('express');
const bodyParser = require('body-parser')
const path = require('path');
const app = express();
app.disable('x-powered-by');
app.use(express.static(path.join(__dirname, 'build')));
// need to declare a "catch all" route on your express server // that captures all page requests and directs them to the client // the react-router do the route part
app.get('*', function (req, res) { res.sendFile(path.join(__dirname, 'build', 'index.html')); });
app.listen( process.env.PORT || 5000, function () { console.log(`Frontend start on http://localhost:5000`) } );

11. Start ReactJs web app

npm run build
node server.js

You can start any application like that:

pm2 start server.js

Your app is now daemonized, monitored and kept alive forever.

Congratulations, you can now access your web application by visiting your IP_ADDRESS