‫Conferencista: Aprendamos
‫ahora a servir archivos estáticos con Express.
‫Ahora, ¿qué quiero decir realmente con archivos estáticos?
‫Bueno, son los archivos que se encuentran en nuestro sistema de archivos a
‫los que actualmente no podemos acceder usando todas las rutas.
‫Entonces, por ejemplo, tenemos esta descripción general. html aquí
‫en nuestra carpeta pública.
‫Pero en este momento no hay forma de que podamos acceder a
‫esto usando un navegador, ¿verdad?
‫Y lo mismo para estos archivos de imagen que
‫tenemos aquí, o los archivos CSS o Javascript.
‫Así que déjame mostrarte eso
‫y déjame usar el navegador esta vez.
‫Por ahora estoy copiando esta URL aquí
‫solo para mostrarte que
‫funcionará, obviamente también en el navegador.
‫Bien, este es nuestro resultado sin formato aquí, de
‫la misma ruta.
‫Pero digamos que en realidad queremos acceder a ese archivo HTML
‫del que acababa de hablar.
‫Por lo tanto, podemos, por supuesto, no solo
‫escribir en público y luego, por ejemplo, en
‫una descripción general. html, ¿verdad?
‫No hay forma de que podamos acceder a esto ahora mismo.
‫Y eso es simplemente porque no definimos ninguna
‫ruta para esta URL, ¿verdad?
‫No tenemos ningún controlador asociado a esta ruta.
‫Entonces, si realmente queremos acceder a
‫algo desde nuestro sistema
‫de archivos, necesitamos usar un middleware Express integrado.
‫Permítanme ahora mostrarles cómo podemos hacer eso.
‫Por ejemplo, después de este.
‫Ahora, en esta sección, en realidad, solo estamos hablando de una API, por
‫lo que en realidad no necesitamos entregar archivos estáticos
‫como imágenes o HTML, así que lo que acabo de mostrarles.
‫Pero dado que esta sección es
‫una introducción a Express
‫en general, también quería mostrarles rápidamente este contenido de todos modos.
‫Entonces, como estaba diciendo, todo lo que tenemos
‫que hacer es usar un middleware integrado simple
‫que sea así.
‫Express dot static, porque queremos servir archivos estáticos, así que este
‫es un nombre obvio para eso.
‫Y aquí pasamos el directorio desde el
‫que queremos servir archivos estáticos.
‫Y en este caso, usaré el directorio público.
‫Entonces, esta carpeta aquí donde tenemos estos archivos HTML, ¿de acuerdo?
‫Y de hecho usemos
‫una cadena de plantilla aquí para poder seguir adelante y
‫usar la variable dirname, luego barra y public.
‫Guárdelo y vuelva al navegador.
‫Entonces podremos abrir este resumen. html.
‫Ahora no va a funcionar en esta URL aquí.
‫En realidad tiene que ser así.
‫Entonces, sin el público, solo / visión general. html.
‫Veamos, y realmente funciona.
‫Bueno.
‫Ahora, ¿por qué es eso?
‫¿Por qué no necesitamos la carpeta pública aquí en la URL?
‫Bueno, simplemente porque cuando abrimos una URL que
‫no puede encontrar en ninguna
‫de nuestras rutas, buscará en esa carpeta pública que definimos.
‫Y establece esa carpeta en la raíz.
‫Bien, supongamos que la raíz es ahora
‫nuestra carpeta pública.
‫Entonces esto aquí, y luego la descripción general está allí.
‫Y por eso hemos accedido a él.
‫Ahí también tenemos imágenes, por ejemplo.
‫Digamos que queremos abrir la imagen y luego este pin aquí.
‫Y podemos hacer eso.
‫Entonces
‫imagen, pin png, y aquí vamos.
‫Aquí está la imagen.
‫Ahora lo que no podemos hacer es esto, porque no es un archivo.
‫Esto parece una ruta normal, por
‫lo que Express realmente intenta encontrar un controlador de ruta
‫para esta, que no puede
‫porque no definió nada.
‫¿Está bien?
‫Entonces realmente solo funciona para archivos estáticos.
‫En cuyo caso, nuevamente, no irá a una nueva ruta, sino
‫que simplemente servirá ese archivo que especificamos
‫desde la carpeta
‫pública, o en la carpeta que especificamos aquí en este middleware.
‫Ahora eche un vistazo a la consola aquí y vea todas las
‫solicitudes que realmente se hicieron cuando abrimos esa página.
‫Vamos a aclarar esto aquí solo para que veamos todas las solicitudes que
‫en realidad provienen de esa página de descripción general.
‫Así que volvamos a escribir la descripción general. html aquí.
‫Y estas imágenes aquí están
‫rotas y eso es porque se supone que este html no
‫se debe servir así, ¿de acuerdo?
‫Solo lo estoy usando ahora
‫aquí para que obtengamos algunos comentarios visuales.
‫No estoy interesado en absoluto en el contenido aquí.
‫Ahora solo eche un vistazo a todas las solicitudes que
‫se realizaron para todos los activos.
‫Entonces, como dije al
‫principio, para cada pieza que forma parte del sitio
‫web, nuestro servidor recibe una solicitud por separado.
‫Y ve aquí que la mayoría de ellos obtienen este 404.
‫Entonces, es por eso que los enlaces se rompen en la página web,
‫simplemente porque Express no puede encontrarlos en esta carpeta.
‫Pero de nuevo, ese no es el punto aquí.
‫Lo que solo quería
‫mostrarles es cómo podemos servir
‫archivos estáticos desde una carpeta y no desde una ruta.
‫Está bien.
‫Y así concluye la introducción básica a Express.
‫En los siguientes dos
‫videos hablaremos sobre algo llamado variables
‫de entorno y también configuraremos ESlint en código VS oral.