How To Deploy a React app using Nginx and Ubuntu 18.04

In this step by step guide, I will show you how to deploy React(Any JS) application.

Originally posted on my blog

• Getting Started
  • Prerequisites
• Installation
  • 1- Install NodeJS and npm
  • 2- Install Nginx
• Deployment
  • Create project file
  • Enable the file by linking to the sites-enabled dir
  • Test NGINX config
  • Restart Nginx Server

Getting Started

In order to follow me along, you need to install some prerequisites.

Prerequisites

Server requirements

You need a Linux based system, I use Ubuntu 18.04 for this tutorial, you are free to use any OS.
Disk : ~25GB
Memory : 2GB
CPU: 1 core

Installation

Login To Your Server

$ ssh username@YOUR_SERVER_IP

1- 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 version

$ nodejs -V
v13.3.0

Test NPM version

$ npm --v
6.13.1

We've successfully installed NodeJs and NPM.

2- Install Nginx

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

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

Deployment

I will deploy this project from my Github account

$ git clone https://github.com/xarala221/React-counter-app.git
$ cd React-counter-app

Install packages

$ npm install

Test the application

$ npm start

Go to http://yourserverip:3000

Stop the terminal with CTRL+C

Create a project file

sudo nano /etc/nginx/sites-available/react_counter

server {
   server_name your_IP domain.com www.domain.com;
   root /home/username/React-counter-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://youripaddress

Thanks for reading.
See you in the next tutorial