How To Deploy a React app using Nginx and Ubuntu 18.04

You need a Linux based system, I use Ubuntu 18.04 for this tutorial

2 min readMay 6, 2020

Login To Your Server

$ ssh username@YOUR_SERVER_IP

Install NodeJS and npm

Node.js is an open-source, cross-platform JavaScript run-time environment that executes JavaScript code outside of a browser. Node.js gives us the possibility to use JavaScript as a BackEnd language like Python, Java, or PHP.

NPM is a package manager for the JavaScript programming language. It is the default package manager for Node.js.

Use Current Release

$ sudo apt-get install curl
$ curl -sL https://deb.nodesource.com/setup_13.x | sudo -E bash -
$ sudo apt-get install nodejs

Test NodeJS & NPM version

$ nodejs -V 
  v13.3.0
$ npm --v
  6.13.1

Install Nginx

Nginx is a free, open-source, high-performance HTTP server.

$ sudo apt update
$ sudo apt upgrade
$ sudo apt install nginx

Deployment

You will deploy your project from Github or BitBucket account

$ git clone https://github.com/rakesh_samal/react-app.git
$ cd react-app

Install packages & Test your application

$ npm install
$ npm start

Go to http://yourserverip:3000
Stop the terminal with CTRL+C

Create an Nginx file

sudo nano /etc/nginx/sites-available/react_appserver {
   server_name your_IP domain.com www.domain.com;
   root /home/ubuntu/react-app/build;
   index index.html index.htm;
   location / {
   try_files $uri /index.html =404;
   }
}

server_name put your IP address
root we use this to give the server the application located in the disk
index The main file

Enable the file by linking to the sites-enabled dir

sudo ln -s /etc/nginx/sites-available/react_counter /etc/nginx/sites-enabled

Test NGINX config

$ sudo nginx -t

Restart Nginx Server

$ sudo systemctl restart nginx

Open your browser and go to http://yourserverip

Thanks for reading.