Firebase Hosting: Cloud Functions para Contenido Dinámico y SEO

Contenido del curso

Bienvenida e Introducción

Consola web de administración

Extendiendo la Gestión de Usuarios con Cloud Functions.

Extendiendo Firestore con Cloud Functions.

Extendiendo el Almacenamiento con Cloud Functions.

Creando Cloud Functions HTTPS

Extendiendo el Hosting con Cloud Functions.

15
Firebase Hosting: Cloud Functions para Contenido Dinámico y SEO
Viendo ahora

Extendiendo crashlytics con Cloud Functions.

Extendiendo Analytics con Cloud Functions.

Firebase hosting permite usar las cloud functions para procesamiento al lado del servidor. Esto permite que puedas generar contenido dinámico para tu sitio alojado en el hosting de firebase. Además puedes hacer:

Pre-render de tus SPA (Single Page Application) para mejorar el SEO: esto permite crear dinámicos tag de ‘meta’ que mejoran el SEO en redes sociales o buscadores.
Brindar contenido dinámico: No solo puedes brindar contenido estático, también es posible a partir una URL llamar una función que consulte algunos datos o los procese y con ello brindar un contenido dinámico a las páginas

¿Cómo lo haces? Primero creas una función, ejemplo:

exports.renderPost = functions.https.onRequest((req, resp) => {
 console.log(req.query.idPost)
 return admin
   .firestore()
   .collection('posts')
   .doc(req.query.idPost)
   .get()
   .then(post => {
     return resp.status(200).send(`<!doctype html>
       <head>
         <title>Post</title>
       </head>
       <body>
           <article>
             <div>
                 <h2>${post.data().titulo}</h2>
             </div>
             <div>
                 <iframe type="text/html" width="500" height="385" src='${
                     post.data().videoLink}'
                     frameborder="0"></iframe>
             </div>
             <div>
                 Video
             </div>
             <div>
                 <p>${post.data().descripcion}</p>
             </div>
           </article>
       </body>
     </html>`)
   })
})

Ahora agregamos una configuración de rewrite en el archivo firebase.json:

{
   "hosting": {
     "public": "public",
      
     "rewrites": [ {
       "source": "/post", 
  "function": "renderPost"
     } ]
   }
}

Desplegamos la función y la aplicación web a firebase y probamos con las URL

https://your-firebase-project-id.firebaseapp.com/post?idPost=ID_POST

Veremos que nos muestra una página con el contenido HTML definido en la función.

Además para mejorar el rendimiento al momento de renderizar la página podemos usar el caché de HTTP tanto el de los CDNs (Content Delivery Network) como el del browser. Esto lo puedes hacer de la siguiente forma:

resp.set('Cache-Control', 'public, max-age=300, s-maxage=600');

En esta línea estamos modificando el cache, asignado un tiempo de caché al browser de 5 minutos por medio del max-age y un tiempo de caché al CDN de 10 minutos por medio del s-maxage.

Enlace sugerido:

https://firebase.google.com/docs/hosting/functions

Firebase Hosting: Cloud Functions para Contenido Dinámico y SEO

Curso de Firebase 5: Cloud Functions

Clase 15 de 22

Clase 15 / 22

exports.renderPost = functions.https.onRequest((req, resp) => {
 console.log(req.query.idPost)
 return admin
   .firestore()
   .collection('posts')
   .doc(req.query.idPost)
   .get()
   .then(post => {
     return resp.status(200).send(`<!doctype html>
       <head>
         <title>Post</title>
       </head>
       <body>
           <article>
             <div>
                 <h2>${post.data().titulo}</h2>
             </div>
             <div>
                 <iframe type="text/html" width="500" height="385" src='${
                     post.data().videoLink}'
                     frameborder="0"></iframe>
             </div>
             <div>
                 Video
             </div>
             <div>
                 <p>${post.data().descripcion}</p>
             </div>
           </article>
       </body>
     </html>`)
   })
})

Bienvenida e Introducción

Creación de Cloud Functions en Firebase

Firebase y Cloud Functions: Creación y Gestión de Backend Avanzado

Consola web de administración

Crear proyecto Firebase y configurar Cloud Functions

Primer proyecto en Cloud Functions

Extendiendo la Gestión de Usuarios con Cloud Functions.

Creación de Cloud Functions para Autenticación de Usuarios en Firebase

Prueba y despliegue de Firebase Functions

Extendiendo Firestore con Cloud Functions.

Creación de Cloud Functions con Firestore en Firebase

Pruebas de Cloud Functions en Firebase

Extendiendo el Almacenamiento con Cloud Functions.

Cloud Functions para validar imágenes con Vision

Cloud Vision para moderar imágenes automáticamente

Prueba y Despliegue de Funciones con Firebase y Google Cloud

Creando Cloud Functions HTTPS

Funciones HTTP con Express en Firebase

Construcción de Controladores HTTP en Node.js con Firebase

Probar funciones HTTP localmente en Firebase

Extendiendo el Hosting con Cloud Functions.

Firebase Hosting: Cloud Functions para Contenido Dinámico y SEO

Extendiendo crashlytics con Cloud Functions.

Manejo de Errores con Crash Liris y Funciones en Firebase

Envío de Mensajes SMS con Twilio en Aplicaciones Android e iOS

Extendiendo Analytics con Cloud Functions.

Funciones en Firebase: Eventos de Analíticas y Envío de Mensajes

Probar Firebase Functions con shell local

Creación de pruebas unitarias a las Cloud Functions.

Pruebas unitarias en Firebase Cloud Functions

Optimizando las Cloud Functions.

Optimización y Buenas Prácticas para Cloud Functions

Cierre

Crear funciones con eventos de Firebase

Firebase Hosting: Cloud Functions para Contenido Dinámico y SEO