Dans le cours : React : Créer et héberger un site full-stack

Relancer le serveur automatiquement - Tutoriel React.js

Dans le cours : React : Créer et héberger un site full-stack

Démarrer mon mois d’essai gratuit Acheter pour mon équipe

Relancer le serveur automatiquement

“

On poursuit avec la configuration du serveur et on va permettre à celui-ci d'être relancé automatiquement une fois qu'un changement est détecté dans le code source. Donc, pour ça, on va utiliser l'utilitaire nodemon. Donc, on va installer cet utilitaire avec la ligne de commande npm install nodemon et une fois que ce sera fait, on pourra utiliser nodemon index.js pour lancer automatiquement le serveur une seule fois, sans avoir à arrêter et relancer manuellement le serveur une fois qu'il y a un changement dans le code source. Ce sera détecté dans tout fichier JavaScript, y compris le point d'entrée index.js. On retourne dans le code éditeur pour voir un exemple. On va utiliser cette méthode de routage qui permettra de retourner des ressources, donc lorsque l'on va naviguer vers un URL, donc on va préciser tout d'abord la route, donc cette méthode va prendre deux paramètres. Ensuite, on va retourner dans la fonction de rappel, deux objets, donc en premier la requête, donc pour ici, qui ne sera pas nécessaire et ensuite, il va nous retourner une réponse et donc, on pourra lire « Hello Express » pour ce premier exemple, voilà. On va lancer notre serveur. Une fois que c'est lancé, on pourra naviguer vers localhost:4000 et on pourra lire « Hello Express ». Maintenant, je vais rajouter un changement. Je vais sauvegarder et vous allez voir que lorsque je rafraîchis ma page, je n'aurai pas de changement qui sera reflété suite au changement que j'aurai appliqué côté code source. Donc, pour éviter cela, d'avoir à relancer, donc, je vais arrêter mon serveur et le relancer et c'est une fois que j'aurai relancé mon serveur que je pourrai voir le changement que je viens d'appliquer dans mon point d'entrée. Pour éviter à avoir à arrêter et relancer manuellement le serveur, à la place, ce que je vais faire, c'est installer cet utilitaire qui est nodemon et là, vous allez voir que dans le package json, on aura automatiquement ce nouvel utilitaire qui est rajouté dans la liste des dependencies, parfait. Une fois que c'est fait, donc, je vais pouvoir lancer mon serveur, cette fois-ci avec nodemon. Vous allez voir que ça va pas réussir du premier coup. Si c'est le cas pour vous, si la commande n'est pas trouvée, vous allez placer npx avant nodemon et on aura quand même une erreur qui nous indique qu'il ne peut pas appliquer la déclaration import qui n'est pas reconnue nativement pour une application Node. Ce qui se passe, c'est qu'ici, on aura également besoin d'utiliser le compilateur babel. Pour cela, donc, on va retourner dans le package json et donc, pour pouvoir utiliser à la fois nodemon et babel, on va tout d'abord utiliser nodemon, ensuite, on va permettre l'exécution du compilateur, avant même de lancer le serveur avec nodemon. Donc, on va sauvegarder, on va modifier notre script comme ceci : « nodemon --exec babel-node index.js » et on va de nouveau faire npm start. Voilà, donc, cette fois-ci, vous voyez que mon serveur a été lancé avec nodemon et il nous indique qu'il observe les changements dans les fichiers avec extensions JavaScript, etc. Donc, on va pouvoir faire les changements. Si par exemple ici, je modifie, je vais faire un changement, je vais faire Sauvegarder, et automatiquement, il va m'indiquer qu'il redémarre le serveur après qu'il ait détecté un changement dans l'index.js ; parfait, si bien que lorsque je retourne dans le navigateur et que je fais Rafraîchir, je vais pouvoir voir le changement dans le navigateur à la même adresse. Je vais de nouveau faire barre d'exclamation, il va détecter le changement et relancer automatiquement le serveur et de nouveau, je relance et je vais pouvoir voir le changement dans le navigateur à la même adresse.

Table des matières