{"id":520,"date":"2022-05-20T21:50:57","date_gmt":"2022-05-20T19:50:57","guid":{"rendered":"https:\/\/adriel.solutions\/blog\/?p=520"},"modified":"2022-05-20T21:57:35","modified_gmt":"2022-05-20T19:57:35","slug":"comment-eviter-le-downtime-au-rebuild-dune-application-react","status":"publish","type":"post","link":"https:\/\/adriel.solutions\/blog\/comment-eviter-le-downtime-au-rebuild-dune-application-react\/","title":{"rendered":"Comment \u00e9viter le downtime au rebuild d&#8217;une application React ?"},"content":{"rendered":"<p>Si vous avez d\u00e9j\u00e0 travaill\u00e9 un peu avec React, et surtout, que vous avez mis en production vos premi\u00e8res applications, la mise \u00e0 jour de celles-ci n&#8217;a pas d\u00fb \u00eatre de tout repos !<\/p>\n<p>Le plus courant, surtout pour celles et ceux d&#8217;entre vous qui ne sont pas habitu\u00e9s \u00e0 faire du d\u00e9ploiement, est de proc\u00e9der ainsi :<\/p>\n<ul>\n<li>On acc\u00e8de au serveur par SSH.<\/li>\n<li>On se dirige vers le dossier de l&#8217;application React.<\/li>\n<li>On lance\u00a0<em>yarn build\u00a0<\/em>ou\u00a0<em>npm run build<\/em><\/li>\n<\/ul>\n<p>Mais si votre serveur web (Apache, ou Nginx) est param\u00e9tr\u00e9 pour servir le dossier\u00a0<em>build <\/em>de votre application, il va y avoir tout un espace temporel pendant lequel vos visiteurs auront un \u00e9cran blanc, ou une erreur 404.<\/p>\n<p>C&#8217;est normal, car en fait, lors du build, React commence par effacer compl\u00e8tement le dossier <em>build, <\/em>donc il n&#8217;y a plus rien \u00e0 montrer \u00e0 vos visiteurs tant que le nouveau build n&#8217;est pas termin\u00e9.<\/p>\n<p>La solution est simple !<\/p>\n<p>Cr\u00e9ez un dossier\u00a0<em>deployment<\/em>, et dans votre fichier <em>package.json<\/em>, d\u00e9finissez le script suivant :<\/p>\n<div class=\"hcb_wrap\">\n<pre class=\"prism line-numbers lang-javascript\" data-lang=\"JavaScript\"><code><span style=\"background-color: inherit; color: inherit; font-family: inherit; font-size: 1rem;\">{\r\n   \"deploy\": \"react-scripts build &amp;&amp; rm -rf deployment\/* &amp;&amp; mv build\/* deployment\/\"\r\n}<\/span><\/code><\/pre>\n<\/div>\n<p>Vous n&#8217;avez plus qu&#8217;\u00e0 lancer la commande\u00a0<em>yarn deploy\u00a0<\/em>ou\u00a0<em>npm run<\/em> <em>deploy<\/em>, et \u00e0 servir le dossier\u00a0<em>deployment<\/em> au lieu du dossier\u00a0<em>build<\/em>. Vos visiteurs vous remercieront !<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Si vous avez d\u00e9j\u00e0 travaill\u00e9 un peu avec React, et surtout, que vous avez mis en production vos premi\u00e8res applications, la mise \u00e0 jour de celles-ci n&#8217;a pas d\u00fb \u00eatre de tout repos ! Le plus courant, surtout pour celles et ceux d&#8217;entre vous qui ne sont pas habitu\u00e9s \u00e0 faire du d\u00e9ploiement, est de [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"acf":{"adriel_excerpt":""},"_links":{"self":[{"href":"https:\/\/adriel.solutions\/blog\/wp-json\/wp\/v2\/posts\/520"}],"collection":[{"href":"https:\/\/adriel.solutions\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/adriel.solutions\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/adriel.solutions\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/adriel.solutions\/blog\/wp-json\/wp\/v2\/comments?post=520"}],"version-history":[{"count":0,"href":"https:\/\/adriel.solutions\/blog\/wp-json\/wp\/v2\/posts\/520\/revisions"}],"wp:attachment":[{"href":"https:\/\/adriel.solutions\/blog\/wp-json\/wp\/v2\/media?parent=520"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/adriel.solutions\/blog\/wp-json\/wp\/v2\/categories?post=520"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/adriel.solutions\/blog\/wp-json\/wp\/v2\/tags?post=520"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}