Express (Parte III) — Método app.use (sintaxis, errores, carga de archivos estáticos)

Temario

• Método app.use (Error 404 y 500)
• Cargando archivos estáticos

i. Introducción

En las entregas pasadas, vimos:

• Conceptos básicos y un hello world con express [ref]
• Peticiones HTTP (GET, PUT, POST, DELETE) [ref]

En esta history vamos a ver a profundidad cómo funciona el método app.use.

ii. Método app.use

En los ejemplos pasados utilizamos app.METHOD donde METHOD era el verbo o petición HTTP que maneja la función de middleware (get, post, delete, etc).

El método app.use(), nos va a permitir montar un middleware sin ninguna petición HTTP específica, esto quiere decir que podemos acceder a la URL directamente.

:: Sintaxis

Cuando NO se le indica la ruta (su valor predeterminado es "/"), el middleware montado se ejecutará para cada solicitud.

:: Ejemplo

Debes crear un nuevo proyecto llamado use-with-express-2, con el archivo app.js y su código básico.

Ahora procedemos a instalar express:

Una vez teniendo eso, vamos a agregar el siguiente código:

Levantamos el servidor (node app.js) y probamos las siguientes rutas:

• http://localhost:3000/
• http://localhost:3000/about
• http://localhost:3000/about/mau
• http://localhost:3000/other

En la animación de arriba podemos observar que cualquier petición que realizamos pasa por la función middleware app.use.

— ¿Qué es lo que está pasando?

Cuando nosotros desarrollamos las rutas, se ven algo así:

Cuando hacemos la petición "/", pasa lo siguiente:

Cuando hacemos la petición "/about/mau", pasa lo siguiente:

Si observamos bien los ejemplos de arriba las funciones de middleware se ejecutan de forma secuencial, por lo que el orden de los métodos es MUY IMPORTANTE, veamos el siguiente ejemplo:

Donde:

• (A) — Creamos el middleware para todas las rutas, pero, no ejecutamos la función next (esta comentada).
• (B) — En este método NUNCA va a entrar (aunque el path coincida), ya que se ejecuta primero la del método use y este “rompe” la cadena, al no ejecutar next

Cuando hacemos la petición "/", pasa lo siguiente:

Importante: para lograr ejecutar el ejemplo anterior solo se debe descomentar la función next(), en caso de no hacerlo se “colgará” el servicio, debido que no se está retornando nada.

:: Error 404

Ahora que hemos comprendido cómo se ejecutan las funciones en express, podemos usar use al final de todos los métodos, donde lo retornaremos como un error 404.

— Ejemplo

No olvides: Siempre que hagas cambios, debes de reiniciar el servidor, con Cmd+C (mac) o Ctrl+C (windows), para detener el servidor y node app.js para iniciarlo.

El ejemplo de arriba se ve algo así:

Cuando hacemos la petición "/dashboard", pasa lo siguiente:

:: Error 500 (manejo de errores)

Express viene con un controlador de errores predeterminado, detectando y procesando los errores que ocurren tanto síncrono como asíncronamente. Es importante asegurarnos que express detecte todos los errores que se producen al ejecutar los controladores de ruta y middleware.

Para que se identifique como función de middleware para el manejo de errores, SIEMPRE debe retornar 4 argumentos (incluso si no se necesita el objeto next), ya que de lo contrario lo tomará como un middleware normal[ref].

— Sintaxis

Importante: No olvidemos ponerlo al final (antes del 404)

Para lanzar un error en código síncrono dentro de algún controlador o middleware, solo es necesario una excepción:

Para lanzar un error en código asíncrono dentro de algún controlador o middleware, se debe de mandar invocar la función next, veamos dos ejemplos con llamadas asíncronas:

— Ejemplo completo:

No olvides: Siempre que hagas cambios, debes de reiniciar el servidor, con Cmd+C (mac) o Ctrl+C (windows), para detener el servidor y node app.js para iniciarlo.

