6. Combiner plusieurs Middlewares

On a déjà mis en place un Middleware dans notre application. Il s’agit du paquet Morgan. On aimerait maintenant l’utiliser avec un autre Middleware, pour illustrer cette fameuse chaîne de traitement que nous avons vu précédemment.

Comme deuxième Middleware, je vous propose d’ajouter une petite favicon à notre API Rest !

Mais, c’est quoi cette favicon ? Je n’en ai jamais entendu parler il me semble… 🤔

Alors, même si vous ne connaissez pas ce nom-là je suis sûr que vous avez déjà vu une favicon. Regardez plutôt par vous-même :

Il y a de grande chance que vous soyez déjà tombé sur une favicon !

Ce n’est pas bien méchant, il s’agit juste de l’icône qui sera affiché dans l’onglet de votre navigateur, lorsque l’API Rest sera ouverte. L’avantage, c’est que la favicon nous permet d’illustrer parfaitement le fonctionnement des Middlewares, puisqu’il faut bien ajouter la favicon sur chaque réponse de notre API Rest. 😉

Pour commencer, on va installer le Middleware qui sera chargé de gérer la favicon sur toutes les réponses de notre API Rest :

npm install serve-favicon —save

Le nom du paquet que nous devons installer est serve-favicon, et nous l’installons parmi les dépendances globales de notre projet. En effet, nous utiliserons la favicon autant durant la phase de développement qu’en production, une fois notre API Rest terminée.

Puis, il va bien falloir récupérer le fichier représentant la favicon. Le voici :

Vous pouvez récupérer la favicon avec Clic droit > Enregistrer l’image sous…

Ensuite, reprenons notre point d’entrée app.js, afin de combiner le Middleware Morgan et celui de la favicon :

const morgan = require('morgan')
const favicon = require('serve-favicon');
const pokemons = require('./mock-pokemon.js');
const { success } = require('./helper.js');
 
const app = express()
const port = 3000
 
app
.use(favicon(__dirname + '/favicon.ico'))
.use(morgan('dev'))
 
app.get('/', (req, res) => res.send('Hello, Express!'))
 
app.get('/api/pokemons', (req, res) => {
  const message = 'La liste des pokémons a bien été récupérée.'
  res.json(success(message, pokemons))
})
 
app.get('/api/pokemons/:id', (req, res) => {
  const id = parseInt(req.params.id)
  const pokemon = pokemons.find(pokemon => pokemon.id === id)
  const message = 'Un pokémon a bien été trouvé.'
  res.json(success(message, pokemon))
})
 
app.listen(port, () => console.log(`Notre application Node est démarrée sur : http://localhost:${port}`))

Premièrement, nous avons importé le Middleware serve-icon à la ligne 3.

Deuxièmement, nous avons appelé la méthode app.use(), afin d’utiliser le nouveau Middleware serve-icon à la ligne 11. Et… c’est tout !

Concrètement, il suffit d’appeler la méthode use() autant de fois que vous avez de Middlewares à implémenter. On peut ensuite les chaîner les uns à la suite des autres, afin de déterminer un ordre entre eux.

Dans notre cas, nous appelons en premier le Middleware de la favicon, puis celui permettant de logger des messages. Chaque middleware va se renvoyer des données (la requête, la réponse, la fonction suivante à appeler…) après avoir terminé son traitement spécifique.

Et vous pouvez d’ores et déjà admirer votre nouvelle favicon dans le navigateur !

Mais, où est passé l’utilisation de la méthode next ! Comment savoir si un Middleware a terminé ou non ?  🤯

Effectivement, c’est bien vu… où est donc passé la méthode next. En fait, la méthode next est toujours appelée, mais par le Middleware directement. Grosso modo, la dépendance Morgan et serve-favicon s’en occupe en interne, et c’est pour cela que c’est masqué pour nous dans notre code.

Maintenant, vous êtes capables de combiner plusieurs Middlewares entre eux. Et vous pouvez même mélanger des Middleswares « maisons » avec d’autres déjà existants, importés grâce à NPM.

Félicitations, nous venons d’abordé un sacré morceau, et vous avez réussi haut la main !

Il est possible que vous mettiez du temps avant de voir la favicon de votre API Rest s’afficher dans le navigateur. C’est en grande partie dû à la mise en cache de votre navigateur. Essayez de rafraîchir votre navigateur, de vider le cache, ou même d’utiliser un autre navigateur que celui que vous utilisez habituellement. Aussi, pensez à bien relancer la commande qui démarre vôtre API Rest, afin de prendre en compte vos nouveaux changements. Cela peut mettre un peu de temps, mais ça en vaut la peine !

L’ordre d’exécution des Middlewares est extrêmement important. Par exemple, si vous avez un Middleware pour les logs, et un autre pour les erreurs, il faut bien sûr activer les logs en premier. Si on le faisait en dernier, on ne loguerait rien du tout ! Quand vous faites appel aux Middlewares, réfléchissez donc bien à l’ordre, car cela peut impacter fortement le fonctionnement de votre application.