Ajouter Firebase à votre projet JavaScript

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

É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 y enregistrer votre application. 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.

Consultez Comprendre les projets Firebase pour en savoir plus sur les projets Firebase et sur les bonnes pratiques à suivre pour ajouter des applications à des projets.

Si vous n'avez pas encore de projet JavaScript et que vous souhaitez simplement essayer un produit Firebase, vous pouvez télécharger l'un de nos exemples de démarrage rapide.

Étape 2 : Installer le SDK et initialiser Firebase

Cette page décrit les instructions de configuration de l'API modulaire du SDK Firebase JS, qui utilise un format de module JavaScript.

Ce workflow utilise npm et nécessite des outils de regroupement de modules ou de framework JavaScript car l'API modulaire est optimisée pour fonctionner avec des outils de regroupement de modules afin d'éliminer le code inutilisé (tree-shaking) et de réduire la taille du SDK.

  1. Installez Firebase à l'aide de npm :

    npm install firebase

  2. Initialisez Firebase dans votre application et créez un objet d'application Firebase :

    import { initializeApp } from 'firebase/app';

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

const app = initializeApp(firebaseConfig);

    Une application Firebase est un objet de type conteneur qui stocke une configuration commune et partage l'authentification entre les services Firebase. Une fois que vous avez initialisé un objet d'application Firebase dans votre code, vous pouvez ajouter et commencer à utiliser les services Firebase.

    Si votre application inclut des fonctionnalités dynamiques basées sur le rendu côté serveur (SSR), vous devrez suivre quelques étapes supplémentaires pour vous assurer que votre configuration persiste entre les passes de rendu côté serveur et côté client. Dans votre logique de serveur, implémentez l' FirebaseServerApp interface pour optimiser la gestion des sessions de votre application avec des service workers.

Étape 3 : Accéder à Firebase dans votre application

Les services Firebase (tels que Cloud Firestore, Authentication, Realtime Database, Remote Config, etc.) peuvent être importés dans des sous-packages individuels .

L'exemple ci-dessous montre comment utiliser le Cloud Firestore Lite SDK 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 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;
}

Étape 4 : Utiliser un outil de regroupement de modules (webpack/Rollup) pour réduire la taille

Le SDK Web Firebase est conçu pour fonctionner avec des outils de regroupement de modules afin de supprimer tout code inutilisé (tree-shaking). Nous vous recommandons vivement d'utiliser cette approche pour les applications de production. Des outils tels que Angular CLI, Next.js, Vue CLI, ou Create React App gèrent automatiquement le regroupement de modules pour les bibliothèques installées via npm et importées dans votre codebase.

Pour en savoir plus, consultez notre guide Utiliser des outils de regroupement de modules avec Firebase.

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 Firebase installées localement avec npm. Pour d'autres options d'importation, consultez la documentation sur les bibliothèques disponibles.

1 Firebase AI Logic s'appelait auparavant "Vertex AI in Firebase" avec le package firebase/vertexai.

Étapes suivantes

En savoir plus sur Firebase :