Concevoir et tester des applications Web avec l'émulateur Firebase Hosting

Avant de commencer à prototyper et à tester votre application Web avec l'émulateur Firebase Hosting, assurez-vous de comprendre le workflow Firebase Local Emulator Suite global, d'installer et de configurer Local Emulator Suite, et de consulter ses commandes CLI.

Vous devez également connaître les fonctionnalités et le workflow d'implémentation de Firebase Hosting. Commencez par l'introduction à Firebase Hosting.

Que puis-je faire avec l'émulateur Firebase Hosting ?

L'émulateur Firebase Hosting fournit une émulation locale haute fidélité des services Hosting, offrant la plupart des fonctionnalités disponibles dans Hosting de production. L'émulateur Hosting vous permet d'effectuer les opérations suivantes :

• Prototyper vos sites statiques et vos applications Web sans frais de stockage ni d'accès
• Prototyper, tester et déboguer des fonctions HTTPS avant de les déployer sur votre site d'hébergement
• Testez des sites et des applications Web dans des workflows d'intégration continue conteneurisés.

Choisir un projet Firebase

Firebase Local Emulator Suite émule les produits pour un seul projet Firebase.

Pour sélectionner le projet à utiliser, avant de démarrer les émulateurs, exécutez firebase use dans votre répertoire de travail dans la CLI. Vous pouvez également transmettre l'option --project à chaque commande d'émulateur.

Remarque : Il est généralement recommandé d'utiliser un seul ID de projet pour toutes les invocations d'émulateur. Ainsi, Emulator Suite UI, les différents émulateurs de produits et toutes les instances en cours d'exécution d'un émulateur particulier peuvent communiquer correctement dans tous les cas. En fait, par défaut, Local Emulator Suite émet un avertissement lorsqu'il détecte plusieurs ID de projet en cours d'utilisation, mais vous pouvez remplacer ce comportement. Pour obtenir des conseils sur la définition et la gestion des ID de projet, consultez le guide d'installation et de configuration.

Local Emulator Suite est compatible avec l'émulation des projets Firebase réels et des projets de démonstration.

Type de projet	Fonctionnalités	Utiliser avec des émulateurs
Situation réelle	Un projet Firebase réel est un projet que vous avez créé et configuré (très probablement via la console Firebase). Les projets réels disposent de ressources en direct, comme des instances de base de données, des buckets de stockage, des fonctions ou toute autre ressource que vous configurez pour ce projet Firebase.	Lorsque vous travaillez avec de vrais projets Firebase, vous pouvez exécuter des émulateurs pour tout ou partie des produits compatibles. Pour tous les produits que vous n'émulez pas, vos applications et votre code interagissent avec la ressource live (instance de base de données, bucket de stockage, fonction, etc.).
Démonstration	Un projet de démonstration Firebase ne comporte aucune configuration Firebase réelle ni aucune ressource en direct. Ces projets sont généralement accessibles via des ateliers de programmation ou d'autres tutoriels. Les ID de projet de démonstration sont précédés du préfixe demo-.	Lorsque vous utilisez des projets de démonstration Firebase, vos applications et votre code interagissent uniquement avec des émulateurs. Si votre application tente d'interagir avec une ressource pour laquelle aucun émulateur n'est en cours d'exécution, ce code échouera.

Nous vous recommandons d'utiliser des projets de démonstration dans la mesure du possible. Voici quelques-uns de ses avantages :

• Configuration plus facile, car vous pouvez exécuter les émulateurs sans jamais créer de projet Firebase
• Sécurité renforcée : si votre code appelle accidentellement des ressources non émulées (de production), il n'y a aucun risque de modification des données, d'utilisation et de facturation.
• Meilleure compatibilité hors connexion, car vous n'avez pas besoin d'accéder à Internet pour télécharger la configuration de votre SDK.

