1
00:00:01,210 --> 00:00:02,310
‫Docente: Impariamo

2
00:00:02,310 --> 00:00:05,453
‫ora come servire file statici con Express.

3
00:00:06,960 --> 00:00:10,060
‫Ora cosa intendo in realtà con i file statici?

4
00:00:10,060 --> 00:00:13,710
‫Bene, sono i file che si trovano nel nostro file system a

5
00:00:13,710 --> 00:00:16,810
‫cui attualmente non possiamo accedere utilizzando tutte le rotte.

6
00:00:16,810 --> 00:00:20,160
‫Quindi, per esempio, abbiamo questa panoramica. html qui

7
00:00:20,160 --> 00:00:21,850
‫nella nostra cartella pubblica.

8
00:00:21,850 --> 00:00:25,000
‫Ma in questo momento non c'è modo di accedervi

9
00:00:25,000 --> 00:00:26,700
‫utilizzando un browser, giusto?

10
00:00:26,700 --> 00:00:29,630
‫E lo stesso per questi file di immagine che

11
00:00:29,630 --> 00:00:32,500
‫abbiamo qui, oi file CSS o Javascript.

12
00:00:32,500 --> 00:00:34,770
‫Quindi lascia che te lo mostri

13
00:00:34,770 --> 00:00:37,373
‫e questa volta lasciami usare il browser.

14
00:00:38,470 --> 00:00:41,060
‫Per ora copio questo URL qui

15
00:00:41,060 --> 00:00:42,700
‫solo per mostrarvi

16
00:00:42,700 --> 00:00:45,110
‫che funzionerà, ovviamente anche nel browser.

17
00:00:45,110 --> 00:00:48,210
‫Ok, questo è il nostro risultato non formattato qui,

18
00:00:48,210 --> 00:00:49,460
‫dallo stesso percorso.

19
00:00:49,460 --> 00:00:52,716
‫Ma diciamo che in realtà vogliamo accedere a quel file

20
00:00:52,716 --> 00:00:54,570
‫HTML di cui stavo parlando.

21
00:00:54,570 --> 00:00:56,700
‫Quindi possiamo, ovviamente, non solo

22
00:00:57,770 --> 00:00:59,943
‫scrivere pubblico e quindi, ad esempio,

23
00:01:01,730 --> 00:01:03,670
‫una panoramica. html, giusto?

24
00:01:03,670 --> 00:01:06,197
‫Non c'è modo di accedervi adesso.

25
00:01:06,197 --> 00:01:09,500
‫Ed è semplicemente perché non abbiamo definito alcun

26
00:01:09,500 --> 00:01:11,850
‫percorso per questo URL, giusto?

27
00:01:11,850 --> 00:01:16,333
‫Non abbiamo alcun gestore associato a questa rotta.

28
00:01:17,450 --> 00:01:19,780
‫Quindi, se vogliamo effettivamente accedere a

29
00:01:19,780 --> 00:01:21,460
‫qualcosa dal nostro file

30
00:01:21,460 --> 00:01:24,043
‫system, dobbiamo utilizzare un middleware Express integrato.

31
00:01:25,740 --> 00:01:28,120
‫Quindi lascia che ora ti mostri come possiamo farlo.

32
00:01:28,120 --> 00:01:31,603
‫Ad esempio, dopo questo.

33
00:01:34,190 --> 00:01:38,110
‫Ora in questa sezione in realtà stiamo parlando solo di un'API, quindi

34
00:01:38,110 --> 00:01:41,140
‫non abbiamo effettivamente bisogno di servire file statici

35
00:01:41,140 --> 00:01:44,660
‫come immagini o HTML, quindi quello che ti ho appena mostrato.

36
00:01:44,660 --> 00:01:46,590
‫Ma poiché questa sezione

37
00:01:46,590 --> 00:01:48,350
‫è un'introduzione a

