1
00:00:01,210 --> 00:00:02,310
‫Conferencista: Aprendamos

2
00:00:02,310 --> 00:00:05,453
‫ahora a servir archivos estáticos con Express.

3
00:00:06,960 --> 00:00:10,060
‫Ahora, ¿qué quiero decir realmente con archivos estáticos?

4
00:00:10,060 --> 00:00:13,710
‫Bueno, son los archivos que se encuentran en nuestro sistema de archivos a

5
00:00:13,710 --> 00:00:16,810
‫los que actualmente no podemos acceder usando todas las rutas.

6
00:00:16,810 --> 00:00:20,160
‫Entonces, por ejemplo, tenemos esta descripción general. html aquí

7
00:00:20,160 --> 00:00:21,850
‫en nuestra carpeta pública.

8
00:00:21,850 --> 00:00:25,000
‫Pero en este momento no hay forma de que podamos acceder a

9
00:00:25,000 --> 00:00:26,700
‫esto usando un navegador, ¿verdad?

10
00:00:26,700 --> 00:00:29,630
‫Y lo mismo para estos archivos de imagen que

11
00:00:29,630 --> 00:00:32,500
‫tenemos aquí, o los archivos CSS o Javascript.

12
00:00:32,500 --> 00:00:34,770
‫Así que déjame mostrarte eso

13
00:00:34,770 --> 00:00:37,373
‫y déjame usar el navegador esta vez.

14
00:00:38,470 --> 00:00:41,060
‫Por ahora estoy copiando esta URL aquí

15
00:00:41,060 --> 00:00:42,700
‫solo para mostrarte que

16
00:00:42,700 --> 00:00:45,110
‫funcionará, obviamente también en el navegador.

17
00:00:45,110 --> 00:00:48,210
‫Bien, este es nuestro resultado sin formato aquí, de

18
00:00:48,210 --> 00:00:49,460
‫la misma ruta.

19
00:00:49,460 --> 00:00:52,716
‫Pero digamos que en realidad queremos acceder a ese archivo HTML

20
00:00:52,716 --> 00:00:54,570
‫del que acababa de hablar.

21
00:00:54,570 --> 00:00:56,700
‫Por lo tanto, podemos, por supuesto, no solo

22
00:00:57,770 --> 00:00:59,943
‫escribir en público y luego, por ejemplo, en

23
00:01:01,730 --> 00:01:03,670
‫una descripción general. html, ¿verdad?

24
00:01:03,670 --> 00:01:06,197
‫No hay forma de que podamos acceder a esto ahora mismo.

25
00:01:06,197 --> 00:01:09,500
‫Y eso es simplemente porque no definimos ninguna

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

27
00:01:11,850 --> 00:01:16,333
‫No tenemos ningún controlador asociado a esta ruta.

28
00:01:17,450 --> 00:01:19,780
‫Entonces, si realmente queremos acceder a

29
00:01:19,780 --> 00:01:21,460
‫algo desde nuestro sistema

30
00:01:21,460 --> 00:01:24,043
‫de archivos, necesitamos usar un middleware Express integrado.

31
00:01:25,740 --> 00:01:28,120
‫Permítanme ahora mostrarles cómo podemos hacer eso.

32
00:01:28,120 --> 00:01:31,603
‫Por ejemplo, después de este.

33
00:01:34,190 --> 00:01:38,110
‫Ahora, en esta sección, en realidad, solo estamos hablando de una API, por

34
00:01:38,110 --> 00:01:41,140
‫lo que en realidad no necesitamos entregar archivos estáticos

35
00:01:41,140 --> 00:01:44,660
‫como imágenes o HTML, así que lo que acabo de mostrarles.

36
00:01:44,660 --> 00:01:46,590
‫Pero dado que esta sección es

37
00:01:46,590 --> 00:01:48,350
‫una introducción a Express

38
00:01:48,350 --> 00:01:52,253
‫en general, también quería mostrarles rápidamente este contenido de todos modos.

39
00:01:53,330 --> 00:01:56,360
‫Entonces, como estaba diciendo, todo lo que tenemos

40
00:01:56,360 --> 00:01:59,380
‫que hacer es usar un middleware integrado simple

41
00:01:59,380 --> 00:02:01,090
‫que sea así.

42
00:02:01,090 --> 00:02:05,160
‫Express dot static, porque queremos servir archivos estáticos, así que este

43
00:02:05,160 --> 00:02:07,500
‫es un nombre obvio para eso.

44
00:02:07,500 --> 00:02:10,170
‫Y aquí pasamos el directorio desde el

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

46
00:02:12,490 --> 00:02:15,200
‫Y en este caso, usaré el directorio público.

47
00:02:15,200 --> 00:02:18,910
‫Entonces, esta carpeta aquí donde tenemos estos archivos HTML, ¿de acuerdo?

48
00:02:18,910 --> 00:02:21,490
‫Y de hecho usemos

49
00:02:21,490 --> 00:02:26,490
‫una cadena de plantilla aquí para poder seguir adelante y

50
00:02:26,520 --> 00:02:30,470
‫usar la variable dirname, luego barra y public.

51
00:02:30,470 --> 00:02:33,214
‫Guárdelo y vuelva al navegador.

52
00:02:33,214 --> 00:02:37,130
‫Entonces podremos abrir este resumen. html.

53
00:02:37,130 --> 00:02:40,200
‫Ahora no va a funcionar en esta URL aquí.

54
00:02:40,200 --> 00:02:42,540
‫En realidad tiene que ser así.

55
00:02:42,540 --> 00:02:46,290
‫Entonces, sin el público, solo / visión general. html.

56
00:02:46,290 --> 00:02:48,650
‫Veamos, y realmente funciona.

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

