1
00:00:01,210 --> 00:00:02,310
‫Palestrante: Agora

2
00:00:02,310 --> 00:00:05,453
‫vamos aprender como servir arquivos estáticos com o Express.

3
00:00:06,960 --> 00:00:10,060
‫Agora, o que eu realmente quero dizer com arquivos estáticos?

4
00:00:10,060 --> 00:00:13,710
‫Bem, são os arquivos que estão em nosso sistema de arquivos

5
00:00:13,710 --> 00:00:16,810
‫que atualmente não podemos acessar usando todas as rotas.

6
00:00:16,810 --> 00:00:20,160
‫Então, por exemplo, temos essa visão geral. arquivo html aqui

7
00:00:20,160 --> 00:00:21,850
‫em nossa pasta pública.

8
00:00:21,850 --> 00:00:25,000
‫Mas no momento não temos como acessar isso

9
00:00:25,000 --> 00:00:26,700
‫usando um navegador, certo?

10
00:00:26,700 --> 00:00:29,630
‫E o mesmo para esses arquivos de imagem que

11
00:00:29,630 --> 00:00:32,500
‫temos aqui, ou os arquivos CSS ou Javascript.

12
00:00:32,500 --> 00:00:34,770
‫Então, deixe-me mostrar isso a você,

13
00:00:34,770 --> 00:00:37,373
‫e deixe-me usar o navegador dessa vez.

14
00:00:38,470 --> 00:00:41,060
‫Por enquanto, estou copiando essa URL aqui

15
00:00:41,060 --> 00:00:42,700
‫apenas para mostrar que

16
00:00:42,700 --> 00:00:45,110
‫vai funcionar, obviamente também no navegador.

17
00:00:45,110 --> 00:00:48,210
‫Ok, então este é nosso resultado não formatado aqui,

18
00:00:48,210 --> 00:00:49,460
‫da mesma rota.

19
00:00:49,460 --> 00:00:52,716
‫Mas digamos que realmente desejamos acessar aquele arquivo HTML

20
00:00:52,716 --> 00:00:54,570
‫de que acabei de falar.

21
00:00:54,570 --> 00:00:56,700
‫Portanto, podemos, é claro, não apenas

22
00:00:57,770 --> 00:00:59,943
‫escrever publicamente e, por exemplo, uma

23
00:01:01,730 --> 00:01:03,670
‫visão geral. html, certo?

24
00:01:03,670 --> 00:01:06,197
‫Não há como acessar isso agora.

25
00:01:06,197 --> 00:01:09,500
‫E isso simplesmente porque não definimos nenhuma rota

26
00:01:09,500 --> 00:01:11,850
‫para esta URL, certo?

27
00:01:11,850 --> 00:01:16,333
‫Não temos nenhum manipulador associado a esta rota.

28
00:01:17,450 --> 00:01:19,780
‫E assim, se realmente quisermos acessar

29
00:01:19,780 --> 00:01:21,460
‫algo de nosso sistema

30
00:01:21,460 --> 00:01:24,043
‫de arquivos, precisamos usar um middleware Express integrado.

31
00:01:25,740 --> 00:01:28,120
‫Deixe-me mostrar como podemos fazer isso.

32
00:01:28,120 --> 00:01:31,603
‫Por exemplo, depois deste.

33
00:01:34,190 --> 00:01:38,110
‫Agora, nesta seção, estamos falando apenas sobre uma API, então não

34
00:01:38,110 --> 00:01:41,140
‫precisamos servir arquivos estáticos como imagens ou

35
00:01:41,140 --> 00:01:44,660
‫HTML, então o que acabei de mostrar a vocês.

36
00:01:44,660 --> 00:01:46,590
‫Mas, como esta seção é

37
00:01:46,590 --> 00:01:48,350
‫uma introdução ao Express

38
00:01:48,350 --> 00:01:52,253
‫em geral, também gostaria de mostrar rapidamente esse conteúdo para você.

39
00:01:53,330 --> 00:01:56,360
‫Então, como eu estava dizendo, tudo o que

40
00:01:56,360 --> 00:01:59,380
‫precisamos fazer é usar um middleware integrado simples

41
00:01:59,380 --> 00:02:01,090
‫que funcione assim.

42
00:02:01,090 --> 00:02:05,160
‫Expresse dot static, porque queremos servir arquivos estáticos, então este é

43
00:02:05,160 --> 00:02:07,500
‫um nome óbvio para isso.

44
00:02:07,500 --> 00:02:10,170
‫E aqui passamos o diretório do qual

45
00:02:10,170 --> 00:02:12,490
‫queremos servir os arquivos estáticos.

46
00:02:12,490 --> 00:02:15,200
‫E, neste caso, vou usar o diretório público.

47
00:02:15,200 --> 00:02:18,910
‫Então, esta pasta aqui onde temos esses arquivos HTML, ok?

48
00:02:18,910 --> 00:02:21,490
‫E, na verdade, vamos usar

49
00:02:21,490 --> 00:02:26,490
‫uma string de modelo aqui para que eu possa seguir em frente

50
00:02:26,520 --> 00:02:30,470
‫e usar a variável dirname, depois barra e public.

51
00:02:30,470 --> 00:02:33,214
‫Salve-o e volte para o navegador.

52
00:02:33,214 --> 00:02:37,130
‫Então poderemos abrir esta visão geral. html.

53
00:02:37,130 --> 00:02:40,200
‫Agora não vai funcionar neste URL aqui.

54
00:02:40,200 --> 00:02:42,540
‫Na verdade, tem que ser assim.

55
00:02:42,540 --> 00:02:46,290
‫Portanto, sem o público, basta / visão geral. html.

