1
00:00:01,210 --> 00:00:02,310
‫Conférencier :

2
00:00:02,310 --> 00:00:05,453
‫Voyons maintenant comment servir des fichiers statiques avec Express.

3
00:00:06,960 --> 00:00:10,060
‫Maintenant, qu'est-ce que je veux dire réellement avec les fichiers statiques ?

4
00:00:10,060 --> 00:00:13,710
‫Eh bien, ce sont les fichiers qui se trouvent dans notre système de fichiers auxquels

5
00:00:13,710 --> 00:00:16,810
‫nous ne pouvons actuellement pas accéder en utilisant toutes les routes.

6
00:00:16,810 --> 00:00:20,160
‫Ainsi, par exemple, nous avons cette vue d'ensemble. html ici

7
00:00:20,160 --> 00:00:21,850
‫dans notre dossier public.

8
00:00:21,850 --> 00:00:25,000
‫Mais pour le moment, il n'y a aucun moyen d'y accéder à

9
00:00:25,000 --> 00:00:26,700
‫l'aide d'un navigateur, n'est-ce pas ?

10
00:00:26,700 --> 00:00:29,630
‫Et idem pour ces fichiers images que nous avons

11
00:00:29,630 --> 00:00:32,500
‫ici, ou les fichiers CSS ou Javascript.

12
00:00:32,500 --> 00:00:34,770
‫Alors laissez-moi vous montrer cela, et

13
00:00:34,770 --> 00:00:37,373
‫laissez-moi réellement utiliser le navigateur cette fois.

14
00:00:38,470 --> 00:00:41,060
‫Pour l'instant, je copie cette URL ici juste

15
00:00:41,060 --> 00:00:42,700
‫pour vous montrer que

16
00:00:42,700 --> 00:00:45,110
‫ça va fonctionner, évidemment aussi dans le navigateur.

17
00:00:45,110 --> 00:00:48,210
‫D'accord, c'est donc notre résultat non formaté ici, à partir

18
00:00:48,210 --> 00:00:49,460
‫du même itinéraire.

19
00:00:49,460 --> 00:00:52,716
‫Mais disons que nous voulons réellement accéder au fichier HTML

20
00:00:52,716 --> 00:00:54,570
‫dont je viens de parler.

21
00:00:54,570 --> 00:00:56,700
‫Nous pouvons donc, bien sûr, ne pas

22
00:00:57,770 --> 00:00:59,943
‫simplement écrire en public et ensuite, par exemple,

23
00:01:01,730 --> 00:01:03,670
‫en vue d'ensemble. html, non ?

24
00:01:03,670 --> 00:01:06,197
‫Il n'y a aucun moyen d'y accéder pour le moment.

25
00:01:06,197 --> 00:01:09,500
‫Et c'est simplement parce que nous n'avons défini aucune route

26
00:01:09,500 --> 00:01:11,850
‫pour cette URL, n'est-ce pas ?

27
00:01:11,850 --> 00:01:16,333
‫Nous n'avons aucun gestionnaire associé à cette route.

28
00:01:17,450 --> 00:01:19,780
‫Et donc, si nous voulons réellement accéder à quelque

29
00:01:19,780 --> 00:01:21,460
‫chose à partir de notre

30
00:01:21,460 --> 00:01:24,043
‫système de fichiers, nous devons utiliser un middleware Express intégré.

31
00:01:25,740 --> 00:01:28,120
‫Alors laissez-moi maintenant vous montrer comment nous pouvons le faire.

32
00:01:28,120 --> 00:01:31,603
‫Par exemple, après celui-ci.

33
00:01:34,190 --> 00:01:38,110
‫Maintenant, dans cette section, nous ne parlons en fait que d'une API, nous n'avons

34
00:01:38,110 --> 00:01:41,140
‫donc pas besoin de servir des fichiers statiques comme des

35
00:01:41,140 --> 00:01:44,660
‫images ou du HTML, donc ce que je viens de vous montrer.

36
00:01:44,660 --> 00:01:46,590
‫Mais comme cette section est une

37
00:01:46,590 --> 00:01:48,350
‫introduction à Express en

