6 Essential Features Every Web Starter Kit →
LaunchFast Logo LaunchFast

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

Rishi Raj Jain
Using Firebase Realtime Database in Astro with Vue

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:

Tabla de contenido

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
  • cuando se le pregunte si planea escribir Typecript
  • Estricto cuando se le pregunta qué tan estricto debe ser Typecript.
  • cuando se le solicita instalar dependencias
  • 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:

  • cuando se le pregunta si desea instalar las dependencias de Vue
  • cuando se le pregunta si desea realizar cambios en el archivo de configuración de Astro
  • 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:

// File: src/firebase.ts

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:

---
// File: src/pages/index.astro

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

<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 ++]
  </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

Learn More Uso de OpenAI Swarm en Python: una guía paso a paso
Uso de OpenAI Swarm en Python: una guía paso a paso October 18, 2024
Cree un bot de Telegram en el enrutador de aplicaciones Next.js: una guía paso a paso
Cree un bot de Telegram en el enrutador de aplicaciones Next.js: una guía paso a paso July 3, 2024
Inyectar variables de entorno dinámicamente en páginas de Cloudflare
Inyectar variables de entorno dinámicamente en páginas de Cloudflare June 13, 2024