Join us for Firebase Summit on November 10, 2021. Tune in to learn how Firebase can help you accelerate app development, release with confidence, and scale with ease. Register

Ajouter Firebase à votre projet JavaScript

Suivez ce guide pour utiliser le SDK JavaScript Firebase dans votre application Web ou en tant que client pour l'accès de l'utilisateur final, par exemple, dans un bureau Node.js ou une application IoT.

Étape 1: Créer un projet Firebase et enregistrer votre application

Avant de pouvoir ajouter Firebase à votre application JavaScript, vous devez créer un projet Firebase et enregistrer votre application avec ce projet. Lorsque vous enregistrez votre application auprès de Firebase, vous obtenez un objet de configuration Firebase que vous utiliserez pour connecter votre application aux ressources de votre projet Firebase.

Visitez Comprendre Firebase projets pour en savoir plus sur les projets Firebase et les meilleures pratiques pour ajouter des applications à des projets.

Si vous ne possédez pas déjà un projet JavaScript et que vous voulez juste essayer un produit Firebase, vous pouvez télécharger un de nos échantillons de démarrage rapide .

Etape 2: Installation du SDK et initialiser Firebase

Cette page décrit les instructions d'installation pour la version 9 du SDK Firebase JS, qui utilise un module JavaScript format.

Cette utilisation nécessite flux de travail NPM et fardeleuses modules ou outillage framework JavaScript car le SDK v9 est optimisé pour fonctionner avec le module fardeleuses pour éliminer le code utilisé (secouant l' arbre) et la taille du SDK de diminution.

  1. Installez Firebase à l'aide de npm :

    npm install firebase
  2. Initialisez Firebase dans votre application et créez un objet Firebase App :

    import { initializeApp } from 'firebase/app';
    
    // TODO: Replace the following with your app's Firebase project configuration
    const firebaseConfig = {
      //...
    };
    
    const app = initializeApp(firebaseConfig);
    

    Une application Firebase est un objet de type conteneur qui stocke la configuration commune et partage l'authentification entre les services Firebase. Après avoir initialisé un objet Firebase App dans votre code, vous pouvez ajouter et commencer à utiliser les services Firebase.

Étape 3: Firebase Access dans votre application

Les services Firebase (comme Cloud Firestore, l'authentification, la base de données en temps réel, la configuration à distance, etc.) peuvent être importés dans des sous-packages individuels.

L'exemple ci-dessous montre comment vous pouvez utiliser le SDK Cloud Firestore Lite pour récupérer une liste de données.

import { initializeApp } from 'firebase/app';
import { getFirestore, collection, getDocs } from 'firebase/firestore/lite';
// Follow this pattern to import other Firebase services
// import { } from 'firebase/<service>';

// TODO: Replace the following with your app's Firebase project configuration
const firebaseConfig = {
  //...
};

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

// Get a list of cities from your database
async function getCities(db) {
  const citiesCol = collection(db, 'cities');
  const citySnapshot = await getDocs(citiesCol);
  const cityList = citySnapshot.docs.map(doc => doc.data());
  return cityList;
}

Etape 4: Utilisation d' un module d' empaquetage (webpack / cumulatif) pour la réduction de la taille ,

Le SDK Web Firebase est conçu pour fonctionner avec les bundlers de modules afin de supprimer tout code inutilisé (tree-shaking). Nous vous recommandons fortement d'utiliser cette approche pour les applications de production. Des outils tels que l' angulaire CLI , Next.js , Vue CLI , ou Créer React App gérer automatiquement le regroupement de modules pour les bibliothèques installées par NPM et importés dans votre base de code.

Voir notre guide L' utilisation du module fardeleuses avec Firebase pour plus d' informations.

Services Firebase disponibles pour le Web

Maintenant que vous êtes configuré pour utiliser Firebase, vous pouvez commencer à ajouter et à utiliser l'un des services Firebase disponibles suivants dans votre application Web.

Les commandes suivantes montrent comment importer des bibliothèques installées localement avec Firebase npm . Voir la page Bibliothèques disponibles pour les options d'importation alternatives.

Prochaines étapes

En savoir plus sur Firebase :