How to install ReactJS on Ubuntu 20.04

ReactJS is a free and open-source JavaScript library used for building reusable UI components. It was developed by Facebook in 2011 for creating rich and engaging web apps fast and efficiently with minimal coding. It allows you to create interactive elements on websites. It uses Virtual DOM that makes the app fast. It offers a rich set of features including, Virtual DOM, One-way Data Binding, Components, JSX, Conditional Statements and many more.

In this tutorial, we will show you how to install create react app and host a ReactJS application with Nginx web server on Ubuntu 20.04.

Prerequisites

• A server running Ubuntu 20.04 with minimum 2 GB of RAM.
• A Valid domain name pointed with your server IP. In this tutorial, we will use reactjs.example.com domain.
• A root password is configured the server.

Getting Started

Before starting, it is always recommended to update your system packages to the latest version. You can update them by running the following command:

apt-get update -y

Once all the packages are updated, install other required dependencies by running the following command:

apt-get install curl gnupg2 -y

Once all the dependencies are installed, you can proceed to the next step.

Install Node.js

Next, you will need to install Node.js to your server. By default, the latest version of Node.js is not available in the Ubuntu 20.04 standard repository. So you will need to install Node.js from the Node.js official repository.

First, add the Node.js repository with the following command:

curl -sL https://deb.nodesource.com/setup_14.x | bash -

Next, run the following command to install the Node.js to your system:

apt-get install nodejs -y

After installing Node.js, update the NPM to the latest version using the following command:

npm install npm@latest -g

You should get the following output:

/usr/bin/npm -> /usr/lib/node_modules/npm/bin/npm-cli.js
/usr/bin/npx -> /usr/lib/node_modules/npm/bin/npx-cli.js
+ [email protected]
updated 2 packages in 12.78s

Next, verify the installed version of Node.js with the following command:

node -v

You should get the following output:

v14.15.3

Once you are finished, you can proceed to the next step.

Install Create React App Tool

Create React App is a tool that saves your time for setup and configuration. You just need to run a single command and Create React App will setup all tools need to start your project.

You can install the Create React App tool using the following command:

npm install -g create-react-app

You should get the following output:

/usr/bin/create-react-app -> /usr/lib/node_modules/create-react-app/index.js
+ [email protected]
added 67 packages from 25 contributors in 4.705s

Once you are finished, you can proceed to the next step.

Create Your First React App

In this section, we will show you how to create a React app with Create React App tool.

First, change the directory to /opt and create your first project with the following command:

cd /opt
create-react-app reactproject

You should see the following output:

Success! Created reactproject at /opt/reactproject
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 reactproject
  npm start

Happy hacking!

Next, change the directory to your project and start your application with the following command:

cd /opt/reactproject
npm start

You should get the following output:

Compiled successfully!

You can now view reactproject 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 application.

Create a Startup File for React App

If you want to start React App automatically at system reboot then you will need to create a systemd service for your React app. So you can manage your app easily using the systemctl command. You can create a systemd service file with the following command:

nano /lib/systemd/system/react.service

Add the following lines:

[Service]
Type=simple
User=root
Restart=on-failure
WorkingDirectory=/opt/reactproject
ExecStart=npm start -- --port=3000

Save and close the file then reload the systemd daemon with the following command:

systemctl daemon-reload

Next, start the React service and enable it to start at system reboot by running the following command:

systemctl start react
systemctl enable react

You can verify the status of the React service with the following command:

systemctl status react

You should get the following output:

? react.service
     Loaded: loaded (/lib/systemd/system/react.service; static; vendor preset: enabled)
     Active: active (running) since Sat 2020-12-19 06:11:42 UTC; 4s ago
   Main PID: 30833 (node)
      Tasks: 30 (limit: 4691)
     Memory: 141.0M
     CGroup: /system.slice/react.service
             ??30833 npm
             ??30844 sh -c react-scripts start "--port=3000"
             ??30845 node /opt/reactproject/node_modules/.bin/react-scripts start --port=3000
             ??30852 /usr/bin/node /opt/reactproject/node_modules/react-scripts/scripts/start.js --port=3000

Dec 19 06:11:42 ubuntu2004 systemd[1]: Started react.service.
Dec 19 06:11:43 ubuntu2004 npm[30833]: > [email protected] start /opt/reactproject
Dec 19 06:11:43 ubuntu2004 npm[30833]: > react-scripts start "--port=3000"
Dec 19 06:11:46 ubuntu2004 npm[30852]: ? ?wds?: Project is running at http://0.0.0.0:3000/
Dec 19 06:11:46 ubuntu2004 npm[30852]: ? ?wds?: webpack output is served from
Dec 19 06:11:46 ubuntu2004 npm[30852]: ? ?wds?: Content not from webpack is served from /opt/reactproject/public
Dec 19 06:11:46 ubuntu2004 npm[30852]: ? ?wds?: 404s will fallback to /
Dec 19 06:11:46 ubuntu2004 npm[30852]: Starting the development server...

Once you are finished, you can proceed to the next step.

Configure Nginx for React App

It is a good idea to install and configure Nginx as a reverse proxy for React App. So you can access your app through the port 80.

First, install the Nginx package using the following command:

apt-get install nginx -y

Once the Nginx is installed, create a new Nginx virtual host configuration file:

nano /etc/nginx/sites-available/reactjs.conf

Add the following lines:

upstream backend {
  server localhost:3000;
}

server {
    listen 80;
    server_name reactjs.example.com;

    location / {
        proxy_pass http://backend/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $http_host;

        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forward-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forward-Proto http;
        proxy_set_header X-Nginx-Proxy true;

        proxy_redirect off;
    }
}

Save and close the file then enable the Nginx virtual host with the following command:

ln -s /etc/nginx/sites-available/reactjs.conf /etc/nginx/sites-enabled/

Next, verify the Nginx for any syntax error by running the following command:

nginx -t

You should get the following output:

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

Finally, restart the Nginx service to apply the changes:

systemctl restart nginx

You can also verify the Nginx service status with the following command:

systemctl status nginx

You should see the following output:

? nginx.service - A high performance web server and a reverse proxy server
     Loaded: loaded (/lib/systemd/system/nginx.service; enabled; vendor preset: enabled)
     Active: active (running) since Sat 2020-12-19 06:12:42 UTC; 4s ago
       Docs: man:nginx(8)
    Process: 30899 ExecStartPre=/usr/sbin/nginx -t -q -g daemon on; master_process on; (code=exited, status=0/SUCCESS)
    Process: 30913 ExecStart=/usr/sbin/nginx -g daemon on; master_process on; (code=exited, status=0/SUCCESS)
   Main PID: 30915 (nginx)
      Tasks: 3 (limit: 4691)
     Memory: 3.6M
     CGroup: /system.slice/nginx.service
             ??30915 nginx: master process /usr/sbin/nginx -g daemon on; master_process on;
             ??30916 nginx: worker process
             ??30917 nginx: worker process

Dec 19 06:12:42 ubuntu2004 systemd[1]: Starting A high performance web server and a reverse proxy server...
Dec 19 06:12:42 ubuntu2004 systemd[1]: Started A high performance web server and a reverse proxy server.

At this point, Nginx is installed and configured to serve React App. You can now proceed to the next step.

Access React App Web Interface

Now, open your web browser and type the URL http://reactjs.example.com. You will be redirected to the React.Js web interface in the following screen:

Conclusion

Congratulations! you have successfully installed and configured React.Js on Ubuntu 20.04 server. I hope you have now enough knowledge to deploy your own React application in the production environment. Feel free to ask me if you have any questions.