ReactJS is a popular, open-source JavaScript library used to construct reusable UI components. Developed by Facebook in 2011, it facilitates the creation of dynamic web apps quickly and efficiently with minimal coding. ReactJS simplifies the integration of interactive elements on your website and ensures speed by leveraging the Virtual DOM. The library offers several powerful features such as Virtual DOM, One-way Data Binding, Components, JSX, Conditional Statements, and more.
In this tutorial, we’ll guide you through installing Create React App and hosting a ReactJS application using the Nginx web server on Ubuntu 20.04.
Prerequisites
- A server running Ubuntu 20.04 with a minimum of 2 GB of RAM.
- A valid domain name pointed to your server’s IP address. We’ll use reactjs.example.com in this example.
- Root password configured on the server.
Getting Started
Before we begin, it’s advisable to update your system packages to the latest versions. Execute the following command:
apt-get update -y
After updating, install the necessary dependencies with the command below:
apt-get install curl gnupg2 -y
Once the dependencies are in place, proceed to the Node.js installation.
Install Node.js
Node.js is required on your server; however, the latest version isn’t available by default in Ubuntu’s repositories. Instead, you need to install it from the official Node.js repository. Begin by adding the repository:
curl -sL https://deb.nodesource.com/setup_14.x | bash -
Then, install Node.js with this command:
apt-get install nodejs -y
Update NPM to the latest version using:
npm install npm@latest -g
To confirm Node.js installation, verify its version:
node -v
You should see an output similar to:
v14.15.3
Install Create React App Tool
Create React App simplifies the setup and configuration of React projects. Install it globally using:
npm install -g create-react-app
Create Your First React App
Let’s create a new React app. Navigate to the /opt directory and initialize your project:
cd /opt create-react-app reactproject
Next, change to the project directory and start your application:
cd /opt/reactproject npm start
Press CTRL+C to stop the app when needed.
Create a Startup File for React App
To automatically start the React app after system reboots, create a systemd service file:
nano /lib/systemd/system/react.service
Add the following configuration:
[Service] Type=simple User=root Restart=on-failure WorkingDirectory=/opt/reactproject ExecStart=npm start -- --port=3000
Configure Nginx for React App
Install Nginx to act as a reverse proxy, allowing the app to be accessed via port 80:
apt-get install nginx -y
Create an Nginx virtual host configuration:
nano /etc/nginx/sites-available/reactjs.conf
Add the following configuration:
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; } }
Access React App Web Interface
Open your browser and visit http://reactjs.example.com. You should see the ReactJS interface:
Conclusion
Congratulations! You’ve successfully installed and configured ReactJS on your Ubuntu 20.04 server. You’re now equipped to deploy your own React application in a production environment.
FAQ
- Can I use a different version of Node.js?
You can install different versions of Node.js by replacing the script URL with a different version setup in the command:https://deb.nodesource.com/setup_X.x
.
- What if Nginx is not working?
Check the Nginx configuration files for errors usingnginx -t
and verify Nginx status with
systemctl status nginx
.
- Can I develop multiple React apps on the same server?
Yes, you can host multiple React apps by configuring separate systemd services and Nginx configurations for each app, using different ports or server names.