Deploying React App on Ubuntu VM Instance

Deploying React App with NGINX on Ubuntu 18.04

The technologies I used:

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

sudo mkdir /var/www
cd /var/www/
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 {} \;
create-react-app [App Name] 
git clone [URL of App Repository]
cd /var/www/[App-Folder]
sudo npm install
sudo npm run build

Install and Configure NGINX

sudo apt install 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 scriptserver {
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;
}
}
  • 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
  • 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

--

--

--

Computer Science Novice, writing posts as my notes, hopefully, they’ll help someone else as well.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

How to customize the OpenStreetMap marker icon and binding popup

Is Redux Toolkit not needed anymore?

WebAssembly Modules in Rust: An Introduction

setTimeOut and setIntervel in Javascript

X.Web.Sitemap — simple library for creating sitemaps

Mix and Match: Angular + Custom Elements (Polymer)

Jquery inArray check if value exists in Array

UI journey of .NET developer — 7-React Redux and SMK Gallery API

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
HeptaDecane

HeptaDecane

Computer Science Novice, writing posts as my notes, hopefully, they’ll help someone else as well.

More from Medium

How To Store And Retrieve RedisJSON on Redis Cloud using Node.js

Let’s get started with node.js as a server side frame work

What is Node.js?

Deploy Nodejs app on Digital Ocean