Deploying React App on Ubuntu VM Instance

If you have been developing your web UI with React on a development server and wondered, how am I going to put this into production on a real server? well, you and I are going to do just that today so let's dive straight in. [I’m writing this post so that I can refer it back later, apologies if the content didn’t meet the standards]

Deploying React App with NGINX on Ubuntu 18.04

The technologies I used:

• React
• Nginx
• Ubuntu 18.04: the procedure will remain the same for versions 16.04+
• Google Cloud: can be replaced by any cloud platform providing VM instances

First off, if you are new to cloud computing follow this official documentation provided by Google about setting up an Ubuntu VM instance. Any Cloud service that allows deploying a server, such as Amazon AWS or Microsoft Azure will also work. I prefer GCP because of its Free Tier, which comes in handy when you are just learning these techs.

Now that you have set up your Ubuntu VM instance, SSH into it and update!
in case of GCP a simple way to SSH into your VM instance is this.

sudo apt update
sudo apt upgrade

Install npm and create-react-app

sudo apt install npm
npm install -g npm@latest
npm install -g create-react-app

Create or Clone React app

I’ve placed my React App dir in /var/www/

sudo mkdir /var/www
cd /var/www/

Since you wouldn’t want to use sudo every time you interact with files in /var/www let’s give your user privileges to these folders. Constantly using sudo increases the chances of accidentally trashing your system.

sudo gpasswd -a "$USER" www-data
sudo chown -R "$USER":www-data /var/www
find /var/www -type f -exec chmod 0660 {} \;
sudo find /var/www -type d -exec chmod 2770 {} \;

Now that you are inside /var/www and have given your user privileges, let’s build a new react app.

create-react-app [App Name] 

or clone your app repository if you already have one.

git clone [URL of App Repository]

If you have followed along, you will see [App-Folder] under /var/www now its time to install dependencies and build your React app.

cd /var/www/[App-Folder]
sudo npm install
sudo npm run build

Install and Configure NGINX

sudo apt install nginx

To configure Nginx,

• cd into /etc/nginx/sites-enabled/. There will be a template default file, delete it.

cd /etc/nginx/sites-enabled/
rm default

• cd into /etc/nginx/sites-available/. Here also you have to delete the existing default file.

cd /etc/nginx/sites-available/
rm default

• Create a new file default inside /etc/nginx/sites-available/. and configure it to serve your React App. After this, your /etc/nginx/sites-available/default file should look like this

# nginx congifuration script
server {
    listen 80;
    server_name 0.0.0.0;
    root /var/www/[App-Folder]/build;
    index index.html index.htm;
    try_files $uri /index.html;
    # Static files
    location /files/ {
        autoindex on;
        root /var/www/[App-Folder]/files;
    }
}

For more information on configuring Nginx go here.

Note:
I’ve used default GNU nano editor in the last step for creating and editing the default file
using following commands: -
* sudo touch /etc/nginx/sites-available/default
* sudo nano /etc/nginx/sites-available/default
Now, type the above nginx congifuration script in the default file
save: ctrl+s
exit: ctrl+x

• Create a soft link for /etc/nginx/sites-available/default file in the dir/etc/nginx/sites-available

cd /etc/nginx/sites-available/ 
sudo ln -s default /etc/nginx/sites-enabled/.

Start-Up the NGINX Server!

• Check for any error(s) by running the following command:
  sudo nginx -t which should print out the following message indicating success at configuration

nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

in case of any error check the paths to [App-Folder] in configuration script and try sudo nginx -t again

• Open port 80 (HTTP) and 443 (HTTPS)
  sudo ufw allow 'Nginx Full'
• Reload systemd manager configuration
  sudo systemctl daemon-reload
• Start Nginx service
  sudo systemctl start nginx
• Restart Nginx service
  sudo systemctl restart nginx

And that's it! If you go to your browser and type in the External IP address of your VM instance, you should see your React app up and running!

in case you are unable to find your hosted app on the IP address try:
sudo systemctl stop nginx
sudo systemctl daemon-reload
sudo systemctl start nginx
sudo systemctl daemon-reload
sudo systemctl restart nginx

In GCP you can find External IP of VM instance here.

This was my very first article on Medium
— all responses and queries are welcomed.