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

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

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

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

L'Firebase Hosting émulateur fournit une émulation locale haute fidélité des Hosting services, offrant une grande partie des fonctionnalités disponibles dans l'environnement de production Hosting. 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 Hosting
• Tester des sites et des applications Web dans des workflows d'intégration continue conteneurisés

Choisir un projet Firebase

Le 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'indicateur --project à chaque commande d'émulateur.

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

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, car 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 prise en charge hors connexion, car il n'est pas nécessaire d'accéder à Internet pour télécharger la configuration de votre SDK.

Workflow de prototypage de base

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

1. (Facultatif) Par défaut, votre application hébergée en local 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 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 de votre répertoire de 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 mettre à jour l'URL locale avec les modifications, actualisez votre navigateur.

Tester à partir 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é à partir du navigateur Web de votre ordinateur, mais pas à partir 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 dépendent de 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.

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 d'intégration continue. Suivez les instructions pour vous authentifier. Vous ne devriez avoir à effectuer cette étape qu'une seule fois par projet, car le jeton sera valide pour toutes les compilations. Le jeton doit être traité comme un mot de passe. Assurez-vous qu'il reste secret.

Si votre environnement d'intégration continue 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 Firebase CLI récupère automatiquement la FIREBASE_TOKEN variable d'environnement, et les émulateurs démarrent correctement.

En dernier recours, vous pouvez simplement inclure le jeton dans votre script de compilation, mais assurez-vous que des 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 firebase emulators:exec commande.

Et maintenant ?

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