Suivez ce guide pour utiliser le SDK JavaScript Firebase dans votre application Web ou en tant que client pour l'accès des utilisateurs finaux, par exemple dans une application IoT ou de bureau 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 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 associer votre application aux ressources de votre projet Firebase.
Consultez Comprendre les projets Firebase pour en savoir plus sur les projets Firebase et les bonnes pratiques à suivre pour ajouter des applications à des projets.
Créer un projet Firebase
-
Dans la console Firebase, cliquez sur Ajouter un projet.
-
Pour ajouter des ressources Firebase à un projet Google Cloud existant, saisissez son nom ou sélectionnez-le dans le menu déroulant.
-
Pour créer un projet, saisissez le nom souhaité. Vous pouvez également modifier l'ID du projet affiché sous le nom du projet.
-
-
Si vous y êtes invité, lisez et acceptez les Conditions d'utilisation de Firebase.
-
Cliquez sur Continuer.
-
(Facultatif) Configurez Google Analytics pour votre projet, ce qui vous permet de profiter d'une expérience optimale avec l'un des produits Firebase suivants:
Sélectionnez un compte Google Analytics existant ou créez-en un.
Si vous créez un compte, sélectionnez votre emplacement de création de rapports Analytics, puis acceptez les paramètres de partage des données et les conditions Google Analytics pour votre projet.
-
Cliquez sur Créer un projet (ou sur Ajouter Firebase si vous utilisez un projet Google Cloud existant).
Firebase provisionne automatiquement des ressources pour votre projet Firebase. Une fois le processus terminé, vous êtes redirigé vers la page de présentation de votre projet Firebase dans la console Firebase.
Enregistrer votre application
Une fois que vous avez créé un projet Firebase, vous pouvez enregistrer votre application Web avec ce projet.
-
Au centre de la page de présentation du projet dans la console Firebase, cliquez sur l'icône Web ( ) pour lancer le workflow de configuration.
Si vous avez déjà ajouté une application à votre projet Firebase, cliquez sur Ajouter une application pour afficher les options de plate-forme.
-
Saisissez le pseudo de votre application.
Ce surnom est un identifiant interne et pratique. Vous seul pouvez le voir dans la console Firebase. -
Cliquez sur Enregistrer l'application.
-
Suivez les instructions à l'écran pour ajouter et initialiser le SDK Firebase dans votre application.
Vous trouverez également des instructions plus détaillées sur l'ajout, l'initialisation et l'utilisation du SDK Firebase dans les étapes suivantes de cette page de démarrage.
Si vous ne disposez pas encore d'un 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: Installez le SDK et initialisez Firebase
Cette page décrit les instructions de configuration de l'API modulaire du SDK JS Firebase, qui utilise un format de module JavaScript.
Ce workflow utilise npm et nécessite des outils de compilation de modules ou de framework JavaScript, car l'API modulaire est optimisée pour fonctionner avec des outils de compilation de modules afin d'éliminer le code inutilisé (tree-shaking) et de réduire la taille du SDK.
Installez Firebase à l'aide de npm:
npm install firebase
Initialisez Firebase dans votre application et créez un objet Application Firebase:
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 semblable à un 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 effectuer 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'interface
FirebaseServerApp
pour optimiser la gestion des sessions de votre application avec les services workers.
Étape 3: Accéder à Firebase dans votre application
Les services Firebase (comme 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 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; }
Étape 4: Utilisez 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 la CLI Angular, Next.js, la CLI Vue 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 connaître d'autres options d'importation, consultez la documentation des bibliothèques disponibles.
Étapes suivantes
En savoir plus sur Firebase:
Découvrez les exemples d'applications Firebase.
Familiarisez-vous avec l'atelier de programmation Firebase Web.
Explorez le code Open Source sur GitHub.
Consultez les environnements compatibles avec le SDK JavaScript Firebase.
Accélérez votre développement avec des bibliothèques Open Source supplémentaires gérées par Firebase, comme AngularFire, RxFire et FirebaseUI pour le Web.
Préparez le lancement de votre application:
- Configurez des alertes budgétaires pour votre projet dans la console Google Cloud.
- Surveillez le tableau de bord "Utilisation et facturation" dans la console Firebase pour obtenir une vue d'ensemble de l'utilisation de votre projet sur plusieurs services Firebase.
- Consultez la checklist de lancement de Firebase.