In this tutorial, we'll explain how to host React application on AlmaLinux 9 Server.
React, developed by Facebook, is a popular JavaScript library used for building user interfaces, particularly for single-page applications. It enables developers to create complex and interactive web applications with ease by breaking down the user interface into reusable components. React follows a declarative approach, allowing developers to design how the UI should look based on the application's state, and React efficiently updates and renders the necessary components when the state changes.
One of its core features is the virtual DOM, which optimizes rendering by only updating the parts of the actual DOM that have changed, resulting in faster and more efficient performance. React also supports server-side rendering, making it suitable for building SEO-friendly applications. It has a vast ecosystem, including tools like Redux for state management and React Router for navigation, making it a powerful choice for modern web development. With a large community and continuous updates, React remains a leading choice for developers building scalable and high-performance web applications.
Deploying a React application with Nginx on AlmaLinux 9 involves building your React app, setting up Nginx as a web server, and configuring it to serve your React application. Here's a step-by-step guide:
Prerequisites
- AlmaLinux 9 dedicated server or KVM VPS with root or sudo privileges.
- Basic knowledge of the terminal and SSH access to your server.
- A domain name with pointing A record to the server.
Host React Application on AlmaLinux
Step 1: Update AlmaLinux
Before you begin, make sure your server is up-to-date.
sudo dnf update -y
Step 2: Install Node.js and npm
For latest version, visit the Node.js official documentation page.
# installs nvm (Node Version Manager)
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.0/install.sh | bash
# download and install Node.js (you may need to restart the terminal)
nvm install 20
Verify the installation:
# verifies the right Node.js version is in the environment
node -v # should print `v20.17.0`
# verifies the right npm version is in the environment
npm -v # should print `10.8.2`
Step 3: Install and Configure Nginx
Install Nginx on your AlmaLinux 9 server:
sudo dnf install -y nginx
Start and enable Nginx to run on boot:
sudo systemctl start nginx
sudo systemctl enable nginx
Step 4: Host React Application
There are two ways to host the React application, you can copy all your project in to the server using scp for local machine and Git clone for Git repository or create a react application in the server.
Clone Git Repository
Next, you'll need to transfer your NestJS application to your VPS. If your project is hosted on GitHub, you can clone it directly:
git clone https://github.com/yourusername/your-react-app.git
Navigate into your project directory:
cd your-react-app
Build your React application:
npm run build
Create the directory where you want to serve your React application and copy the build files to that directory:
sudo mkdir -p /usr/share/nginx/react-app/
sudo cp -r build/* /usr/share/nginx/react-app/
Uploading Build Files with scp
If you want to upload build file from your local machine, you can use scp command.
Execute following command to copy all the build files using the * wildcard to /usr/share/nginx/react-app/.
scp -r ./build/* username@server_ip:/usr/share/nginx/react-app/
Create a New React application
Once Node.js and npm are installed, you can use the npx command to create a new React application. Navigate to the directory where you want to create your app:
cd /usr/share/nginx/
Create the React application:
npx create-react-app my-react-app
This command will create a new directory named my-react-app with all the necessary files and dependencies.
Build the React Application. Navigate into your new React application’s directory:
cd my-react-app
Build the React application for production:
npm run build
This command will generate a build directory inside your project, containing the optimized production-ready static files.
Step 5: Configure Nginx for React
Remove the default Nginx configuration file or modify it to serve your React application. Open the Nginx configuration file:
sudo nano /etc/nginx/nginx.conf
You can either modify the default server block or create a new configuration file in /etc/nginx/conf.d/. For this example, we’ll create a new configuration file:
sudo nano /etc/nginx/conf.d/react-app.conf
Add the following content to the file:
server {
listen 80;
server_name your_domain_or_IP;
root /usr/share/nginx/react-app/build;
index index.html;
location / {
try_files $uri /index.html;
}
}
Replace /usr/share/nginx/react-app/build with the path to your React application’s build directory.
Check the Nginx configuration for syntax errors:
sudo nginx -t
If the test is successful, reload Nginx:
sudo systemctl reload nginx
Step 6: Adjust Firewall Settings
If you have a firewall enabled, allow HTTP traffic:
sudo firewall-cmd --permanent --zone=public --add-service=http
sudo firewall-cmd --permanent --zone=public --add-service=https
sudo firewall-cmd --reload
Step 7: Secure Your Application with SSL
For a production environment, it's recommended to secure your application with SSL. You can use Let's Encrypt to obtain a free SSL certificate.
Install Certbot:
sudo dnf install certbot python3-certbot-nginx -y
Obtain an SSL certificate:
sudo certbot --nginx -d your_domain_or_IP
Follow the prompts to complete the installation and configure SSL for your React application.
Step 8: Access Your React Application
Your React application should now be accessible through your server’s IP address or domain name. Open your web browser and navigate to:
https://your_domain_or_IP
Conclusion
You’ve successfully seen how to host React application on AlmaLinux 9 Server. This setup serves your React app efficiently and can be further secured with SSL for production environments.
