Me gustaría ver un ejemplo con react 😄
Bienvenida e Introducción
Qué aprenderás sobre las firebase cloud functions
Qué es firebase y las cloud functions
Consola web de administración
Consola de administración y documentación
Creación del proyecto de Cloud Functions
Extendiendo la Gestión de Usuarios con Cloud Functions.
Creación de las cloud functions de autenticación
Probando y desplegando las Cloud Functions de autenticación
Extendiendo Firestore con Cloud Functions.
Creación de las cloud functions de Firestore
Probando y desplegando las cloud functions de Firestore
Extendiendo el Almacenamiento con Cloud Functions.
Creación de las cloud functions para el storage
Terminando de crear cloud functions para el storage y probando su funcionamiento
Probando y desplegando las cloud functions de almacenamiento con Firestore
Creando Cloud Functions HTTPS
Creación de la cloud function HTTPS
Bonus: Construyendo un controlador para la función HTTP
Probando y desplegando las cloud function HTTPS
Extendiendo el Hosting con Cloud Functions.
Usando las firebase cloud functions desde el hosting
Extendiendo crashlytics con Cloud Functions.
Creación de las cloud functions de Crashlytics
Probando y desplegando la cloud function de Crashlytics
Extendiendo Analytics con Cloud Functions.
Creación de las cloud functions cuando se registra un evento en las analíticas de Firebase
Probando y desplegando la cloud function de analíticas
Creación de pruebas unitarias a las Cloud Functions.
Creando pruebas unitarias en Firebase Cloud Functions
Optimizando las Cloud Functions.
Buenas practicas para las cloud functions
Cierre
Conclusiones finales y cierre
Usando las firebase cloud functions desde el hosting
15/22Lectura
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:
Aportes 3
Preguntas 0
Ordenar por:
Suena interesante habria que tomarse un tiempo para realizarlo con detalle
Nice!
¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.