Comment installer React.js dans cPanel : Guide 2024

Publié: 2024-09-01
Table des matières
  • Conditions préalables
  • Étape 1 : Préparez votre application React.js
  • Étape 2 : Configurez votre environnement cPanel
  • Étape 3 : configurer les paramètres du serveur
  • Étape 4 : Finalisation et tests
  • Dépannage
  • Conclusion

React.js est devenue l'une des bibliothèques JavaScript les plus populaires pour créer des interfaces utilisateur dynamiques et interactives. Bien qu'il soit couramment utilisé avec des frameworks backend comme Node.js, de nombreux développeurs cherchent à déployer leurs applications React.js sur des environnements d'hébergement partagé qui utilisent cPanel, un panneau de contrôle populaire pour gérer les comptes d'hébergement Web.

Cet article vous guidera tout au long du processus d'installation et de déploiement d'une application React.js à l'aide de cPanel, même si votre fournisseur d'hébergement ne répond pas spécifiquement aux frameworks JavaScript.

Vous pouvez également lire : 7 meilleurs hébergements pour les applications React 2024 (comparé)

Conditions préalables

Avant de vous lancer dans le processus d’installation, vous devez respecter quelques conditions préalables :

  1. Une application React.js prête à déployer : assurez-vous que votre application React est complète et prête pour la production. Cela signifie que tout le travail de développement est terminé et que vous êtes prêt à créer une version de l'application qui peut être proposée aux utilisateurs.
  2. Accès à cPanel : Vous devez accéder à cPanel, qui est fourni par votre service d'hébergement Web. La plupart des fournisseurs d'hébergement partagé proposent cPanel dans le cadre de leur service. (Nous recommandons Hostinger avec notre offre spéciale en utilisant le code promo « Codeless »).
  3. Un nom de domaine : un domaine ou sous-domaine enregistré sur lequel vous déployerez votre application React. Si vous ne l'avez pas encore configuré, vous pouvez soit utiliser un domaine existant, soit créer un sous-domaine via cPanel.

Étape 1 : Préparez votre application React.js

Générer une version de production

La première étape du déploiement de votre application React.js sur cPanel consiste à créer une version de production de votre application. Cette version est optimisée pour les performances, garantissant ainsi son fonctionnement efficace sur le Web. Suivez ces étapes qui doivent être effectuées sur votre ordinateur local.

  1. Open Terminal : accédez au répertoire de votre projet React à l'aide de votre terminal ou de votre invite de commande.
  2. Exécutez la commande Build : npm run build Si vous utilisez Yarn comme gestionnaire de packages, vous utiliserez : yarn build Cette commande génère un dossier build dans le répertoire de votre projet. Le dossier build contient tous les fichiers statiques nécessaires à l'exécution de votre application, y compris les fichiers HTML, CSS et JavaScript.

Prévisualiser la construction (facultatif)

Avant le déploiement, c'est une bonne idée de prévisualiser la version de production localement pour vous assurer que tout fonctionne correctement. Vous pouvez le faire en utilisant un simple outil serveur :

  1. Installer Serve Globalement : npm install -g serve
  2. Servir le build : serve -s build Cette commande démarrera un serveur local et servira votre application à partir du répertoire build , vous permettant de la prévisualiser dans votre navigateur.

Étape 2 : Configurez votre environnement cPanel

Une fois que votre application React est prête à être déployée, vous devez configurer votre environnement cPanel.

Créer un sous-domaine (facultatif)

Si vous souhaitez que votre application React soit accessible via un sous-domaine (par exemple, react.yourdomain.com ), vous devez en créer un dans cPanel :

  1. Connectez-vous à cPanel : utilisez le portail de connexion de votre fournisseur d'hébergement pour accéder à cPanel.
  2. Accédez aux sous-domaines : dans la section Domaines, cliquez sur « Sous-domaines ».
  3. Créer un nouveau sous-domaine : saisissez le nom souhaité pour votre sous-domaine et spécifiez le répertoire racine du document. Si vous laissez les paramètres par défaut, cPanel créera un nouveau répertoire sous public_html avec le nom de votre sous-domaine​.

Téléchargez les fichiers de construction

Une fois la version de production prête, vous pouvez maintenant la télécharger sur votre serveur.

  1. Accéder au gestionnaire de fichiers : dans cPanel, localisez le "Gestionnaire de fichiers" dans la section "Fichiers".
  2. Accédez au répertoire souhaité : si vous avez créé un sous-domaine, accédez au répertoire correspondant (par exemple, public_html/react ). Si vous effectuez un déploiement sur le domaine principal, utilisez le répertoire public_html .
  3. Téléchargez le dossier de construction :
    • Tout d'abord, compressez le dossier build sur votre ordinateur local dans un fichier ZIP.
    • Utilisez le bouton « Télécharger » dans le gestionnaire de fichiers pour télécharger ce fichier ZIP dans le répertoire souhaité.
    • Une fois téléchargé, faites un clic droit sur le fichier et sélectionnez « Extraire » pour décompresser le contenu​

