How to Deploy a React.js App with Nginx on Ubuntu 20.04

React.js is a Javascript library used for creating fast and interactive user interfaces, specifically for single-page applications. Due to its flexibility and simplicity, it's any deverloper's first choice to develop mobile and web applications. It allos you to compose complex UIs from small and isolated pieces of code called "components". Currently, it's used by many companies including, Facebook, Instagram, Twitter, Airbnb and more. 

In this tutorial, we'll show you how to deploy a React.js application with Nginx on Ubuntu 20.04.

Requirements

• An Ubuntu 20.04 cloud server.
• A valid domain name pointed to your server's IP.
• A root password or a user with sudo privileges.

Install Node.js

Before starting, Node.js and NPM must be installed on your server. If they aren't, you'll need to add the Nodesource repository to your system. 

First, install the required dependencies using the following command:

# apt-get update && apt-get upgrade && apt-get install curl gnupg2 gcc g++ make libssl-dev -y

Next, add the Nodesource repository using the following command:

# curl -sL https://deb.nodesource.com/setup_current.x -o nodesource_setup.sh && bash nodesource_setup.sh

Next, install Node.js and NPM with the following command:

# apt-get install nodejs -y && npm install npm@latest -g

Once installed, you can verify the Node.js version using the following command:

# node --version && npm --version

You should see the Node.js version in the following output: 

v16.10.0
7.24.2

Install create-react-app Utility

create-react-app is a command-line tool used to set up all the tools required to create a React application. You can install it by running the following command:

# npm -g install create-react-app

Once installed, verify the installed version using the following command:

# create-react-app --version

You should see the following output:

4.0.3

Create Your First React Application

In this section, you'll create a react app called reactapp inside /root directory: 

# create-react-app reactapp

You should see the following output:

Success! Created reactapp at /root/reactapp
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd reactapp
  npm start

Happy hacking!

To start your application, navigate to reactapp directory and run the following command:

# cd ~/reactapp && npm start

You should get the following output:

Compiled successfully!
You can now view reactapp in the browser.
  http://localhost:3000
Note that the development build is not optimized.
To create a production build, use npm run build

Press "CTRL+C" to stop the React application.

Create a Production Build for Your Application 

At this point, you have a react app project that runs successfully. Now, you'll need to create a production build. You can do it with the following command:

# npm run build

This will compile the JavaScript and assets into the build directory as shown below:

Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  41.34 KB  build/static/js/2.8d09931e.chunk.js
  1.62 KB   build/static/js/3.07870480.chunk.js
  1.16 KB   build/static/js/runtime-main.73bd03cc.js
  589 B     build/static/js/main.1dd9d4b2.chunk.js
  556 B     build/static/css/main.a617e044.chunk.css

The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.
You may serve it with a static server:

  npm install -g serve
  serve -s build

Find out more about deployment here:

  https://cra.link/deployment

At this point, you have a build directory inside your reactapp directory. Now, you'll need to deploy this directory with Nginx.

Configure Nginx to Deploy React App

First, install the Nginx server package using the following command:

# apt-get install nginx python3-certbot-nginx -y

Once Nginx has been installed, create a directory for the react app with the following command:

# mkdir /var/www/html/react

Next, copy all contents from the build directory to the react directory:

# cp -r /root/reactapp/build/* /var/www/html/react/

To go on, set proper ownership of the react directory with the following command:

# chown -R www-data:www-data /var/www/html/react

Next, create an Nginx virtual host configuration file to host your React app.

# nano /etc/nginx/conf.d/react.conf

Add the following lines: 

server {
         listen 80;
         listen [::]:80;
         root /var/www/html/react/;
         index index.html index.htm;
         # MODIFY SERVER_NAME EXAMPLE
         server_name react.ejemplo.com;
         location / {
              try_files $uri $uri/ =404;
         }
}

Save and close the file, then verify Nginx for any syntax error:

# nginx -t

The following result should be displayed:

nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
 nginx: configuration file /etc/nginx/nginx.conf test is successful

Restart the Nginx service to apply the changes:

# systemctl restart nginx

Finally, you can use certbot to acquire a certificate:

# certbot --nginx -d react.ejemplo.com --redirect

Access React.js Application

Now, open your web browser and access your React.js application using the URL http://react.example.com. You should see the following screen:

Conclusion

With the help of this guide, you've successfully installed React JS and created an application in React!

You can now deploy your own React JS application on a production environment.