React.js is one of the most powerful JavaScript libraries for building modern user interfaces. While many developers deploy React apps using cloud platforms, you can also host your React app on shared hosting using cPanel.
This guide will show you how to deploy a React.js app on cPanel step by step, even without Node.js support.
🔍 Why Deploy React on cPanel?
- Works with cheap shared hosting
- No need for Node.js server
- Easy deployment using static files
- Great for portfolios & small apps
✅ Prerequisites
Before starting, make sure you have:
- A completed React.js project
- Access to cPanel
- A domain or subdomain
- Basic knowledge of file uploads
🧩 Step 1: Build Your React App
Before uploading, you must create a production-ready version.
💻 Run Build Command
npm run build
OR
yarn build
👉 This creates a build folder with optimized static files.
🔎 Preview Build (Optional)
npm install -g serve
serve -s build
⚙️ Step 2: Login to cPanel
- Open your hosting dashboard
- Click cPanel Login
🌐 Step 3: Create a Subdomain (Optional)
- Go to Domains → Subdomains
- Enter name (e.g., react.yourdomain.com)
- Click Create
Step 4: Upload React Build Files
- Open File Manager
- Go to:
- public_html (main domain)
- OR subdomain folder
- Upload ZIP of build folder
- Extract files
🔧 Step 5: Configure .htaccess (IMPORTANT)
For React Router to work:
Create or edit .htaccess file:
Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]
👉 This prevents 404 errors on refresh.
🔐 Step 6: Set File Permissions
- Folders → 755
- Files → 644
🧪 Step 7: Test Your Website
Visit:
https://yourdomain.com
OR
https://react.yourdomain.com
✔ Check:
- Pages load correctly
- Routing works
- Images & CSS load
⚠️ Common Issues & Fixes
❌ 404 Error on Refresh
✔ Fix: Add .htaccess rules
❌ Files Not Loading
✔ Fix: Check upload directory
❌ Styling Broken
✔ Fix: Ensure correct paths in build
❌ Cache Problem
✔ Fix: Clear browser cache