How to Deploy React on Linux VPS

React is the world’s leading JavaScript library for developing responsive, high-performance Single Page Applications (SPAs) and modern web frontends. Once your React application is ready for production, deploying it to a high-speed Linux Virtual Private Server (VPS) powered by Nginx delivers blazingly fast load times, dedicated CPU and RAM resources, and complete infrastructure control.

Whether your server is running Ubuntu, Debian, AlmaLinux, Rocky Linux, RHEL, or CentOS, this step-by-step tutorial will guide you through installing Node.js LTS, building your optimized production bundle (Vite or Create React App), configuring Nginx for SPA routing, and securing your deployment with free SSL.

Prerequisites

• An active Linux VPS running Ubuntu, Debian, AlmaLinux, Rocky Linux, or CentOS.
• SSH access with sudo administrative privileges (see How to Log in and Access Linux VPS via SSH).
• Nginx web server installed and active (see How to Set Up Nginx on Linux VPS).
• A registered domain pointing its A Record to your VPS IP (see How to Point Your Domain to a VPS IP Address).
• Deploying via GitHub? Follow our automated CI/CD guide: How to Deploy a Web Application on Linux VPS Using GitHub.

Step 1: Install Node.js LTS and NPM on Linux

We recommend using the official NodeSource repository to install the latest Long Term Support (LTS) version of Node.js:

Option A: Ubuntu & Debian (APT)

# Update repositories and install curl
sudo apt update && sudo apt install -y curl

# Add NodeSource Node.js 20 LTS repository
curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -

# Install Node.js & npm
sudo apt install -y nodejs

Option B: AlmaLinux, Rocky Linux & RHEL (DNF)

# Update repositories and install curl
sudo dnf update -y && sudo dnf install -y curl

# Add NodeSource Node.js 20 LTS repository
curl -fsSL https://rpm.nodesource.com/setup_20.x | sudo bash -

# Install Node.js & npm
sudo dnf install -y nodejs

Verify installation: node -v && npm -v.

Step 2: Transfer and Build Your React Application

Method A: Clone via Git (Recommended)

# Create directory and assign ownership
sudo mkdir -p /var/www/react-app
sudo chown -R $USER:$USER /var/www/react-app

# Clone your repository
git clone https://github.com/your-username/your-react-repo.git /var/www/react-app

# Install dependencies and build production assets
cd /var/www/react-app
npm install
npm run build

Method B: Upload Pre-Built Assets from Local Computer

If you build locally on your machine, upload the dist (Vite) or build (CRA) folder using SCP or SFTP:

# Run on your local computer:
npm run build
scp -r ./dist/* username@YOUR_SERVER_IP:/var/www/react-app/dist/

Step 3: Configure Nginx for React Single Page Application (SPA) Routing

React uses client-side routing (React Router). To prevent 404 Not Found errors when users refresh deep URLs (e.g. domain.com/dashboard), Nginx must redirect all route requests back to index.html.

1. Create Nginx Server Block:

• Ubuntu / Debian: sudo nano /etc/nginx/sites-available/react-app.conf
• AlmaLinux / Rocky Linux: sudo nano /etc/nginx/conf.d/react-app.conf

Paste the following production Nginx configuration:

server {
    listen 80;
    listen [::]:80;

    server_name domain.com www.domain.com;

    # Point to the React production build folder (dist for Vite, build for CRA)
    root /var/www/react-app/dist;
    index index.html;

    # Gzip Compression for Ultra-Fast React Asset Loading
    gzip on;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript image/svg+xml;

    location / {
        # Crucial for React Router: redirect all unhandled requests to index.html
        try_files $uri $uri/ /index.html;
    }

    # Cache static assets (JS, CSS, images) for maximum speed
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
        expires 1y;
        add_header Cache-Control "public, no-transform";
    }

    access_log /var/log/nginx/react_access.log;
    error_log /var/log/nginx/react_error.log;
}

2. Enable and Reload Nginx:

# On Ubuntu/Debian:
sudo ln -s /etc/nginx/sites-available/react-app.conf /etc/nginx/sites-enabled/

# Test syntax and reload on all Linux distros:
sudo nginx -t
sudo systemctl reload nginx

Step 4: Secure React with Free Let's Encrypt SSL

Protect your React application with HTTPS encryption:

sudo certbot --nginx -d domain.com -d www.domain.com

Step 5: Updating Your React Application in the Future

To deploy future code updates, simply connect to your server, pull the latest code, and rebuild:

cd /var/www/react-app
git pull origin main
npm install
npm run build

Frequently Asked Questions & Troubleshooting

Q: Why does my React app show a 404 error when refreshing a subpage?
A: This happens if Nginx is missing try_files $uri $uri/ /index.html; in its server block. Ensure that directive is present so React Router can process client-side routes.

Q: How do I proxy API backend requests from React on the same domain?
A: Add a proxy block to Nginx: location /api/ { proxy_pass http://127.0.0.1:5000; }.

Need Further Assistance?

If you have questions about deploying React applications, configuring Node.js environments, or setting up production Nginx proxies on your Linux VPS, our technical support team is available 24/7. Feel free to submit a support ticket for expert assistance.