58
00:02:49,483 --> 00:02:50,430
‫Ahora, ¿por qué es eso?

59
00:02:50,430 --> 00:02:53,700
‫¿Por qué no necesitamos la carpeta pública aquí en la URL?

60
00:02:53,700 --> 00:02:56,650
‫Bueno, simplemente porque cuando abrimos una URL que

61
00:02:56,650 --> 00:02:58,780
‫no puede encontrar en ninguna

62
00:02:58,780 --> 00:03:02,480
‫de nuestras rutas, buscará en esa carpeta pública que definimos.

63
00:03:02,480 --> 00:03:05,620
‫Y establece esa carpeta en la raíz.

64
00:03:05,620 --> 00:03:08,210
‫Bien, supongamos que la raíz es ahora

65
00:03:08,210 --> 00:03:09,730
‫nuestra carpeta pública.

66
00:03:09,730 --> 00:03:12,740
‫Entonces esto aquí, y luego la descripción general está allí.

67
00:03:12,740 --> 00:03:15,003
‫Y por eso hemos accedido a él.

68
00:03:16,020 --> 00:03:18,530
‫Ahí también tenemos imágenes, por ejemplo.

69
00:03:18,530 --> 00:03:23,530
‫Digamos que queremos abrir la imagen y luego este pin aquí.

70
00:03:23,640 --> 00:03:25,053
‫Y podemos hacer eso.

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

72
00:03:29,620 --> 00:03:33,200
‫imagen, pin png, y aquí vamos.

73
00:03:33,200 --> 00:03:34,490
‫Aquí está la imagen.

74
00:03:34,490 --> 00:03:38,830
‫Ahora lo que no podemos hacer es esto, porque no es un archivo.

75
00:03:38,830 --> 00:03:41,060
‫Esto parece una ruta normal, por

76
00:03:41,060 --> 00:03:44,960
‫lo que Express realmente intenta encontrar un controlador de ruta

77
00:03:44,960 --> 00:03:47,070
‫para esta, que no puede

78
00:03:47,070 --> 00:03:49,100
‫porque no definió nada.

79
00:03:49,100 --> 00:03:49,933
‫¿Está bien?

80
00:03:49,933 --> 00:03:52,440
‫Entonces realmente solo funciona para archivos estáticos.

81
00:03:52,440 --> 00:03:56,330
‫En cuyo caso, nuevamente, no irá a una nueva ruta, sino

82
00:03:56,330 --> 00:03:58,790
‫que simplemente servirá ese archivo que especificamos

83
00:03:58,790 --> 00:04:00,280
‫desde la carpeta

84
00:04:00,280 --> 00:04:04,043
‫pública, o en la carpeta que especificamos aquí en este middleware.

85
00:04:05,420 --> 00:04:09,480
‫Ahora eche un vistazo a la consola aquí y vea todas las

86
00:04:09,480 --> 00:04:12,660
‫solicitudes que realmente se hicieron cuando abrimos esa página.

87
00:04:12,660 --> 00:04:15,690
‫Vamos a aclarar esto aquí solo para que veamos todas las solicitudes que

88
00:04:15,690 --> 00:04:18,090
‫en realidad provienen de esa página de descripción general.

89
00:04:19,090 --> 00:04:23,870
‫Así que volvamos a escribir la descripción general. html aquí.

90
00:04:23,870 --> 00:04:25,696
‫Y estas imágenes aquí están

91
00:04:25,696 --> 00:04:28,810
‫rotas y eso es porque se supone que este html no

92
00:04:28,810 --> 00:04:30,720
‫se debe servir así, ¿de acuerdo?

93
00:04:30,720 --> 00:04:32,320
‫Solo lo estoy usando ahora

94
00:04:32,320 --> 00:04:34,223
‫aquí para que obtengamos algunos comentarios visuales.

95
00:04:35,271 --> 00:04:38,423
‫No estoy interesado en absoluto en el contenido aquí.

96
00:04:39,980 --> 00:04:42,800
‫Ahora solo eche un vistazo a todas las solicitudes que

97
00:04:42,800 --> 00:04:44,950
‫se realizaron para todos los activos.

98
00:04:44,950 --> 00:04:46,580
‫Entonces, como dije al

99
00:04:46,580 --> 00:04:49,600
‫principio, para cada pieza que forma parte del sitio

100
00:04:49,600 --> 00:04:52,360
‫web, nuestro servidor recibe una solicitud por separado.

101
00:04:52,360 --> 00:04:55,070
‫Y ve aquí que la mayoría de ellos obtienen este 404.

102
00:04:55,070 --> 00:04:59,260
‫Entonces, es por eso que los enlaces se rompen en la página web,

103
00:04:59,260 --> 00:05:02,270
‫simplemente porque Express no puede encontrarlos en esta carpeta.

104
00:05:02,270 --> 00:05:04,090
‫Pero de nuevo, ese no es el punto aquí.

105
00:05:04,090 --> 00:05:05,650
‫Lo que solo quería

106
00:05:05,650 --> 00:05:07,496
‫mostrarles es cómo podemos servir

107
00:05:07,496 --> 00:05:10,806
‫archivos estáticos desde una carpeta y no desde una ruta.

108
00:05:10,806 --> 00:05:11,950
‫Está bien.

109
00:05:11,950 --> 00:05:15,840
‫Y así concluye la introducción básica a Express.

110
00:05:15,840 --> 00:05:17,300
‫En los siguientes dos

111
00:05:17,300 --> 00:05:19,266
‫videos hablaremos sobre algo llamado variables

112
00:05:19,266 --> 00:05:22,573
‫de entorno y también configuraremos ESlint en código VS oral.