How to deploy a React app with Nginx and Ubuntu 18.04

nginx Apr 23, 2020

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

In this article i will use a DigitalOcean Ubuntu VPS, you can get 100$ credit by following this link

Get 100$ Credit

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 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 location 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

We started sharing these tutorials and articles to help and inspire developers and engineers around the world. If our blog has been helpful to you, feel free to buy us a coffee to keep us going :).

Buy us a coffeeBuy us a coffee

Ousseynou Diop

Full stack Developer & Python Lover

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.