Verwenden der Firebase-Echtzeitdatenbank in Astro mit Vue: Eine Schritt-für-Schritt-Anleitung

In diesem Leitfaden erfahren Sie, wie Sie Firebase-Echtzeitdatenbankbenutzer in einer Astro-Anwendung mit Vue verwenden. Sie durchlaufen den Prozess der Einrichtung eines neuen Astro-Projekts, der Aktivierung der serverseitigen und clientseitigen Hydratation von Vue 3 und der Integration von Firebase Echtzeitdatenbank nahtlos

Voraussetzungen

Sie benötigen Folgendes:

• Nodejs 18 oder höher – Ein Firebase-Konto

Inhaltsverzeichnis

• Eine neue Astro-Anwendung erstellen
• Integrieren Sie Vue in Ihr Astro-Projekt
• Integrieren Sie die Firebase-Echtzeitdatenbank in Ihr Astro-Projekt
  • VueUse SDK für Firebase Realtime Database installieren
  • Firebase-Echtzeitdatenbank-Client instanziieren
  • Indexroute erstellen
• Erstellen und testen Sie Ihre Astro-Anwendung lokal

Erstellen Sie eine neue Astro-Anwendung

Beginnen wir mit der Erstellung eines neuen Astro-Projekts. Führen Sie den folgenden Befehl aus:

npm create astro@latest my-app

„npm create astro“ ist die empfohlene Methode, um ein Astro-Projekt schnell zu erstellen

Wenn Sie dazu aufgefordert werden, wählen Sie:

• „Leer“, wenn Sie gefragt werden, wie das neue Projekt gestartet werden soll
• „Ja“, wenn Sie gefragt werden, ob Sie Typescript schreiben möchten
• „Streng“, wenn Sie gefragt werden, wie streng Typescript sein soll
• „Ja“, wenn Sie aufgefordert werden, Abhängigkeiten zu installieren
• „Ja“, wenn Sie aufgefordert werden, ein Git-Repository zu initialisieren

Sobald das erledigt ist, können Sie in das Projektverzeichnis wechseln und die App starten:

cd my-app
npm run dev

Die App sollte auf localhost:4321 ausgeführt werden.

Kommen wir nun zur Integration von Vue in Ihre Astro-Anwendung

Integrieren Sie Vue in Ihr Astro-Projekt

Um dynamische Benutzeroberflächen zu erstellen, verwenden Sie Vue in Ihrem Astro-Projekt. Führen Sie den folgenden Befehl aus:

npx astro add vue

„npx“ ermöglicht es uns, Binärdateien von npm-Paketen auszuführen, ohne sie zuerst global installieren zu müssen

Wenn Sie dazu aufgefordert werden, wählen Sie Folgendes aus:

• „Ja“, wenn Sie gefragt werden, ob die Vue-Abhängigkeiten installiert werden sollen
• „Ja“, wenn Sie gefragt werden, ob Änderungen an der Astro-Konfigurationsdatei vorgenommen werden sollen
• „Ja“, wenn Sie gefragt werden, ob Änderungen an der Datei „tsconfigjson“ vorgenommen werden sollen

Um sich nun die Mühe zu ersparen, relative Pfade für Importe zu erstellen, aktualisieren Sie „tsconfigjson“ wie folgt:

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

Integrieren Sie die Firebase-Echtzeitdatenbank in Ihr Astro-Projekt

Installieren Sie das VueUse SDK für die Firebase-Echtzeitdatenbank

Führen Sie den folgenden Befehl aus, um das erforderliche Paket für die Verwendung der Firebase Realtime Database zu installieren:

npm install @vueuse/firebase firebase

Der Befehl installiert die folgende Bibliothek:

• „@vueuse/firebase“: Ein Paket, das die Echtzeitbindungen für Firebase ermöglicht
• „Firebase“: Ein Paket zur Interaktion mit Firebase

Firebase Realtime Database-Client instanziieren

Um eine Verbindung mit Ihrer Firebase-Instanz herzustellen, erstellen Sie im Verzeichnis „src“ ein „firebasejson“ mit der Dienstkontoschlüsseldatei für Firebase. Stellen Sie sicher, dass der Wert „databaseURL“ vorhanden ist und auf die URL Ihrer Firebase-Echtzeitdatenbank verweist

{
  "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"
}

Um eine Firebase-App einzurichten und einen Verweis auf die Firebase-Echtzeitdatenbank zu exportieren, erstellen Sie eine Datei „Firebasets“ im Verzeichnis „src“ mit dem folgenden Code:

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

const app = initializeApp(firebaseConfig);

export default getDatabase(app);

Der obige Code führt Folgendes aus:

– Importiert die Funktion „initializeApp“, um eine Firebase-App zu initialisieren – Importiert das Firebase-Konfigurationsobjekt aus firebasejson – Importiert die Funktion „getDatabase“, um einen Verweis auf die Firebase-Echtzeitdatenbank zu erhalten – Ruft „initializeApp“ mit dem firebaseConfig-Objekt auf, um die Firebase-App zu initialisieren

• Exportiert die Referenz in die Firebase-Echtzeitdatenbank. Diese exportierte Referenz kann für die Interaktion mit der Firebase-Echtzeitdatenbank aus anderen Teilen der Anwendung verwendet werden

Erstellen Sie die Indexroute

Erstellen Sie eine „App“.vue im Verzeichnis „src“ mit dem folgenden Code:

<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>

Der obige Code führt Folgendes aus:

– Definiert eine Vorlage mit einer ungeordneten Liste („