‫Conférencier :
‫Voyons maintenant comment servir des fichiers statiques avec Express.
‫Maintenant, qu'est-ce que je veux dire réellement avec les fichiers statiques ?
‫Eh bien, ce sont les fichiers qui se trouvent dans notre système de fichiers auxquels
‫nous ne pouvons actuellement pas accéder en utilisant toutes les routes.
‫Ainsi, par exemple, nous avons cette vue d'ensemble. html ici
‫dans notre dossier public.
‫Mais pour le moment, il n'y a aucun moyen d'y accéder à
‫l'aide d'un navigateur, n'est-ce pas ?
‫Et idem pour ces fichiers images que nous avons
‫ici, ou les fichiers CSS ou Javascript.
‫Alors laissez-moi vous montrer cela, et
‫laissez-moi réellement utiliser le navigateur cette fois.
‫Pour l'instant, je copie cette URL ici juste
‫pour vous montrer que
‫ça va fonctionner, évidemment aussi dans le navigateur.
‫D'accord, c'est donc notre résultat non formaté ici, à partir
‫du même itinéraire.
‫Mais disons que nous voulons réellement accéder au fichier HTML
‫dont je viens de parler.
‫Nous pouvons donc, bien sûr, ne pas
‫simplement écrire en public et ensuite, par exemple,
‫en vue d'ensemble. html, non ?
‫Il n'y a aucun moyen d'y accéder pour le moment.
‫Et c'est simplement parce que nous n'avons défini aucune route
‫pour cette URL, n'est-ce pas ?
‫Nous n'avons aucun gestionnaire associé à cette route.
‫Et donc, si nous voulons réellement accéder à quelque
‫chose à partir de notre
‫système de fichiers, nous devons utiliser un middleware Express intégré.
‫Alors laissez-moi maintenant vous montrer comment nous pouvons le faire.
‫Par exemple, après celui-ci.
‫Maintenant, dans cette section, nous ne parlons en fait que d'une API, nous n'avons
‫donc pas besoin de servir des fichiers statiques comme des
‫images ou du HTML, donc ce que je viens de vous montrer.
‫Mais comme cette section est une
‫introduction à Express en
‫général, je voulais aussi vous montrer rapidement ce contenu quand même.
‫Donc, comme je le disais, tout ce que nous
‫avons à faire est d'utiliser un simple middleware intégré
‫qui fonctionne comme ceci.
‫Express dot static, parce que nous voulons servir des fichiers statiques, c'est
‫donc un nom évident pour cela.
‫Et donc ici, nous passons le répertoire à partir
‫duquel nous voulons servir des fichiers statiques.
‫Et dans ce cas, je vais utiliser le répertoire public.
‫Donc ce dossier là où nous avons ces fichiers HTML, d'accord ?
‫Et en fait, utilisons une
‫chaîne de modèle ici pour que je puisse continuer et
‫utiliser la variable dirname, puis slash et public.
‫Sauvegardez-le et revenez au navigateur.
‫Ensuite, nous pourrons ouvrir cet aperçu. html.
‫Maintenant, cela ne fonctionnera pas dans cette URL ici.
‫En fait, ça doit être comme ça.
‫Donc sans le public, juste /vue d'ensemble. html.
‫Voyons donc, et cela fonctionne réellement.
‫D'accord.
‫Maintenant, pourquoi est-ce?
‫Pourquoi n'avons-nous pas besoin du dossier public ici dans l'URL ?
‫Eh bien, tout simplement parce que lorsque nous ouvrons une
‫URL qu'elle ne peut trouver dans aucune
‫de nos routes, elle cherchera alors dans ce dossier public que nous avons défini.
‫Et il définit ce dossier à la racine.
‫Bon, supposons que la racine soit maintenant
‫notre dossier public.
‫Donc ceci ici, et puis la vue d'ensemble est là-dedans.
‫Et c'est pourquoi nous y avons accédé.
‫Donc là-dedans, nous avons aussi des images, par exemple.
‫Disons que nous voulons ouvrir l'image, puis cette épingle ici.
‫Et nous pouvons le faire.
‫Alors
‫image, épingle png, et c'est parti.
‫Voici l'image.
‫Maintenant, ce que nous ne pouvons pas faire, c'est ceci, car ce n'est pas un fichier.
‫Cela ressemble à un itinéraire régulier,
‫et Express essaie donc en fait de trouver un gestionnaire d'itinéraire pour
‫celui-ci, ce qu'il ne peut pas
‫car vous n'avez rien défini.
‫D'accord?
‫Donc, vraiment, cela ne fonctionne que pour les fichiers statiques.
‫Auquel cas, encore une fois, il n'entrera pas dans une nouvelle route, mais
‫servira simplement ce fichier que nous avons spécifié
‫à partir du dossier
‫public, ou dans le dossier que nous avons spécifié ici dans ce middleware.
‫Maintenant, jetez un œil à la console ici et voyez toutes les demandes
‫qui ont été réellement effectuées lorsque nous ouvrons cette page.
‫Éclaircissons maintenant ceci ici juste pour que nous voyions toutes les demandes
‫qui viennent en fait de cette page d'aperçu.
‫Alors écrivons à nouveau la vue d'ensemble. html ici.
‫Et ces images ici sont
‫cassées et c'est parce que ce code html n'est pas censé
‫être servi comme ça, d'accord ?
‫Je l'utilise juste maintenant ici
‫pour que nous ayons un retour visuel.
‫Je ne suis pas du tout intéressé par le contenu ici.
‫Jetez maintenant un œil à toutes les demandes qui ont
‫été effectuées pour tous les actifs.
‫Donc, comme je l'ai
‫dit au début, pour chaque élément faisant partie du site
‫Web, notre serveur reçoit en fait une demande distincte.
‫Et vous voyez ici que la plupart d'entre eux obtiennent ce 404.
‫C'est pourquoi les liens sont alors rompus sur la page Web, eh bien tout simplement
‫parce qu'Express ne peut pas les trouver dans ce dossier.
‫Mais encore une fois, ce n'est pas le sujet ici.
‫Ce que je voulais juste
‫vous montrer, c'est comment nous pouvons
‫servir des fichiers statiques à partir d'un dossier et non d'une route.
‫D'accord.
‫Voilà qui conclut l'introduction de base à Express.
‫Dans les deux prochaines
‫vidéos, nous parlerons de ce qu'on appelle
‫les variables d'environnement et nous configurerons également ESlint en code VS oral.