38
00:01:48,350 --> 00:01:52,253
‫Express in generale, volevo comunque mostrarti rapidamente questo contenuto.

39
00:01:53,330 --> 00:01:56,360
‫Quindi, come stavo dicendo, tutto ciò che dobbiamo

40
00:01:56,360 --> 00:01:59,380
‫fare è usare un semplice middleware integrato che

41
00:01:59,380 --> 00:02:01,090
‫funzioni in questo modo.

42
00:02:01,090 --> 00:02:05,160
‫Express dot static, perché vogliamo servire file statici, quindi questo è

43
00:02:05,160 --> 00:02:07,500
‫un nome ovvio per questo.

44
00:02:07,500 --> 00:02:10,170
‫E così qui passiamo la directory da

45
00:02:10,170 --> 00:02:12,490
‫cui vogliamo servire i file statici.

46
00:02:12,490 --> 00:02:15,200
‫E in questo caso, userò la directory pubblica.

47
00:02:15,200 --> 00:02:18,910
‫Quindi questa cartella qui dove abbiamo questi file HTML, ok?

48
00:02:18,910 --> 00:02:21,490
‫E in realtà usiamo una

49
00:02:21,490 --> 00:02:26,490
‫stringa modello qui in modo che io possa andare avanti e

50
00:02:26,520 --> 00:02:30,470
‫usare la variabile dirname, quindi slash e public.

51
00:02:30,470 --> 00:02:33,214
‫Salvalo e torna al browser.

52
00:02:33,214 --> 00:02:37,130
‫Quindi saremo in grado di aprire questa panoramica. html.

53
00:02:37,130 --> 00:02:40,200
‫Ora non funzionerà in questo URL qui.

54
00:02:40,200 --> 00:02:42,540
‫In realtà deve essere così.

55
00:02:42,540 --> 00:02:46,290
‫Quindi senza il pubblico, solo /overview. html.

56
00:02:46,290 --> 00:02:48,650
‫Quindi vediamo, e funziona davvero.

57
00:02:48,650 --> 00:02:49,483
‫Va bene.

58
00:02:49,483 --> 00:02:50,430
‫Ora, perché è così?

59
00:02:50,430 --> 00:02:53,700
‫Perché non abbiamo bisogno della cartella pubblica qui nell'URL?

60
00:02:53,700 --> 00:02:56,650
‫Bene, semplicemente perché quando apriamo un URL che non

61
00:02:56,650 --> 00:02:58,780
‫riesce a trovare in nessuno

62
00:02:58,780 --> 00:03:02,480
‫dei nostri percorsi, cercherà in quella cartella pubblica che abbiamo definito.

63
00:03:02,480 --> 00:03:05,620
‫E imposta quella cartella alla radice.

64
00:03:05,620 --> 00:03:08,210
‫Ok, facciamo finta che la radice sia ora

65
00:03:08,210 --> 00:03:09,730
‫la nostra cartella pubblica.

66
00:03:09,730 --> 00:03:12,740
‫Quindi questo qui, e poi la panoramica è lì.

67
00:03:12,740 --> 00:03:15,003
‫Ed è per questo che abbiamo fatto l'accesso ad esso.

68
00:03:16,020 --> 00:03:18,530
‫Quindi lì dentro abbiamo anche delle immagini, per esempio.

69
00:03:18,530 --> 00:03:23,530
‫Diciamo che vogliamo aprire l'immagine e poi questo pin qui.

70
00:03:23,640 --> 00:03:25,053
‫E possiamo farlo.

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

72
00:03:29,620 --> 00:03:33,200
‫immagine, pin png e quindi eccoci qui.

73
00:03:33,200 --> 00:03:34,490
‫Ecco l'immagine.

74
00:03:34,490 --> 00:03:38,830
‫Quello che non possiamo fare è questo, perché questo non è un file.

75
00:03:38,830 --> 00:03:41,060
‫Sembra un percorso normale, quindi Express

