ReactJS is a very powerful front-end open-source JavaScript library used for building the user interface and related components. It is maintained by Facebook and the community of developers. ReactJS can be used in the development of Web Applications or Mobile Apps.
In this tutorial, we will show you how to install ReactJS on your Ubuntu 20.04 server.
Table of Contents
Prerequisites
- A Ubuntu 20.04 VPS with root access enabled or a user with Sudo privileges.
- 4 GB RAM (Minimum 2 GB)
- 10 GB Free Space
Step 1: Log in via SSH and Update your System
First, you will need to log in to your Ubuntu 20.04 server via SSH as the root user:
ssh root@IP_Address -p Port_number
You will need to replace ‘IP_Address’ and ‘Port_number’ with your server’s respective IP address and SSH port number. Additionally, replace ‘root’ with the sudo username if necessary.
You have to make sure that all Ubuntu OS packages installed on the server are up to date. Run the following commands to upgrade all installed packages on your server:
apt-get update apt-get upgrade
Step 2. Install Nodejs and NPM
First, you need to install NodeJS since a ReactJS application can only run if NodeJS is installed on your server. Node.js is an open-source and cross-platform JavaScript runtime environment built on Chrome’s V8 JavaScript engine.
The simple and easiest way to install Node.js and npm is to install them from the Ubuntu default repository.
By default, the latest version of Node.js is not available in the Ubuntu 20.04 default repository. So you will need to add the Node.js official repository to your system.
Add the Node.js repository with the following command:
curl -sL https://deb.nodesource.com/setup_14.x | bash -
And install the Node.js from the added repositories running the following command:
sudo apt-get install nodejs
Once NodeJS has been installed, you can verify the installed version of Node.js with the following command:
node -v
You should get the following output:
v14.17.1
Once Node.js is installed, update the NPM to the latest version using the following command:
npm install npm@latest -g
You can now verify the npm version with the following command:
npm -v
You should get the following output:
7.19.0
Step 3. Install Create-React-App Tool
Now install the create-react-app tool using NPM. This tool helps to set all tools required to create a new project in React.
npm install -g create-react-app
Check the version with:
create-react-app --version
You should get the following output:
4.0.3
Step 4: Create your ReactJS Application
You can create your ReactJS application with the following command:
create-react-app my-project
Once the installation is finished, you should see the following output:
Success! Created my-project at /root/my-project 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 my-project npm start Happy hacking!
Once your project is created, change the directory to the ReactJS application:
cd my-project
Now you need to start your ReactJS application with the following command:
npm start
You should get the following output:
Compiled successfully! You can now view my-project in the browser. Local: http://localhost:3000 On Your Network: http://192.168.1.101:3000 Note that the development build is not optimized. To create a production build, use npm run build.
By default, the ReactJS application starts on port 3000.
Step 5: Create a Systemd Service File for ReactJS App
Next, you need to create a systemd service file to manage the ReactJS service. You can create it with the following command:
nano /lib/systemd/system/reactjs.service
Add the following lines:
[Service] Type=simple User=root Restart=on-failure WorkingDirectory=/root/my-project ExecStart=npm start -- --port=3000
Save and close the file, then reload the systemd service with the following command:
systemctl daemon-reload
Next, start the ReactJS service and enable it to start at system reboot with the following command:
systemctl start reactjs systemctl enable reactjs
You can verify the status of the ReactJS service with the following command:
systemctl status reactjs
You should get the following output:
● reactjs.service Loaded: loaded (/lib/systemd/system/reactjs.service; static; vendor preset: enabled) Active: active (running) Main PID: 66390 (npm start --por) Tasks: 30 (limit: 2248) Memory: 188.7M CGroup: /system.slice/reactjs.service ├─66390 npm start --port=3000 ├─66401 sh -c react-scripts start "--port=3000" ├─66402 node /root/my-project/node_modules/.bin/react-scripts start --port=3000 └─66409 /usr/bin/node /root/my-project/node_modules/react-scripts/scripts/start.js --port=3000
Step 6: Access ReactJS Web UI
Now, open your web browser and type the URL http://your-server-ip-address. You should see your ReactJS Application on the following screen:
Congratulations! you have successfully installed the ReactJS App on Ubuntu 20.04.
Of course, you don’t have to install ReactJS on Ubuntu if you use one of our Managed hosting services, in which case you can simply ask our expert Linux admins to install this for you. They are available 24×7 and will take care of your request immediately.
PS. If you liked this post on how to install ReactJS on Ubuntu, please share it with your friends on the social networks using the buttons on the left or simply leave a reply below. Thanks.