Comment éviter le downtime au rebuild d’une application React ?

Si vous avez déjà travaillé un peu avec React, et surtout, que vous avez mis en production vos premières applications, la mise à jour de celles-ci n’a pas dû être de tout repos !

Le plus courant, surtout pour celles et ceux d’entre vous qui ne sont pas habitués à faire du déploiement, est de procéder ainsi :

  • On accède au serveur par SSH.
  • On se dirige vers le dossier de l’application React.
  • On lance yarn build ou npm run build

Mais si votre serveur web (Apache, ou Nginx) est paramétré pour servir le dossier build de votre application, il va y avoir tout un espace temporel pendant lequel vos visiteurs auront un écran blanc, ou une erreur 404.

C’est normal, car en fait, lors du build, React commence par effacer complètement le dossier build, donc il n’y a plus rien à montrer à vos visiteurs tant que le nouveau build n’est pas terminé.

La solution est simple !

Créez un dossier deployment, et dans votre fichier package.json, définissez le script suivant :

{
   "deploy": "react-scripts build && rm -rf deployment/* && mv build/* deployment/"
}

Vous n’avez plus qu’à lancer la commande yarn deploy ou npm run deploy, et à servir le dossier deployment au lieu du dossier build. Vos visiteurs vous remercieront !