How to Deploy a React App to a VPS Using Nginx and Automate Deployment with a Script

Hosting your React app on a VPS gives you complete control, security, and performance — far beyond what you get from shared hosting. With Nginx and a simple Bash script, you can deploy and automate the entire process in minutes.

In this tutorial, you’ll learn how to deploy a React app to a VPS, set up Nginx as a production web server, and create a one-click deployment script to save time and reduce human error.

Whether you’re building a frontend for a SaaS, portfolio, or client project, this guide will give you a robust and professional setup.

🧰 Prerequisites

Here’s what you need before starting:

A Linux-based VPS (Ubuntu 22.04 or similar)
Root or sudo access via SSH
A built React app (from npm run build)
Your domain or static IP (optional, for public access)

🛠 Step-by-Step: Deploying React to VPS

1. 🔐 Connect to VPS and Install Nginx

First, SSH into your VPS:

ssh root@your-server-ip

Update system:

apt update && apt upgrade -y

Install Nginx:

apt install nginx -y

Enable and start Nginx:

systemctl enable nginx
systemctl start nginx

Check Nginx is working:

curl http://localhost

You should see the default Nginx page.

2. 📦 Install Node.js and npm

Required for building the React app directly on VPS (optional but handy for automation):

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

Verify:

node -v
npm -v

3. 🚀 Build Your React App

You can build it locally and transfer the files, or do it on the VPS.

Option A – Build locally and transfer:

On your machine:

npm run build

Then copy the build folder to the VPS:

scp -r build/ root@your-server-ip:/var/www/react-app/

Option B – Clone and build on the VPS:

cd /var/www/
git clone https://github.com/your-username/your-react-app.git react-app
cd react-app
npm install
npm run build

4. 🌐 Configure Nginx to Serve React

Create a new Nginx config:

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

Paste the following:

server {
    listen 80;
    server_name yourdomain.com;  # or your VPS IP

    root /var/www/react-app/build;
    index index.html;

    location / {
        try_files $uri /index.html;
    }
}

Enable the config:

ln -s /etc/nginx/sites-available/react-app /etc/nginx/sites-enabled/
nginx -t
systemctl reload nginx

Bonus (Optional): Redirect root IP traffic to this app by removing default config:

rm /etc/nginx/sites-enabled/default
systemctl reload nginx

Now your app is live at http://yourdomain.com or your VPS IP.

🔄 Automate Deployment with a Bash Script

To save time, especially for frequent updates, let’s automate the whole deployment with a Bash script.

✅ Deployment Script Example

Create a file deploy-react.sh:

nano deploy-react.sh

Paste:

#!/bin/bash

set -e

PROJECT_DIR="/var/www/react-app"
BUILD_DIR="$PROJECT_DIR/build"

echo "📥 Pulling latest code from GitHub..."
cd $PROJECT_DIR
git pull origin main

echo "📦 Installing dependencies..."
npm install

echo "🚧 Building React app..."
npm run build

echo "🚀 Restarting Nginx..."
nginx -t && systemctl reload nginx

echo "✅ Deployment complete!"

Make it executable:

chmod +x deploy-react.sh

Now any time you update your React app repo, just SSH in and run:

./deploy-react.sh

Boom — your app is updated live.

🧯 Optional Enhancements

Use Git Hooks or CI/CD (e.g. GitHub Actions) to trigger script
Add HTTPS with Certbot: apt install certbot python3-certbot-nginx -y certbot --nginx -d yourdomain.com
Use environment variables with .env and a frontend config injector like dotenv-webpack

👨‍🏫 Layman Explanation

Here’s what we did in simpler terms:

We connected to our remote server and installed a tool (Nginx) to serve websites.
We copied our React app to the server and told Nginx to show that app to the world.
To avoid repeating ourselves every time we update, we wrote a script that does all the steps for us — get the latest code, install packages, build the app, and restart Nginx.

✅ Final Result

After following this guide:

Your React app is live and served securely from your VPS.
You can automate future deployments in one command.
You’re using production-grade practices with Nginx and file structure separation.

🧠 Bonus Tips

Use PM2 or systemd if your app requires Node.js SSR (e.g., Next.js)
Back up /var/www/ and Nginx config with tools like rsync or borg
Use a domain with a CDN like Cloudflare for extra performance and protection

💬 Conclusion

Deploying a React app to a VPS isn’t just for devops pros. With tools like Nginx and Bash scripts, you can achieve a fast, reliable, and repeatable deployment process without needing third-party platforms.

Now you know how to host your React frontend and update it automatically. Let your creativity fly — and don’t forget to automate the boring stuff!