Déploiement d'un projet React sur YoupiHost (via Plesk)

Guide de déploiement : Application React sur YoupiHost (via Plesk)

Ce guide détaille la procédure complète pour déployer votre application React sur votre hébergement YoupiHost via le gestionnaire de fichiers Plesk.

Prérequis

•        Un compte YoupiHost actif avec un hébergement mutualisé.

•        Assurez-vous d’avoir compilé votre projet afin de générer le dossier build/ contenant les fichiers statiques de production.

Phase 1 : Accès à l'environnement d'hébergement

Étape 1 : Connexion à l'espace client YoupiHost

1.     Connectez-vous à votre compte client sur youpihost.com.

2.     Une fois connecté, repérez et cliquez sur Mes services dans le tableau de bord.

Étape 2 : Sélection du service

1.     Dans la liste de vos services actifs, localisez l'hébergement sur lequel vous souhaitez déployer votre projet React.

2.     Cliquez sur le menu des trois points (…) situé à droite du service concerné.

Étape 3 : Accès au gestionnaire de fichiers Plesk

1.     Sur la page de gestion de votre hébergement, repérez la section Raccourcis.

2.     Cliquez sur Gestionnaire de fichiers. Une nouvelle fenêtre s'ouvre et vous redirige automatiquement vers le File Manager Plesk.

Phase 2 : Upload du fichier sur le serveur

Étape 4 : Naviguer dans httpdocs et uploader le fichier ZIP

1.     Dans le File Manager Plesk, cliquez sur le dossier httpdocs dans l'arborescence à gauche. Il s'agit de la racine publique de votre site web.

2.     Cliquez sur le bouton + dans la barre d'outils, puis sélectionnez Upload File.

3.     Choisissez votre fichier build.zip depuis votre ordinateur et attendez la fin du transfert.

Phase 3 : Extraction et mise en ligne

Étape 5 : Sélectionner le fichier et lancer l'extraction

1.     Une bannière verte confirme : "1 files were uploaded to /httpdocs".

2.     Cochez la case à gauche du fichier build.zip pour le sélectionner.

3.     Cliquez sur le bouton Archive dans la barre d'outils, puis choisissez Extract Files.

Étape 6 : Confirmer l'extraction dans httpdocs

1.     Une fenêtre de dialogue "Extract Files" s'affiche.

2.     Vérifiez que le champ "Extract files to the following directory" indique bien /httpdocs.

3.     Si vous effectuez une mise à jour d'un déploiement existant, cochez "Replace existing files".

4.     Cliquez sur OK pour lancer l'extraction.

5. Sélectionner et copier les fichiers extraits
Après l’extraction, les fichiers React se retrouvent dans un sous-dossier (ex : build/) à l’intérieur de httpdocs. Il faut les déplacer directement à la racine.
Entrez dans le dossier build/, sélectionnez tous les fichiers (cochez la case en tête de liste), puis cliquez sur le bouton Copy dans la barre d’outils.

6. Coller dans httpdocs via “Copy Files”
La boîte de dialogue “Copy Files” s’affiche avec l’arborescence des dossiers. Sélectionnez httpdocs comme dossier de destination (comme indiqué par la flèche) et cliquez sur OK.

Phase 4 : Vérification

Étape 7 : Vérifier le déploiement en ligne

1.     Ouvrez votre navigateur et saisissez l'URL de votre domaine (exemple : bankai.iloveyoupihost.com).

2.     Votre application React doit s'afficher correctement.

3.     Testez la navigation pour vous assurer que toutes les pages fonctionnent bien.