How to Deploy React App on NGINX

ReactJS is a popular framework maintained by Facebook, that allows you to easily develop JavaScript based UI and applications. In this article, we will look at how to deploy React App on NGINX in Ubuntu.

How to Deploy React App on NGINX

Here are the steps to deploy React App on NGINX in Ubuntu.

1. Install NodeJS & NPM

Log into your Ubuntu terminal and run the following command to install NodeJS & NPM. We will install the current release. NodeJS is an open-source JavaScript environment and framework to run JavaScript code in backend. NPM is the package manager for NodeJS.

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

We need to use NodeJS because ReactJS is only a front end framework and does not handle back end processing. Node.js is the recommended backend environment for React Apps.

2. Install NGINX

NGINX is a high-performance web server used by many websites.

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

3. Deploy React App

cd to your React App folder if it exists on your system. Else you can clone it to your local machine from GitHub/BitBucket or other remote repositories.

$ git clone https://github.com/<username>/<repo name>.git

Replace <username> and <repo name> with your username and repo name respectively. Here is an example.

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

Install packages into this folder.

$ sudo npm install

Test the application

$ sudo npm start

Test your app by opening browser and visiting http://your_ip_or_domain:3000 since React App will be running on port 3000. Then close the app by pressing Ctrl+C.

4. Create Virtual Host in NGINX

Create a virtual host file for NGINX. All NGINX virtual host configuration files are located at /etc/nginx/sites-available

$ sudo nano /etc/nginx/sites-available/react_app.conf

Enable the configuration file by creating a symlink to /etc/nginx/sites-enabled

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

Add the following lines to it. Replace your_IP_or_Domain with your website’s IP address or domain name. Similarly, replace /home/username/React-app with the location of your React App folder from step 3.

server {
   listen 80;
   server_name your_IP_or_Domain;
   root /home/username/React-app/build;
   index index.html index.htm;
   location / {
   try_files $uri /index.html =404;
   }
}

In the above code, we have created an NGINX server that listens to port 80. We have defined its server_name as our React App’s IP or domain. We have also mentioned the root folder of our React App in root directive. Now when you send a request to your React App’s IP or domain, it will be received & served by NGINX.

5. Restart NGINX Server

Test NGINX configuration for errors.

$ sudo nginx -t

If you do not see any error, restart NGINX server.

$ sudo systemctl restart nginx

Open browser and go to http://your_IP_or_Domain and you will be able to see your React App’s home page.

How to Deploy React App on NGINX