3. Créer un livrable pour notre application

Avant de passer au déploiement, nous allons optimiser notre application locale pour la production.

Il faut vérifier que nous n’avons pas d’erreurs de syntaxe dans notre code, il faut minimiser et compresser nos fichiers, supprimer les dépendances inutiles en production comme TypeScript, car le navigateur ne peut interpréter que le code JavaScript, faire tourner notre application comme si nous étions en production pour s’assurer que tout fonctionne correctement, etc.

Heu, mais attend on n’en a pour combien de jours encore ? 🤯

Et bien j’ai une excellente nouvelle pour vous, tout cela peut se faire en une seule ligne de commande grâce à React !

Lancez la commande suivante à la racine de votre projet :

npm run build

Ensuite, laissez tourner la commande, n’interrompez pas le script !

React s’occupe pour nous de créer un livrable pour notre application.

Ensuite, retournez dans l’arborescence de votre projet. Un nouveau dossier build devrait avoir fait son apparition :

Un nouveau dossier « build » a fait son apparition.

Ce dossier a été crée par React, et il contient le « livrable » de notre application. C’est le contenu de ce dossier que nous allons déployer en production, car il s’agit d’une version ultra optimisée de notre application. Tout y est minifié et compressé au maximum, afin d’offrir la meilleure expérience possible à nos utilisateurs.

Cependant, avant de déployer, nous allons faire une dernière vérification, pour être sur que ce que React a généré fonctionnera en production. Pour cela, installer un petit serveur local sur notre machine :

npm install -g serve

Ensuite, on va démarrer notre application avec le contenu du dossier build uniquement :

serve -s build

Un message similaire devrait s’afficher dans la console de votre terminal :

Notre application de production tourne… en local !

Rendez-vous dans votre navigateur pour tester votre application comme en production à l’adresse : http://localhost:5000. Vérifiez que tout fonctionne correctement. Comme il s’agit d’une version de production de notre application, nous n’utilisons pas notre API Rest mais nos promesses que nous avons ajoutées précédemment.

Notre application peut maintenant être déployée ! 🚀