Deployment Guide for React.js Application useing PM2 on Hostinger VPS

ssh root@your-vps-ip
sudo apt update && sudo apt upgrade -y

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

# Nginx
sudo apt install nginx -y
sudo systemctl enable nginx
sudo service nginx status

# PM2
install -g pm2
pm2 startup

# Git
sudo apt install git -y

# Certbot
sudo apt install python3-certbot-nginx -y

# Firewall
sudo ufw enable
sudo ufw allow 'Nginx Full'
sudo ufw allow OpenSSH

mkdir -p ~/srv/apps && cd ~/srv/apps
git clone git@github.com:youruser/your-react-app.git
cd your-react-app

ssh-keygen -t ed25519 -C "your_email@example.com"
cat ~/.ssh/id_ed25519.pub

nano .env

npm install
npm run build

module.exports = {
  apps: [
    {
      name: 'react-app',
      script: 'npm run preview',
      env: {
        NODE_ENV: 'production',
      },
    },
  ],
};

"scripts": {
  "dev": "vite",
  "build": "vite build",
  "lint": "eslint .",
  "preview": "vite preview --port 4173"
}

pm2 start ecosystem.config.cjs
pm2 save
pm2 status

sudo nano /etc/nginx/sites-available/domain-name.com

server {
  listen 80;
  server_name domain-name.com www.domain-name.com;

  location / {
    proxy_pass http://localhost:4173;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
  }
}

sudo ln -s /etc/nginx/sites-available/domain-name.com /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl restart nginx

sudo apt install python3-certbot-nginx -y
sudo certbot --nginx -d domain-name.com -d www.domain-name.com

# Verify and reload
sudo nginx -t && sudo systemctl reload nginx

# Auto-renewal
sudo systemctl enable certbot.timer
sudo certbot renew --dry-run

cd ~/srv/apps/your-react-app
git pull origin main
npm install
npm run build
pm2 reload react-app