56
00:02:46,290 --> 00:02:48,650
‫Então, vamos ver, e realmente funciona.

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

58
00:02:49,483 --> 00:02:50,430
‫Agora, por que isso?

59
00:02:50,430 --> 00:02:53,700
‫Por que não precisamos da pasta pública aqui na URL?

60
00:02:53,700 --> 00:02:56,650
‫Bem, simplesmente porque quando abrimos uma URL que ele

61
00:02:56,650 --> 00:02:58,780
‫não consegue encontrar em nenhuma

62
00:02:58,780 --> 00:03:02,480
‫de nossas rotas, ele irá procurar naquela pasta pública que definimos.

63
00:03:02,480 --> 00:03:05,620
‫E isso define essa pasta para a raiz.

64
00:03:05,620 --> 00:03:08,210
‫Ok, então vamos fingir que a raiz agora

65
00:03:08,210 --> 00:03:09,730
‫é nossa pasta pública.

66
00:03:09,730 --> 00:03:12,740
‫Então, isso aqui, e a visão geral está aí.

67
00:03:12,740 --> 00:03:15,003
‫E é por isso que temos acesso a ele.

68
00:03:16,020 --> 00:03:18,530
‫Então lá também temos imagens, por exemplo.

69
00:03:18,530 --> 00:03:23,530
‫Digamos que queremos abrir a imagem e este pino aqui.

70
00:03:23,640 --> 00:03:25,053
‫E podemos fazer isso.

71
00:03:26,980 --> 00:03:27,853
‫Então,

72
00:03:29,620 --> 00:03:33,200
‫imagem, pin png, e então vamos lá.

73
00:03:33,200 --> 00:03:34,490
‫Aqui está a imagem.

74
00:03:34,490 --> 00:03:38,830
‫Agora, o que não podemos fazer é isso, porque isso não é um arquivo.

75
00:03:38,830 --> 00:03:41,060
‫Esta se parece com uma rota normal

76
00:03:41,060 --> 00:03:44,960
‫e, portanto, o Express realmente tenta encontrar um manipulador de rota para

77
00:03:44,960 --> 00:03:47,070
‫esta, o que não é possível

78
00:03:47,070 --> 00:03:49,100
‫porque você não definiu nada.

79
00:03:49,100 --> 00:03:49,933
‫Tudo bem?

80
00:03:49,933 --> 00:03:52,440
‫Então, realmente funciona para arquivos estáticos.

81
00:03:52,440 --> 00:03:56,330
‫Nesse caso, novamente, não seguirá por uma nova rota, mas

82
00:03:56,330 --> 00:03:58,790
‫simplesmente servirá aquele arquivo que

83
00:03:58,790 --> 00:04:00,280
‫especificamos na pasta

84
00:04:00,280 --> 00:04:04,043
‫pública ou na pasta que especificamos aqui neste middleware.

85
00:04:05,420 --> 00:04:09,480
‫Agora dê uma olhada no console aqui e veja todas as solicitações

86
00:04:09,480 --> 00:04:12,660
‫que foram realmente feitas quando abrimos essa página.

87
00:04:12,660 --> 00:04:15,690
‫Agora vamos esclarecer isso aqui apenas para ver todas as solicitações

88
00:04:15,690 --> 00:04:18,090
‫que realmente vêm dessa página de visão geral.

89
00:04:19,090 --> 00:04:23,870
‫Então, vamos escrever novamente uma visão geral. html aqui.

90
00:04:23,870 --> 00:04:25,696
‫E essas imagens aqui

91
00:04:25,696 --> 00:04:28,810
‫estão quebradas e isso é porque esse html não

92
00:04:28,810 --> 00:04:30,720
‫deveria ser servido assim, certo?

93
00:04:30,720 --> 00:04:32,320
‫Estou apenas usando agora

94
00:04:32,320 --> 00:04:34,223
‫aqui para obtermos algum feedback visual.

95
00:04:35,271 --> 00:04:38,423
‫Não estou interessado no conteúdo aqui.

96
00:04:39,980 --> 00:04:42,800
‫Agora, basta dar uma olhada em todas as

97
00:04:42,800 --> 00:04:44,950
‫solicitações feitas para todos os ativos.

98
00:04:44,950 --> 00:04:46,580
‫Como eu disse no

99
00:04:46,580 --> 00:04:49,600
‫início, para cada peça que faz parte do

100
00:04:49,600 --> 00:04:52,360
‫site, nosso servidor recebe uma solicitação separada.

101
00:04:52,360 --> 00:04:55,070
‫E você vê aqui que a maioria deles recebe este 404.

102
00:04:55,070 --> 00:04:59,260
‫É por isso que os links são quebrados na página da web, simplesmente

103
00:04:59,260 --> 00:05:02,270
‫porque o Express não pode encontrá-los nesta pasta.

104
00:05:02,270 --> 00:05:04,090
‫Mas, novamente, esse não é o ponto aqui.

105
00:05:04,090 --> 00:05:05,650
‫O que eu só queria

106
00:05:05,650 --> 00:05:07,496
‫mostrar a vocês é como podemos

107
00:05:07,496 --> 00:05:10,806
‫servir arquivos estáticos de uma pasta e não de uma rota.

108
00:05:10,806 --> 00:05:11,950
‫Tudo bem.

109
00:05:11,950 --> 00:05:15,840
‫E assim encerramos a introdução básica ao Express.

110
00:05:15,840 --> 00:05:17,300
‫Nos próximos dois vídeos,

111
00:05:17,300 --> 00:05:19,266
‫falaremos sobre algo chamado de variáveis

112
00:05:19,266 --> 00:05:22,573
‫de ambiente e também configuraremos o ESlint no código VS oral.