DEV Community

Cover image for How To Deploy a React app using Nginx and Ubuntu 18.04
Ousseynou Diop
Ousseynou Diop

Posted on • Updated on

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

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Test NodeJS version

$ nodejs -V
v13.3.0
Enter fullscreen mode Exit fullscreen mode

Test NPM version

$ npm --v
6.13.1
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Deployment

I will deploy this project from my Github account

$ git clone https://github.com/xarala221/React-counter-app.git
$ cd React-counter-app
Enter fullscreen mode Exit fullscreen mode

Install packages

$ npm install
Enter fullscreen mode Exit fullscreen mode

Test the application

$ npm start
Enter fullscreen mode Exit fullscreen mode

Go to http://yourserverip:3000

Stop the terminal with CTRL+C

Create a project file

sudo nano /etc/nginx/sites-available/react_counter
Enter fullscreen mode Exit fullscreen mode
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;
   }
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Restart Nginx Server

$ sudo systemctl restart nginx
Enter fullscreen mode Exit fullscreen mode

Open your browser and go to http://youripaddress

Thanks for reading.
See you in the next tutorial

Top comments (0)