38
00:01:48,350 --> 00:01:52,253
‫général, je voulais aussi vous montrer rapidement ce contenu quand même.

39
00:01:53,330 --> 00:01:56,360
‫Donc, comme je le disais, tout ce que nous

40
00:01:56,360 --> 00:01:59,380
‫avons à faire est d'utiliser un simple middleware intégré

41
00:01:59,380 --> 00:02:01,090
‫qui fonctionne comme ceci.

42
00:02:01,090 --> 00:02:05,160
‫Express dot static, parce que nous voulons servir des fichiers statiques, c'est

43
00:02:05,160 --> 00:02:07,500
‫donc un nom évident pour cela.

44
00:02:07,500 --> 00:02:10,170
‫Et donc ici, nous passons le répertoire à partir

45
00:02:10,170 --> 00:02:12,490
‫duquel nous voulons servir des fichiers statiques.

46
00:02:12,490 --> 00:02:15,200
‫Et dans ce cas, je vais utiliser le répertoire public.

47
00:02:15,200 --> 00:02:18,910
‫Donc ce dossier là où nous avons ces fichiers HTML, d'accord ?

48
00:02:18,910 --> 00:02:21,490
‫Et en fait, utilisons une

49
00:02:21,490 --> 00:02:26,490
‫chaîne de modèle ici pour que je puisse continuer et

50
00:02:26,520 --> 00:02:30,470
‫utiliser la variable dirname, puis slash et public.

51
00:02:30,470 --> 00:02:33,214
‫Sauvegardez-le et revenez au navigateur.

52
00:02:33,214 --> 00:02:37,130
‫Ensuite, nous pourrons ouvrir cet aperçu. html.

53
00:02:37,130 --> 00:02:40,200
‫Maintenant, cela ne fonctionnera pas dans cette URL ici.

54
00:02:40,200 --> 00:02:42,540
‫En fait, ça doit être comme ça.

55
00:02:42,540 --> 00:02:46,290
‫Donc sans le public, juste /vue d'ensemble. html.

56
00:02:46,290 --> 00:02:48,650
‫Voyons donc, et cela fonctionne réellement.

57
00:02:48,650 --> 00:02:49,483
‫D'accord.

58
00:02:49,483 --> 00:02:50,430
‫Maintenant, pourquoi est-ce?

59
00:02:50,430 --> 00:02:53,700
‫Pourquoi n'avons-nous pas besoin du dossier public ici dans l'URL ?

60
00:02:53,700 --> 00:02:56,650
‫Eh bien, tout simplement parce que lorsque nous ouvrons une

61
00:02:56,650 --> 00:02:58,780
‫URL qu'elle ne peut trouver dans aucune

62
00:02:58,780 --> 00:03:02,480
‫de nos routes, elle cherchera alors dans ce dossier public que nous avons défini.

63
00:03:02,480 --> 00:03:05,620
‫Et il définit ce dossier à la racine.

64
00:03:05,620 --> 00:03:08,210
‫Bon, supposons que la racine soit maintenant

65
00:03:08,210 --> 00:03:09,730
‫notre dossier public.

66
00:03:09,730 --> 00:03:12,740
‫Donc ceci ici, et puis la vue d'ensemble est là-dedans.

67
00:03:12,740 --> 00:03:15,003
‫Et c'est pourquoi nous y avons accédé.

68
00:03:16,020 --> 00:03:18,530
‫Donc là-dedans, nous avons aussi des images, par exemple.

69
00:03:18,530 --> 00:03:23,530
‫Disons que nous voulons ouvrir l'image, puis cette épingle ici.

70
00:03:23,640 --> 00:03:25,053
‫Et nous pouvons le faire.

71
00:03:26,980 --> 00:03:27,853
‫Alors

72
00:03:29,620 --> 00:03:33,200
‫image, épingle png, et c'est parti.

73
00:03:33,200 --> 00:03:34,490
‫Voici l'image.

74
00:03:34,490 --> 00:03:38,830
‫Maintenant, ce que nous ne pouvons pas faire, c'est ceci, car ce n'est pas un fichier.

75
00:03:38,830 --> 00:03:41,060
‫Cela ressemble à un itinéraire régulier,