Étape 3 : configurer les paramètres du serveur

Après avoir téléchargé les fichiers de build, vous devrez peut-être configurer certains paramètres du serveur, en particulier si votre application React utilise le routage côté client avec React Router.

Configurer .htaccess (facultatif)

Si votre application utilise React Router, qui s'appuie sur l'API d'historique HTML5 pushState , votre serveur doit être configuré pour gérer correctement les requêtes. Ceci est particulièrement important si les utilisateurs peuvent accéder directement à des itinéraires autres que la page d'accueil.

  1. Localisez ou créez .htaccess :
    • Dans votre répertoire public_html ou sous-domaine, vérifiez s'il existe un fichier .htaccess .
    • Sinon, créez un nouveau fichier nommé .htaccess .
  2. Ajouter des règles de routage :
    • Ouvrez le fichier .htaccess et ajoutez la configuration suivante : bashCopy code Options -MultiViews RewriteEngine On RewriteCond %{REQUEST_FILENAME} !-f RewriteRule ^ index.html [QSA,L]
    Cette configuration garantit que toutes les requêtes sont acheminées via le fichier index.html , ce qui est essentiel pour les applications monopage comme celles créées avec React​.

Étape 4 : Finalisation et tests

Une fois tout téléchargé et configuré, l'étape suivante consiste à finaliser votre déploiement et à vous assurer que tout fonctionne comme prévu.

Vérifier les autorisations de fichiers

Assurez-vous que les fichiers et répertoires disposent des autorisations appropriées pour être accessibles par le serveur Web. Généralement, les répertoires doivent avoir des autorisations définies sur 755 et les fichiers sur 644 .

Tester le déploiement

Visitez votre domaine ou sous-domaine (par exemple, react.yourdomain.com ) dans un navigateur Web pour vérifier que votre application React fonctionne correctement. Vérifiez toutes les pages et fonctionnalités pour vous assurer que tout fonctionne correctement.

Si vous rencontrez des problèmes, les outils de développement du navigateur peuvent être utiles pour diagnostiquer les problèmes. De plus, les journaux d'erreurs de cPanel peuvent fournir des informations sur les problèmes côté serveur.

Dépannage

Le déploiement d'une application React sur cPanel peut parfois entraîner des problèmes. Voici quelques problèmes courants et leurs solutions :

  • Erreurs de routage : si la navigation vers différentes pages de votre application entraîne des erreurs 404, assurez-vous que votre fichier .htaccess est correctement configuré pour gérer le routage côté client.
  • Erreurs de fichier introuvable : vérifiez à nouveau que tous les fichiers du dossier build ont été correctement téléchargés et qu'ils se trouvent dans le bon répertoire sur votre serveur.
  • Autorisations de fichiers incorrectes : si les fichiers ne se chargent pas, vérifiez que les autorisations de fichiers sont correctement définies ( 755 pour les répertoires et 644 pour les fichiers).
  • Problèmes de mise en cache : Parfois, les modifications peuvent ne pas apparaître immédiatement en raison de la mise en cache. Videz le cache de votre navigateur ou essayez d'accéder au site en mode navigation privée pour voir si le problème persiste.

Conclusion

Déployer une application React.js sur un serveur hébergé par cPanel peut sembler difficile au début, surtout si vous êtes habitué à des processus de déploiement plus automatisés avec des services comme Vercel ou Netlify ou consultez notre article : 10 meilleurs fournisseurs d'hébergement Node.js de 2024 ( Pas cher et gratuit). Cependant, en suivant les étapes décrites dans ce guide, vous pouvez réussir à faire fonctionner votre application React sur cPanel.

Ce processus comprend la préparation de votre application React pour la production, la configuration de votre environnement cPanel, la configuration des paramètres de serveur nécessaires et le dépannage de tout problème pouvant survenir. Une fois terminée, votre application React.js sera en ligne et accessible au monde entier via votre domaine ou sous-domaine.

Au fur et à mesure que vous gagnez en expérience, vous pouvez explorer des sujets plus avancés tels que l'intégration de services backend, la configuration de pipelines de déploiement continu ou l'optimisation supplémentaire des performances. Pour l’instant, profitez-en pour partager vos projets React avec le monde !