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

Avant de commencer à créer des prototypes et à tester votre application Web avec l'émulateur Firebase Hosting, assurez-vous de comprendre le workflow global de Firebase Local Emulator Suite, et d'installer et configurer Local Emulator Suite, puis d'examiner 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 une grande partie des fonctionnalités disponibles dans Hosting de production. L'émulateur Hosting vous permet d'effectuer les actions suivantes:

• Créez des prototypes de vos sites statiques et de 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
• Tester des sites et des applications Web dans des workflows d'intégration continue conteneurisés

Choisir un projet Firebase

Firebase Local Emulator Suite émule des 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 de l'émulateur.

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

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

Type de projet	Fonctionnalités	Utiliser avec des émulateurs
Situation réelle	Un projet Firebase réel est celui que vous avez créé et configuré (le plus souvent via la console Firebase). Les projets réels disposent de ressources en ligne, 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 véritables projets Firebase, vous pouvez exécuter des émulateurs pour tous les produits compatibles ou certains d'entre eux. Pour tous les produits que vous n'émulez pas, vos applications et votre code interagissent avec la ressource en direct (instance de base de données, bucket de stockage, fonction, etc.).
Démo	Un projet Firebase de démonstration ne comporte aucune configuration réelle de Firebase et aucune ressource en ligne. Pour accéder à ces projets, vous devez généralement utiliser des ateliers de programmation ou d'autres tutoriels. Les ID de projet des projets de démonstration portent le préfixe demo-.	Lorsque vous travaillez avec des projets Firebase de démonstration, vos applications et votre code n'interagissent qu'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.

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

• Configuration plus simple, car vous pouvez exécuter les émulateurs sans avoir à créer un projet Firebase
• Sécurité renforcée, car si votre code appelle accidentellement des ressources non émulées (de production), il n'y a aucune chance de modification, d'utilisation et de facturation des données.
• 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 entre services, telles que des Cloud Functions ou des Rules déclenchées par la base de données qui reposent 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 principal

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

1. (Facultatif) Par défaut, votre application hébergée localement interagit avec des ressources de projet réelles, et non émulées (fonctions, base de données, règles, etc.). Vous pouvez également connecter votre application à des 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 la CLI (généralement http://localhost:5000).

4. Pour appliquer les modifications à l'URL locale, actualisez votre navigateur.

Tester depuis d'autres appareils locaux

Par défaut, les émulateurs ne répondent qu'aux requêtes 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 aucune 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 sur emulators:start ou emulators:exec pour n'inclure que 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 tous les builds. Le jeton doit être traité comme un mot de passe. Veillez à le garder secret.

Si votre environnement de CI vous permet de spécifier des variables d'environnement pouvant être utilisées dans les scripts de compilation, créez simplement une variable d'environnement appelée FIREBASE_TOKEN, dont la valeur est la chaîne de jeton d'accès. La CLI Firebase détecte automatiquement la variable d'environnement FIREBASE_TOKEN, et les émulateurs démarrent correctement.

En dernier recours, vous pouvez simplement inclure le jeton dans votre script de compilation, mais assurez-vous que les parties non approuvées 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 créer des prototypes de 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, suivez la playlist de formation sur les émulateurs Firebase.