Déployer mon projet React facilement

Dec 01, 2021 Deployment Wilfried Djopa

Nous avons préparé pour vous (développeur React) un article (tuto) qui vous explique comment vous pouvez déployer votre application React facilement. Nous avons également ajouté quelques méthodes supplémentaires un peu moins simples, mais toujours facile à implémenter chez vous.

Prerequis

Pour faire ce tuto, vous avez besoin de :

Une application faites avec React.JS
Un compte créé sur la plateforme Hostme.space
Un outil pour ZIPPER des dossiers

Le build React

Est-ce que vous avez déjà fait un build React ? Si oui, vous pouvez passer à la section suivante. Sinon, je vous l'explique tout de suite. Un build React est un dossier qui est créé lorsque vous executez la commande :

npm run build 
-- OR --
yarn build

Cette commande va alors créer un dossier avec les versions compressés de vos codes JS et CSS. Cela aura pour effet de rendre votre application beaucoup plus rapide. C'est ce build qui est généralement utilisé en version de production.

Zippez votre dossier build

Lorsque vous avez entré l'une des commandes suivantes,

npm run build 
-- OR --
yarn build

Vous obtenez un dossier /build qui apparait dans votre projet. Vous devrez alors vous rendre dans ce répertoire et faire zipper tout son contenu. Vous obtiendrez quelque chose comme ceci :

ATTENTION : Assurez vous d'avoir l'extension .zip. Par la suite, c'est important que le format utilisé soit un ZIP

Une fois que vous avez le fichier ZIP, vous devrez vous connecter sur la plateforme hostme.space (c'est un hébergeur de site internet simple et rapide, cette plateforme se veut plus inclusive, ainsi, vous avez la possibilité de payer très moins chère avec des modes de paiements tel que le Mobile Money (OM, MTN), si vous êtes en Afrique Francophone ou alors le dollars américain (USD $) et l'euro (EUR €) si vous êtes en Europe ou aux USA).

Déployer via une interface Web

Une fois connecté sur Hostme.space, vous avez la possibilité de déposer votre dossier compressé depuis la page d'accueil.

Vous n'avez qu'à déposer le fichier dans le champ dédié et remplir les autres champs avec le nom de votre site et votre adresse email

Une fois fait, vous cliquez sur "Deploy & Activate" et vous aurez alors votre site qui est déployé avec le message :

🎉 Bravo à vous, vous avez réussi à déployer votre application React en production.

Déployer via l'invite de commande

Cette méthode concerne les plus geek d'entre vous. Si vous le souhaitez, vous avez la possibilité de déployer toutes vos applications depuis l'invite de commande. Cette méthode est pratique, si vous n'avez pas de navigateur à portée de main (🤷🏾‍♂️ ca pourrait arriver si vous travaillez directement en mode console et souhaitez faire un build et déploiement là bas directement...).

Pour le faire, il vous faut alors une clé d'API qui vous permettra d'etre reconnu par les système de Hostme et ainsi déployer votre projet sous votre compte.

Obtenir une clé d'API Hostme

Pour obtenir une clé d'API Hostme, vous devrez vous connecter à votre compte et aller dans la section "API Tokens".

Ensuite cliquer sur le bouton "+ Generate a new token"

Vous aurez alors une clé d'API que vous devrez copier dans un endroit sûr.

Script de déploiement

Une fois que vous avez votre clé d'API, vous devrez alors entrer la commande suivante dans votre console :

curl -v -X POST -H "Accept: application/json" -H "Authorization: Bearer {{votre clé API ici (sans les accolades)}}" -F "file=@<chemin vers votre fichier .zip>" https://hostme.space/api/websites/{{le nom de votre projet (format slug*)}}/deploy_on_push

*slug : Signifie une chaine qui peut etre utilisée dans une URL sans erreurs (pas d'espace, pas d'accents, juste des lettres séparés par des tirets (-) si besoin).

Exemple de script :

curl -v -X POST -H "Accept: application/json" -H "Authorization: Bearer 1|r5FyY51ezlIWELsKbfwbPfM9i7vVLVFoiEVbRmef1" -F "file=@./build.zip" https://hostme.space/api/websites/genuka-template/deploy_on_push

Pour cet exemple, je le rentre directement dans ma console sous VS Code :

🎉 Et hop !! Votre déploiement a été fait. C'est simple et rapide.

Comment se passent les mises à jour ?

Une fois le premier déploiement terminé, vous vous demandez certainement comment se font les mises à jours ?

Première méthode : C'est toujours aussi simple. Si vous avez optez pour la première méthode (c'est à dire, utiliser l'interface), vous devez alors vous rendre dans la page de gestion de vos sites web : https://hostme.space/websites sur cette page, vous aurez alors la liste de vos sites et vous avez alors un menu d'actions où vous pouvez (Activer/Désactiver, modifier, archiver ou supprimer un de vos sites).

Note : S'il s'agissait de votre première inscription/connexion, vous devrez alors avoir reçu un email avec un mot de passe temporaire (n'oubliez pas de vérifier les spams) vous invitant à vous connecter.

Pour mettre à jour votre site, vous tout d'abord désactiver la version actuellement en ligne, ensuite, cliquer sur le bouton "Edit" pour déposer la nouvelle version. Ensuite revenir sur le menu d'actions et "Activer" pour avoir les récentes modifications.

Seconde méthode

Si vous avez opté pour la première méthode (c'est à dire, utiliser l'invite de commande), il vous suffira de répéter les étapes de déploiement pour que la nouvelle version soit en ligne.

Conclusion

Nous parvenons au terme de notre tutoriel. Vous êtes désormais capable de déployer votre application codée en React.js en moins de 5 minutes, grâce à la solution Hostme.

Si vous souhaitez en savoir plus sur Hostme, nous avons rédigé un article sur comment fonctionne Hostme.

New project ?

Easily host your website with Hostme. Want to know more about how it works ?

Get in touch