Blog

Introduction 

React.js is a Javascript library for building interactive UI application. React.js is very popular nowadays because of its features like performance, virtual DOM, component_based application, etc. After completing development of React.js application next step is to deploy the application on the Production server. There are several ways to deploy React.js application on a production server. We can deploy React.js application using ngnix, apache2, pm2, etc on a production server.

Prerequisite:

• The production server instance with Ubuntu 16.04 Operating System.

• React-project-demo is an already developed project and ready to go live.

1) Deploy React Application using Nginx

Step #1: Installing Environment Dependencies

We’ll need to install node to get working with our React app. The following will do the job to get the latest version of Node at the time of running.

sudo apt-get update

curl -sL https://deb.nodesource.com/setup_9.x | sudo -E bash -

sudo apt-get install -y nodejs

sudo apt-get install -y build-essential

This install Node,
npm and the build tools that come in handy for npm.

Clone your project repository on Step #2:
server instance

sudo mkdir /var/www

cd /var/www/

Take the clone or paste the code in the current directory, then change the directory:

cd react-project-demo

Install the project on the system:

sudo npm install 

Then you need to create the optimized production build of the project:

sudo npm run build

 

Step #3: Install and Configure Nginx to serve your application

sudo apt-get install nginx

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

and paste the below code:

server {

listen 80 default_server;

root /var/www/react-project-demo/build;

server_name localhost;

index index.html index.htm;

error_page 404 /;

location / {

}

}

Now you need to start your server:

sudo service nginx start

To restart application service:

sudo service nginx restart

To stop application service:

sudo service nginx  stop

You can check the nginx logs in the following files :

/var/log/nginx/access.log
/var/log/nginx/error.log

 

2) Deploy React Application using pm2:

pm2 is NPM package, using which one can start react application in detached mode.

Install Node & npm from step #1 of first method, then run following command:

npm i -g pm2 

 

This installs PM2, aka Process Manager. It’s going to help us handle running our app in the background of your server.

 

To run the react application:

pm2 start npm -- start 

 

To check the log of pm2:

pm2 logs

 

Other useful commands of pm2:

To make sure its running and to check its port number use:

pm2 list

 

to stop all the running instance of pm2:

pm2 stop all

 

to save the current running state:

pm2 save

 

to auto start on machine restarts:

pm2 startup

 

to disable autostart on machine restarts:

pm2 unstartup

 

manually restored saved processes:

pm2 resurrect

 

Similarly, we can use apache2 to deploy our React.js application on the production server.