Previews dinámicas con Firebase Hosting + Functions

¡Buenas! En este post veremos cómo crear previews dinámicas dependiendo del contenido que se esté compartiendo de una manera sencilla y sin depender de ningún framework o tecnología frontend.

Preview dinámicas o dynamic cards

Antes de empezar a ver cómo implementarlas… ¿Qué son?

Seguro que alguna vez has compartido un link en una red social como Twitter, Instagram… y este ha generado una especie de tarjeta con información relacionada con el contenido que estás compartiendo. Algo así

Para que el motor de renderizado de la página sepa que mostrar se usan unos meta-tags HTML que contienen los datos y la disposición del mismo para crear la tarjeta.

Es una solución sencilla de implementar pero… Nosotros necesitamos que este contenido cambie dependiendo del recurso que se está compartiendo, pongamos el caso de un perfil de usuario, por lo que no nos vale nos tags estáticos.

Contenido dinámico

Nos ponemos a añadir estas tarjetas HTML a nuestra web, pero queremos que estas lleven el contenido relacionado con la ruta o el contenido que estás compartiendo, por lo que no puede ser información estática.

Aquí es donde van a entrar las firebase functions, que nos van a permitir interceptar la petición del hosting, modificar el HTML que va a servir y devolverlo en cada petición.

Ahora que tenemos el esquema claro, vayamos a conocer los diferentes componentes.

Firebase Functions

Las Firebase Functions, como su propio nombre indica, son funciones que van a ser ejecutadas cuando se cumpla una condición, ya sea un CRON, una actualización de Firestore o como en este caso, en una petición al hosting.

Este servicio nos permite despreocuparnos de toda la parte de gestión del servidor donde nuestro código va a ser ejecutado, nosotros únicamente debemos crear el código y automáticamente será desplegado usando las herramientas de Firebase. Es lo que se conoce como SaaS

Firebase Hosting

Es el servicio de Firebase para alojar nuestras aplicaciones web. Siguiendo la dinámica de sus herramientas, nos ofrece un CLI para que los despliegues sean mucho más sencillos. Además de un JSON que nos permite configurar diferentes parámetros del servidor como el tiempo de caché, redirecciones…

Manos a la obra

Comenzamos escribiendo nuestro script en JS, va a ser un fichero sencillo que NodeJS se encargará de interpretar. En este caso tenemos que reaccionar a una petición HTTP, por lo que usando el método onRequest podemos indicarle una callback que ejecutará en cada petición, además de darnos los objetos Request y Response para interactuar con la propia petición

Ahora que ya tenemos la petición, lo que vamos a hacer es recuperar el HTML que estemos sirviendo normalmente y escribir la información dinámica necesaria para que se cree correctamente la previsualización del link.

Una vez que tenemos en memoria el archivo HTML, lo que vamos a hacer es buscar las tags que ya tenemos creadas de forma estáticas y remplazar su contenido por el contenido dinámico, ya sea el perfil de un usuario, información de un post…

Ya tenemos casi todo listo, tenemos nuestro archivo HTML actualizado con el contenido dinámico que hayamos obtenido dependiendo del path al que se haya accedido, por lo que solo nos queda devolver este HTML con su código HTTP 200.

Es importante nombrar el export de la función para luego poder referenciarla en nuestro archivo firebase.json. El script completo se nos queda tal que…

Vayamos ahora con la configuración de Firebase Hosting para que ejecute la función host en cada petición a cualquier ruta de nuestro dominio

Ahora solo tenemos que proceder con el despliegue del script y que este sea ejecutado en cada petición al hosting.

$ npm ci && firebase deploy --only functions

Conclusión

Con esta configuración ya tendríamos funcionando las previews dinámicas desde nuestro sitio web, y que serán mostradas cuando los usuarios compartan contenido de nuestro sitio.

Como habéis visto, esta solución es valida para cualquier framework web o incluso con contenido HTML estático, por lo que se puede integrar en casi cualquier proyecto que necesite estas tarjetas dinámicas.

Por ultimo dejo os mi twitter donde me encontraréis hablando sobre tecnología en general pero sobre todo Flutter 💙

¡Un saludo y hasta la próxima!