
Building Your Portfolio Experience
Loading Tariqul Islam's projects...
Loading Tariqul Islam's projects...
Learn to deploy a production-grade React.js app using Node.js v20+, Vite, PM2, and NGINX with full HTTPS support.
Hostinger VPS (Ubuntu 22.04+)
Domain (e.g. domain-name.com
)
GitHub repo with your Next.js project
Node.js v20+ and NGINX installed
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
At your domain provider, configure A/AAAA
records:
Type | Name | Value |
---|---|---|
A | @ | VPS IPv4 |
A | www | VPS IPv4 |
AAAA | @ | VPS IPv6 |
AAAA | www | VPS IPv6 |
Note: IPv6 (AAAA
records) is optional — only add them if your VPS provider supports and assigns an IPv6 address.
mkdir -p ~/apps && cd ~/apps
git clone git@github.com:youruser/your-react-app.git
cd your-react-app
If private repo:
ssh-keygen -t ed25519 -C "your_email@example.com"
cat ~/.ssh/id_ed25519.pub
Add this key to GitHub > Settings > Deploy Keys.
Set environment variables:
nano .env
Install and build:
npm install
npm run build
Create ecosystem.config.cjs
:
module.exports = {
apps: [
{
name: 'react-app',
script: 'npm run preview',
env: {
NODE_ENV: 'production',
},
},
],
};
package.json
(optional improvement):
"scripts": {
"dev": "vite",
"build": "vite build",
"lint": "eslint .",
"preview": "vite preview --port 4173"
}
Start & persist:
pm2 start ecosystem.config.cjs
pm2 save
pm2 status
sudo nano /etc/nginx/sites-available/domain-name.com
Paste config:
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;
}
}
Enable and test:
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 ~/apps/your-react-app
git pull origin main
npm install
npm run build
pm2 reload react-app
React.js app runs on PM2
Served via NGINX reverse proxy
HTTPS enabled with Certbot
🎉 Congratulations on a secure, production-ready deployment!