Déployer React + Express.js + MySQL sur cPanel (Guide Complet)

✅ Architecture générale de l’application

/home/username/
├── public_html/              → Application React (build)
├── api/                      → Backend Express.js
│    ├── app.js
│    └── package.json
└── Base MySQL                → Gérée dans phpMyAdmin

1️⃣ Déployer React dans cPanel

1. Sur votre ordinateur, générez la version de production :

   npm run build

2. Ouvrez cPanel → File Manager.
3. Accédez à public_html/.
4. Téléversez le contenu du dossier build/ dans public_html/.

Votre application React est maintenant accessible : https://votre-domaine.com

2️⃣ Déployer Express.js via Node.js App Manager

Si votre cPanel dispose de Setup Node.js App, vous pouvez faire tourner Express directement… Voir Article ici

1. Allez dans cPanel → Software → Setup Node.js App.
2. Cliquez Create Application.
3. Réglez :
   • Version Node.js : 16+
   • Mode : Production
   • Dossier applicatif : api
   • Fichier d’entrée : app.js
4. Dans l’interface, exécutez Run NPM Install puis Run Application.

Votre backend Express est en ligne 🎉

3️⃣ Connecter Express à MySQL

Dans phpMyAdmin (cPanel) : créez une base, un utilisateur et attribuez-lui tous les privilèges sur la base… Voir article ici

const express = require('express');
const cors = require('cors');
const mysql = require('mysql2');

const app = express();
app.use(express.json());
app.use(cors({ origin: 'https://votre-domaine.com' }));

const db = mysql.createConnection({
  host: 'localhost',
  user: 'nom_utilisateur_mysql',
  password: 'mot_de_passe_mysql',
  database: 'nom_base'
});

app.get('/api/users', (req, res) => {
  db.query('SELECT * FROM users', (err, results) => {
    if (err) return res.status(500).send(err);
    res.json(results);
  });
});

app.listen(3001, () => console.log('API Running on port 3001'));

Note : dans Node.js App, définissez PORT=3001 si nécessaire, puis redémarrez l’application.

4️⃣ Faire communiquer le Frontend (React) avec le Backend (Express)

import axios from 'axios';

axios.get('https://votre-domaine.com:3001/api/users')
  .then(res => console.log(res.data))
  .catch(err => console.error(err));

🛠️ Astuce : Proxy React (facultatif)

{
  "proxy": "https://votre-domaine.com:3001"
}

axios.get('/api/users');

🎯 Récapitulatif

🔥 Aller plus loin

• Pack ZIP complet (frontend + backend prêt à déployer)
• Tutoriel vidéo d’installation
• API sécurisée avec JWT
• Upload d’images compatible cPanel

Dites : “Je veux le pack ZIP” ou “Je veux la vidéo” et je vous le prépare.

Par nitrohost

❓ FAQ — Questions Fréquentes