76
00:03:41,060 --> 00:03:44,960
‫et Express essaie donc en fait de trouver un gestionnaire d'itinéraire pour

77
00:03:44,960 --> 00:03:47,070
‫celui-ci, ce qu'il ne peut pas

78
00:03:47,070 --> 00:03:49,100
‫car vous n'avez rien défini.

79
00:03:49,100 --> 00:03:49,933
‫D'accord?

80
00:03:49,933 --> 00:03:52,440
‫Donc, vraiment, cela ne fonctionne que pour les fichiers statiques.

81
00:03:52,440 --> 00:03:56,330
‫Auquel cas, encore une fois, il n'entrera pas dans une nouvelle route, mais

82
00:03:56,330 --> 00:03:58,790
‫servira simplement ce fichier que nous avons spécifié

83
00:03:58,790 --> 00:04:00,280
‫à partir du dossier

84
00:04:00,280 --> 00:04:04,043
‫public, ou dans le dossier que nous avons spécifié ici dans ce middleware.

85
00:04:05,420 --> 00:04:09,480
‫Maintenant, jetez un œil à la console ici et voyez toutes les demandes

86
00:04:09,480 --> 00:04:12,660
‫qui ont été réellement effectuées lorsque nous ouvrons cette page.

87
00:04:12,660 --> 00:04:15,690
‫Éclaircissons maintenant ceci ici juste pour que nous voyions toutes les demandes

88
00:04:15,690 --> 00:04:18,090
‫qui viennent en fait de cette page d'aperçu.

89
00:04:19,090 --> 00:04:23,870
‫Alors écrivons à nouveau la vue d'ensemble. html ici.

90
00:04:23,870 --> 00:04:25,696
‫Et ces images ici sont

91
00:04:25,696 --> 00:04:28,810
‫cassées et c'est parce que ce code html n'est pas censé

92
00:04:28,810 --> 00:04:30,720
‫être servi comme ça, d'accord ?

93
00:04:30,720 --> 00:04:32,320
‫Je l'utilise juste maintenant ici

94
00:04:32,320 --> 00:04:34,223
‫pour que nous ayons un retour visuel.

95
00:04:35,271 --> 00:04:38,423
‫Je ne suis pas du tout intéressé par le contenu ici.

96
00:04:39,980 --> 00:04:42,800
‫Jetez maintenant un œil à toutes les demandes qui ont

97
00:04:42,800 --> 00:04:44,950
‫été effectuées pour tous les actifs.

98
00:04:44,950 --> 00:04:46,580
‫Donc, comme je l'ai

99
00:04:46,580 --> 00:04:49,600
‫dit au début, pour chaque élément faisant partie du site

100
00:04:49,600 --> 00:04:52,360
‫Web, notre serveur reçoit en fait une demande distincte.

101
00:04:52,360 --> 00:04:55,070
‫Et vous voyez ici que la plupart d'entre eux obtiennent ce 404.

102
00:04:55,070 --> 00:04:59,260
‫C'est pourquoi les liens sont alors rompus sur la page Web, eh bien tout simplement

103
00:04:59,260 --> 00:05:02,270
‫parce qu'Express ne peut pas les trouver dans ce dossier.

104
00:05:02,270 --> 00:05:04,090
‫Mais encore une fois, ce n'est pas le sujet ici.

105
00:05:04,090 --> 00:05:05,650
‫Ce que je voulais juste

106
00:05:05,650 --> 00:05:07,496
‫vous montrer, c'est comment nous pouvons

107
00:05:07,496 --> 00:05:10,806
‫servir des fichiers statiques à partir d'un dossier et non d'une route.

108
00:05:10,806 --> 00:05:11,950
‫D'accord.

109
00:05:11,950 --> 00:05:15,840
‫Voilà qui conclut l'introduction de base à Express.

110
00:05:15,840 --> 00:05:17,300
‫Dans les deux prochaines

111
00:05:17,300 --> 00:05:19,266
‫vidéos, nous parlerons de ce qu'on appelle

112
00:05:19,266 --> 00:05:22,573
‫les variables d'environnement et nous configurerons également ESlint en code VS oral.