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
- 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:
Emptycuando se le pregunta cómo iniciar el nuevo proyectoSícuando se le pregunte si planea escribir TypecriptEstrictocuando se le pregunta qué tan estricto debe ser Typecript.Sícuando se le solicita instalar dependenciasSí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 VueSícuando se le pregunta si desea realizar cambios en el archivo de configuración de AstroSícuando se le pregunta si desea realizar cambios en el archivotsconfigjson
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 Firebasefirebase: 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
initializeApppara inicializar una aplicación de Firebase - Importa el objeto de configuración de Firebase desde firebasejson
- Importa la función
getDatabasepara obtener una referencia a Firebase Realtime Database - Llama a
initializeAppcon 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
refde Firebase para crear una referencia a una ubicación específica en Firebase Realtime Database - Importa la función
useRTDBdesde@vueuse/firebasepara vincular la variable todos a las actualizaciones en tiempo real desde Firebase Realtime Database - Configura
useRTDBpara escuchar los cambios en la ubicación de todos en la base de datos y estableceautoDisposeen 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
