If you’ve built a project using React (frontend) and Node.js/Express (backend), the next step is hosting it online so users can access it from anywhere.

This guide will walk you through:

• Setting up a local development environment
• Deploying on CyberPanel (Ubuntu + LiteSpeed)
• Deploying on cPanel (Node.js App)

We’ll also cover SSL setup, reverse proxy, and troubleshooting.

🛠 1. Local Setup

Before deploying, make sure your project works locally.

Install Node.js & npm

On Ubuntu/Debian:

sudo apt update && sudo apt upgrade -y
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt install -y nodejs
node -v
npm -v

Create Backend (Node.js + Express)

1. Create a new folder:

mkdir backend && cd backend
npm init -y

2. Install dependencies:

npm install express cors dotenv

3. Create server.js:

const express = require("express");
const cors = require("cors");
require("dotenv").config();

const app = express();
const PORT = process.env.PORT || 5050;

app.use(cors());
app.use(express.json());

app.get("/", (req, res) => {
  res.send("API is running 🚀");
});

app.listen(PORT, () => {
  console.log(`Server running at http://localhost:${PORT}`);
});

4. Start backend:

node server.js

Visit http://localhost:5050

Create Frontend (React)

1. Create React app:

npx create-react-app frontend
cd frontend

2. Start dev server:

npm start

3. Connect React to backend (src/App.js):

import React, { useEffect, useState } from "react";
import axios from "axios";

function App() {
  const [message, setMessage] = useState("");

  useEffect(() => {
    axios.get("http://localhost:5050/")
      .then(res => setMessage(res.data))
      .catch(err => console.error(err));
  }, []);

  return (
    <div>
      <h1>React + Node.js Fullstack</h1>
      <p>Backend says: {message}</p>
    </div>
  );
}

export default App;

Now you have both backend and frontend working locally.

2. Deploy on CyberPanel (Ubuntu + LiteSpeed)

CyberPanel is a control panel that uses LiteSpeed Web Server (LSWS).

Step 1: Upload Backend

Connect to server:

ssh root@your-server-ip

Clone or upload backend:

cd /home/yourdomain.com/
git clone https://github.com/your-repo/backend.git
cd backend
npm install

Run with PM2 (keeps app alive):

npm install -g pm2
pm2 start server.js --name backend
pm2 save
pm2 startup

Step 2: Serve Frontend

Build React:

cd frontend
npm run build

Copy build files to public_html:

cp -r build/* /home/yourdomain.com/public_html/

Add .htaccess for React routing:

Options -MultiViews
RewriteEngine On
RewriteBase /

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^ index.html [L]

Step 3: Reverse Proxy for API

In CyberPanel → Website → Rewrite Rules, add:

RewriteEngine On
RewriteRule ^api/(.*)$ http://127.0.0.1:5050/$1 [P,L]

Now your frontend can call:

axios.get("/api/")

Step 4: Enable SSL

Go to CyberPanel → Websites → Manage → SSL
Click Issue SSL for Let’s Encrypt.

Now:

• Frontend → https://yourdomain.com
• API → https://yourdomain.com/api

3. Deploy on cPanel (Node.js App)

If your hosting uses cPanel, you can use Setup Node.js App.

Step 1: Upload Backend

1. Login to cPanel → Setup Node.js App
2. Create a new app:
   • Node.js version → Choose LTS (e.g. 18)
   • App root → /backend
   • Startup file → server.js
3. Upload backend files to /backend folder.
4. From cPanel → Run:

npm install

5. Restart app.
   Your API will run on a private port (visible in cPanel).

Step 2: Upload Frontend

1. Locally, build React:

npm run build

2. Upload build/ contents to:

/home/username/public_html/

3. Add .htaccess (same as above) for React routing.

Step 3: Connect Frontend to Backend

Since Node apps in cPanel run on random ports, you should:

• Create a subdomain (api.yourdomain.com)
• Point it to the Node app port (your hosting provider may need to help with this).

Troubleshooting

• 403 Forbidden → Fix permissions:

chmod -R 755 ~/public_html

• Blank React Page → Ensure .htaccess exists.
• API not reachable → Check PM2 logs (CyberPanel) or restart Node app (cPanel).
• SSL Issues → Re-issue Let’s Encrypt from CyberPanel/cPanel.

Conclusion

You’ve learned how to:

• Set up React + Node locally
• Deploy on CyberPanel with PM2 and reverse proxy
• Deploy on cPanel with Node.js App
• Connect frontend and backend under one domain with SSL

With this setup, your full-stack JavaScript app is production-ready.