76
00:03:41,060 --> 00:03:44,960
‫cerca effettivamente di trovare un gestore di percorso per questo,

77
00:03:44,960 --> 00:03:47,070
‫cosa che non può perché

78
00:03:47,070 --> 00:03:49,100
‫non hai definito nulla.

79
00:03:49,100 --> 00:03:49,933
‫Va bene?

80
00:03:49,933 --> 00:03:52,440
‫Quindi funziona davvero solo per i file statici.

81
00:03:52,440 --> 00:03:56,330
‫In tal caso, di nuovo, non andrà in una nuova rotta,

82
00:03:56,330 --> 00:03:58,790
‫ma servirà semplicemente quel file che abbiamo

83
00:03:58,790 --> 00:04:00,280
‫specificato dalla cartella

84
00:04:00,280 --> 00:04:04,043
‫pubblica o nella cartella che abbiamo specificato qui in questo middleware.

85
00:04:05,420 --> 00:04:09,480
‫Ora dai un'occhiata alla console qui e vedi tutte le richieste che

86
00:04:09,480 --> 00:04:12,660
‫sono state effettivamente fatte quando abbiamo aperto quella pagina.

87
00:04:12,660 --> 00:04:15,690
‫Ora chiariamo questo qui solo così vediamo tutte le richieste che

88
00:04:15,690 --> 00:04:18,090
‫in realtà provengono da quella pagina di panoramica.

89
00:04:19,090 --> 00:04:23,870
‫Quindi scriviamo di nuovo panoramica. html qui.

90
00:04:23,870 --> 00:04:25,696
‫E queste immagini qui

91
00:04:25,696 --> 00:04:28,810
‫sono rotte e questo perché questo HTML non dovrebbe essere

92
00:04:28,810 --> 00:04:30,720
‫servito in questo modo, va bene?

93
00:04:30,720 --> 00:04:32,320
‫Lo sto usando solo ora

94
00:04:32,320 --> 00:04:34,223
‫qui in modo da ottenere un feedback visivo.

95
00:04:35,271 --> 00:04:38,423
‫Non sono affatto interessato al contenuto qui.

96
00:04:39,980 --> 00:04:42,800
‫Ora dai un'occhiata a tutte le richieste che sono

97
00:04:42,800 --> 00:04:44,950
‫state fatte per tutte le risorse.

98
00:04:44,950 --> 00:04:46,580
‫Quindi, come ho detto

99
00:04:46,580 --> 00:04:49,600
‫all'inizio, per ogni pezzo che fa parte del sito

100
00:04:49,600 --> 00:04:52,360
‫Web, il nostro server riceve effettivamente una richiesta separata.

101
00:04:52,360 --> 00:04:55,070
‫E qui vedi che la maggior parte di loro ottiene questo 404.

102
00:04:55,070 --> 00:04:59,260
‫Ecco perché i collegamenti vengono interrotti nella pagina Web, semplicemente perché

103
00:04:59,260 --> 00:05:02,270
‫Express non può trovarli in questa cartella.

104
00:05:02,270 --> 00:05:04,090
‫Ma ancora una volta, non è questo il punto.

105
00:05:04,090 --> 00:05:05,650
‫Quello che volevo solo

106
00:05:05,650 --> 00:05:07,496
‫mostrarti è come possiamo servire

107
00:05:07,496 --> 00:05:10,806
‫file statici da una cartella e non da un percorso.

108
00:05:10,806 --> 00:05:11,950
‫Va bene.

109
00:05:11,950 --> 00:05:15,840
‫E così questo conclude l'introduzione di base a Express.

110
00:05:15,840 --> 00:05:17,300
‫Nei prossimi due

111
00:05:17,300 --> 00:05:19,266
‫video parleremo di qualcosa chiamato variabili

112
00:05:19,266 --> 00:05:22,573
‫d'ambiente e imposteremo anche ESlint in codice VS orale.