How to Install Node.js, Deploy a React-Vite App with Nginx, and Use PM2 on Ubuntu

Deploying a React-Vite application on an Ubuntu server with Nginx and managing it using PM2 is a great way to ensure smooth performance. This guide will walk you through the process step by step.

Step 1: Install Node.js on Ubuntu

First, update the system package list and upgrade existing packages:

sudo apt update && sudo apt upgrade -y

Then, install Node.js using NodeSource:

curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt install -y nodejs

Verify the installation:

node -v
npm -v

Step 2: Generate a Production Build for React-Vite

Navigate to your React-Vite project directory:

cd /path/to/your-react-project

Ensure dependencies are installed:

npm install

Build the project for production:

npm run build

This will generate a dist/ folder containing the optimized production files.

Step 3: Move Build Files to Nginx Root Directory

Move the dist/ folder to a directory accessible by Nginx:

sudo mv /path/to/your-react-project/dist /var/www/react-app

Set proper ownership and permissions:

sudo chown -R www-data:www-data /var/www/react-app
sudo chmod -R 755 /var/www/react-app

Step 4: Configure Nginx for React App

Create a new Nginx configuration file:

sudo nano /etc/nginx/sites-available/react-app

Paste the following configuration:

server {
    listen 80;
    server_name _;  # Use your domain or IP if available

    root /var/www/react-app;
    index index.html;
    
    location / {
        try_files $uri /index.html;
    }

    error_page 404 /index.html;

    # Backend API proxy (3000 port)
    location /api/ {
        proxy_pass http://localhost:3000/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

Save the file and enable the configuration:

sudo ln -s /etc/nginx/sites-available/react-app /etc/nginx/sites-enabled/

If necessary, disable the default Nginx site:

sudo rm /etc/nginx/sites-enabled/default

Test the configuration and restart Nginx:

sudo nginx -t
sudo systemctl restart nginx

If any errors occur, check logs using:

sudo journalctl -xe

Step 5: Allow Traffic Through Firewall

Ensure that HTTP traffic is allowed:

sudo ufw allow 80/tcp

Now, visit your server’s IP in a browser:

http://your_server_ip

Your React-Vite app should be live! 🚀

Step 6: Configure Nginx for a Node.js Backend (Optional)

If your React app communicates with a Node.js backend, update the Nginx configuration:

location /api/ {
    proxy_pass http://localhost:3000/;  # Adjust port as needed
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
}

Restart Nginx to apply changes:

sudo systemctl restart nginx

Step 7: Install and Configure PM2 for Process Management

PM2 ensures that your Node.js application keeps running.

Install PM2 globally:

sudo npm install -g pm2

Verify installation:

pm2 -v

Start your Node.js app with PM2:

pm2 start app.js

Manage PM2 processes:

pm2 list         # View running applications
pm2 restart app  # Restart an app
pm2 stop app     # Stop an app
pm2 delete app   # Remove an app from PM2

Enable PM2 to restart on reboot:

pm2 startup

Run the suggested command that appears, for example:

sudo env PATH=$PATH:/usr/bin pm2 startup systemd -u your-user --hp /home/your-user

Save the PM2 process list:

pm2 save

Now, even after a reboot, PM2 will ensure your application starts automatically! 🚀

Akash (codeguyakash)