Comment déployer une app React sur CPanel ?

Description 

Comment héberger une application React sur CPanel ? Ici, nous allons utiliser un projet d'exemple disponible sur Github. Nous avons fait un Fork du projet sur Github afin de l'éditer et de le personnaliser.

Mise en place du projet 

Tout d'abord, la première étape va être de télécharger le projet sur votre ordinateur et d'éditer le fichier package.json et ajouter un attribut "homepage" comme ceci : "homepage": "http: //votredomaine.com".

Nous partons du principe que comme vous travaillez avec React vous avez déjà téléchargé NodeJS sur votre ordinateur. Si ce n'est pas le cas, nous vous invitons à télécharger sa dernière version disponible juste ici : https://nodejs.org/en/

It's time to build ... an application, not a wall :)

Dans le répertoire, à la racine de votre application, exécutez la commande suivante depuis un terminal (CMD ou via le terminal de votre éditeur de code) npm install pour installer les dépendances et les mises à jour. Une fois que cela est terminé, la prochaine commande que vous devez exécuter est la commande suivante : npm run build (Notez que npm install fonctionne également en fonction de la version que vous utilisez).

Vous remarquerez que cela crée un nouveau répertoire dans votre projet appelé build. Le dossier de construction est essentiellement une version super-compressée de votre programme qui contient tout ce dont votre navigateur a besoin pour identifier et exécuter votre application.

La mise en ligne de votre application via Github

Si vous utilisez Github, suivez cette étape, sinon, vous pouvez passer à l'étape suivante.
Dans votre projet, créer un fichier .cpanel.yml.

cpanel.yml détermine comment les fichiers modifiés sont déployés sur votre hébergement web. Indiquez ceci dans votre fichier .cpanel.yml. N'oubliez pas de remplacer cpanelUser par votre nom d'utilisateur CPanel.

Une fois cela effectué, vous pouvez envoyer toutes les modifications sur Github. Maintenant que votre fichier se trouve dans votre projet et sur Github, vous pouvez récupérer votre lien .git et le mettre dans l'outil Git sur le panel de gestion de votre hébergement web.


Une fois le projet a été ajouté sur le panel de gestion de votre hébergement web, cliquez sur le bouton "Gérér " et rendez-vous dans l'onglet Pull or Deploy. Cliquez simplement sur Update from remote puis sur Deploy head commit.

La mise en ligne de votre application via FTP

Ouvrez le nouveau dossier nommé Build, sélectionnez tout son contenu,
et upload celui-ci sur votre FTP dans le dossier public_html.

Le .htaccess

Pour que les itinéraires fonctionnent dans votre application React, vous devez créer un fichier .htaccess dans le dossier public_html, au même niveau que les fichiers de votre application. Modifiez ce dernier et insérez-y les informations passe-partout suivantes :