Uso de Firebase Realtime Database en Astro con Vue: una guía paso a paso

En esta guía, aprenderá cómo utilizar los usuarios de Firebase Realtime Database en una aplicación Astro usando Vue. Pasará por el proceso de configuración de un nuevo proyecto Astro, habilitando la hidratación del lado del servidor y del lado cliente de Vue 3 e integrando Firebase. Base de datos en tiempo real sin problemas

Requisitos previos

Necesitará lo siguiente:

• Nodejs 18 o posterior
• Una cuenta de Firebase

Tabla de contenido

• Crear una nueva aplicación Astro
• Integra Vue en tu proyecto Astro
• Integra Firebase Realtime Database en tu proyecto Astro
  • Instalar VueUse SDK para Firebase Realtime Database
  • [Crear una instancia del cliente de base de datos en tiempo real de Firebase] (#instanciar-firebase-realtime-database-client)
  • Crear la ruta índice
• [Crea y prueba tu aplicación Astro localmente](#construye y prueba-tu-aplicación-astro-localmente)

Crea una nueva aplicación Astro

Comencemos creando un nuevo proyecto Astro. Ejecute el siguiente comando:

npm create astro@latest my-app

npm create astro es la forma recomendada de desarrollar rápidamente un proyecto Astro

Cuando se le solicite, elija:

• Empty cuando se le pregunta cómo iniciar el nuevo proyecto
• Sí cuando se le pregunte si planea escribir Typecript
• Estricto cuando se le pregunta qué tan estricto debe ser Typecript.
• Sí cuando se le solicita instalar dependencias
• Sí cuando se le solicita inicializar un repositorio de git

Una vez hecho esto, puede ir al directorio del proyecto e iniciar la aplicación:

cd my-app
npm run dev

La aplicación debería estar ejecutándose en localhost:4321

Ahora, pasemos a integrar Vue en su aplicación Astro.

Integra Vue en tu proyecto Astro

Para crear interfaces de usuario dinámicas, utilizará Vue en su proyecto Astro. Ejecute el siguiente comando:

npx astro add vue

npx nos permite ejecutar paquetes binarios npm sin tener que instalarlo primero globalmente

Cuando se le solicite, elija lo siguiente:

• Sí cuando se le pregunta si desea instalar las dependencias de Vue
• Sí cuando se le pregunta si desea realizar cambios en el archivo de configuración de Astro
• Sí cuando se le pregunta si desea realizar cambios en el archivo tsconfigjson

Ahora, para evitar la molestia de crear rutas relativas para las importaciones, actualice tsconfigjson con lo siguiente:

{
  "extends": "astro/tsconfigs/strict",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

Integre Firebase Realtime Database en su proyecto Astro

Instale el SDK de VueUse para la base de datos en tiempo real de Firebase

Ejecute el siguiente comando para instalar el paquete necesario para usar Firebase Realtime Database:

npm install @vueuse/firebase firebase

El comando instala la siguiente biblioteca:

• @vueuse/firebase: un paquete que permite enlaces en tiempo real para Firebase
• firebase: Un paquete para interactuar con Firebase

Crear una instancia del cliente de base de datos en tiempo real de Firebase

Para establecer una conexión con su instancia de Firebase, cree un firebasejson en el directorio src con el archivo de clave de cuenta de servicio para Firebase. Asegúrese de que el valor databaseURL esté presente y apunte a la URL de su base de datos en tiempo real de Firebase.

{
  "type": "service_account",
  "project_id": "...",
  "private_key_id": "...",
  "private_key": "-----BEGIN PRIVATE KEY-----\n...\n-----END PRIVATE KEY-----\n",
  "client_email": "...@....iam.gserviceaccount.com",
  "client_id": "...",
  "auth_uri": "https://accounts.google.com/o/oauth2/auth",
  "token_uri": "https://oauth2.googleapis.com/token",
  "auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs",
  "client_x509_cert_url": "https://www.googleapis.com/robot/v1/metadata/.../....iam.gserviceaccount.com",
  "universe_domain": "googleapis.com",
  "databaseURL": "https://...-default-rtdb.firebaseio.com"
}

Para configurar una aplicación Firebase y exportar una referencia a Firebase Realtime Database, cree un archivo firebasets en el directorio src con el siguiente código:

import { initializeApp } from "firebase/app";
import firebaseConfig from "./firebase.json";
import { getDatabase } from "firebase/database";

const app = initializeApp(firebaseConfig);

export default getDatabase(app);

El código anterior hace lo siguiente:

• Importa la función initializeApp para inicializar una aplicación de Firebase
• Importa el objeto de configuración de Firebase desde firebasejson
• Importa la función getDatabase para obtener una referencia a Firebase Realtime Database
• Llama a initializeApp con el objeto firebaseConfig para inicializar la aplicación Firebase.
• Exporta la referencia a Firebase Realtime Database. Esta referencia exportada se puede utilizar para interactuar con Firebase Realtime Database desde otras partes de la aplicación.

Crear la ruta de índice

Crear una aplicaciónvue dentro del directorio src con el siguiente código:

<template>
  <ul>
    <li v-for="todo in todos" :key="todo">
      <span>{{ todo }}</span>
    </li>
  </ul>
</template>

<script setup lang="ts">
// File: src/App.vue

import db from "@/firebase";
import { ref } from "firebase/database";
import { useRTDB } from "@vueuse/firebase/useRTDB";

const todos = useRTDB(ref(db, "todos"), { autoDispose: false });
</script>

El código anterior hace lo siguiente:

• Define una plantilla con una lista desordenada (<template>) para mostrar una lista de todos
• Importa la instancia de Firebase Realtime Database desde el módulo @/firebase
• Importa la función ref de Firebase para crear una referencia a una ubicación específica en Firebase Realtime Database
• Importa la función useRTDB desde @vueuse/firebase para vincular la variable todos a las actualizaciones en tiempo real desde Firebase Realtime Database
• Configura useRTDB para escuchar los cambios en la ubicación de todos en la base de datos y establece autoDispose en falso para evitar la eliminación automática del enlace en tiempo real cuando se desmonta el componente.

Para usar este componente de Vue en la página de inicio de su aplicación, realice los siguientes cambios en el archivo src/pages/indexastro:

---
import App from "@/App.vue"; // [!code ++] // [!code focus]
---

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>Astro</title>
  </head>
  <body>
    <App client:load /> // [!code ++] // [!code focus]
  </body>
</html>

Los cambios anteriores importan el componente Vue App y usan la directiva client:load de Astro para asegurarse de que este componente Vue se hidrate inmediatamente en la página.

Cree y pruebe su aplicación Astro localmente

Para probar la aplicación, prepare una compilación y ejecute el servidor de vista previa usando el siguiente comando:

npm run build && node ./dist/server/entry.mjs

Conclusión

En esta guía, aprendió cómo usar Firebase Realtime Database con Vue en una aplicación Astro.

Si tiene alguna pregunta o comentario, no dude en comunicarse conmigo en Twitter