Otra ventaja de manejar los errores, es que podemos tener más de un controlador, imagina lo siguiente:

• El primer manejador nos va a servir para guardar en un archivo log
• El segundo manejador nos va a servir para retornar el error

Entonces:

Donde:

• (A) — Es el primer middleware para guardar en el archivo log, express sabe que es un manejador de errores por los 4 argumentos.
• (B) — Ejecutamos next para que vaya al siguiente middleware (En caso de no haber otro, la petición se va a quedar colgada)
• (C)— El siguiente manejador, que es el que va a recibir el usuario.

Podemos observar en la animación de arriba que retorna el status 500 y el mensaje de error.

iii. Cargando archivos estáticos

Express nos permite regresar archivos estáticos (imágenes, CSS, JS…), para poder retornarlos vamos a necesitar de dos métodos:

• app.use — Montar un middleware sin ninguna petición HTTP específica
• express.static — Acceder a rutas estáticas del servidor (función de middleware incorporada en express basado en serve-static[ref])

:: Sintaxis

Nota: Para ver todas las opciones que soporta [ref]

:: Ejemplo

Debes crear un nuevo proyecto llamado example-statics-files, con el archivo app.js y su código básico:

Ahora procedemos a instalar express:

Agregamos el siguiente código:

Nota: De aquí en adelante el código de arriba será nuestro código base

Dentro de la carpeta example-statics-files vamos a crear otra llamada public/images, dónde vamos a agregar imágenes. Para el ejemplo descargar 4 imágenes de pexels.com[ref], y las renombramos a image1, image2, image3, image4), entonces, si has hecho todo bien, la aplicación debe verse así:

Inicializamos el servidor node app.js

Si intentamos acceder a las imágenes:

• http://localhost:3000/public/images/image1.jpg
• http://localhost:3000/images/image1.jpg

Nos va a regresar el error 404. Para poder acceder a las imágenes vamos a agregar la línea 4 al archivo app.js:

Se deberá agregar después del puerto y antes de las rutas.

Con esa línea le estamos indicando al servidor qué puede tomar TODOS los archivos que se encuentren dentro de la carpeta public (incluyendo subcarpetas).

Importante: Express busca los archivos relativos al directorio estático, por lo que el nombre del directorio estático NO forma parte de la URL.

Reiniciamos el server, y ahora ya tendremos acceso a los archivos de la siguiente manera:

• http://localhost:3000/images/image1.jpg

Si queremos agregar un prefijo a la ruta virtual a los archivos estáticos, solo bastará agregar la ruta como primer argumento dentro del método use, entonces, haciendo esas modificaciones, el ejemplo quedaría de la siguiente manera:

Esto quiere decir que todos los archivos los vamos a obtener de URL/static/

• http://localhost:3000/static/images/image1.jpg

Hay que tener cuidado con la ruta que le proporcionamos a static ya que la ruta es RELATIVA al directorio donde se inicia el proceso node, es decir que si ejecutamos la aplicación desde otra aplicación express existirá una alta probabilidad de que la ruta no la encuentre, para evitar este error se recomienda utilizar la variable global __dirname, actualicemos nuestro ejemplo:

Lo que hace esta variable es tener la ruta ABSOLUTA del servidor, sin importar si se esta ejecutando de manera directa o dentro de otra aplicación, con esto estamos garantizando de que los archivos SIEMPRE los va a encontrar.

En la siguiente entrega vamos a ver Express (Parte IV) — Objeto de solicitud (Request Object) — req.*

La entrega pasada vimos Express (Parte II) — Peticiones HTTP (GET, PUT, POST, DELETE)

Bibliografía y links que te puede interesar…

Express — Node.js web application framework

What is Node.js’ Connect, Express and “middleware”?

Conceptos básicos — API

Express (Parte I) — Conceptos básicos y un hello world

Express (Parte II) — Peticiones HTTP (GET, PUT, POST, DELETE)

Manejo de errores

serve-static

5.x API

Iconos e imágenes…

https://www.pexels.com/