Remarque : Si vous souhaitez émuler des interactions multiservices telles que Cloud Functions ou Rules déclenchées par une base de données et qui s'appuient sur Authentication, vous devez vous assurer que l'ID de projet dans votre code (dans initializeApp(), etc.) correspond à l'ID de projet utilisé par la CLI Firebase.

Workflow de prototypage de base

Si vous effectuez des itérations rapides ou si vous souhaitez que votre application interagisse avec des ressources de projet de backend émulées, vous pouvez tester votre contenu Hosting et votre configuration en local. Lorsque vous effectuez des tests en local, Firebase diffuse votre application Web à une URL hébergée en local.

1. (Facultatif) Par défaut, votre application hébergée localement interagit avec les ressources de projet réelles (fonctions, base de données, règles, etc.), et non émulées. Vous pouvez également connecter votre application pour utiliser les ressources de projet émulées que vous avez configurées. En savoir plus : Realtime Database | Cloud Firestore | Cloud Functions

2. À partir de la racine du répertoire de votre projet local, exécutez la commande suivante :

   firebase emulators:start

3. Ouvrez votre application Web à l'URL locale renvoyée par l'interface de ligne de commande (généralement http://localhost:5000).

4. Pour mettre à jour l'URL locale avec les modifications, actualisez votre navigateur.

Tester depuis d'autres appareils locaux

Par défaut, les émulateurs ne répondent qu'aux requêtes provenant de localhost. Cela signifie que vous pourrez accéder à votre contenu hébergé depuis le navigateur Web de votre ordinateur, mais pas depuis d'autres appareils de votre réseau. Si vous souhaitez effectuer des tests à partir d'autres appareils locaux, configurez votre firebase.json comme suit :

"emulators": {
    // ...

    "hosting": {
      "port": 5000,
      "host": "0.0.0.0"
    }
  }

Générer des jetons d'authentification pour les workflows d'intégration continue

Si vos workflows d'intégration continue reposent sur Firebase Hosting, vous devrez vous connecter à l'aide d'un jeton pour exécuter firebase emulators:exec. Les autres émulateurs ne nécessitent pas de connexion.

Remarque : Si vous avez configuré l'hébergement dans firebase.json, mais que vous n'en avez pas besoin dans les configurations de test CI, utilisez l'indicateur --only pour emulators:start ou emulators:exec afin d'inclure uniquement les émulateurs dont vous avez besoin.

Pour générer un jeton, exécutez firebase login:ci dans votre environnement local. Cette opération ne doit pas être effectuée à partir d'un système CI. Suivez les instructions pour vous authentifier. Vous ne devriez avoir besoin d'effectuer cette étape qu'une seule fois par projet, car le jeton sera valide pour toutes les versions. Le jeton doit être traité comme un mot de passe. Veillez à le garder secret.

Si votre environnement d'intégration continue vous permet de spécifier des variables d'environnement utilisables dans les scripts de compilation, il vous suffit de créer une variable d'environnement appelée FIREBASE_TOKEN, dont la valeur est la chaîne du jeton d'accès. La CLI Firebase récupérera automatiquement la variable d'environnement FIREBASE_TOKEN et les émulateurs démarreront correctement.

En dernier recours, vous pouvez simplement inclure le jeton dans votre script de compilation, mais assurez-vous que les tiers non fiables n'y ont pas accès. Pour cette approche codée en dur, vous pouvez ajouter --token "YOUR_TOKEN_STRING_HERE" à la commande firebase emulators:exec.

Et maintenant ?

• Exécutez un guide de démarrage rapide à l'aide de l'émulateur Hosting en suivant l'atelier de programmation Web Firebase.
• Découvrez comment prototyper des fonctions HTTPS à l'aide de l'émulateur Hosting, comme décrit dans les guides d'hébergement pour les fonctions.
• Pour découvrir un ensemble organisé de vidéos et d'exemples détaillés, consultez la playlist de formation sur les émulateurs Firebase.