Firebase Emulator Suite - Mini Project: Build & Apply

Firebase Emulator Suite Setup

📖 Scenario: You are building a local development environment for a Firebase project. You want to test your app's backend features without touching the live cloud services. This helps you develop safely and quickly.

🎯 Goal: Set up the Firebase Emulator Suite configuration to run Firestore and Authentication emulators locally.

📋 What You'll Learn

Create a Firebase configuration file with emulator settings

Add emulator ports for Firestore and Authentication

Configure the Firebase app to connect to the local emulators

Complete the setup so the app uses the emulators instead of live services

💡 Why This Matters

🌍 Real World

Developers use the Firebase Emulator Suite to test backend features locally without risking live data or incurring costs.

💼 Career

Knowing how to set up and use Firebase emulators is essential for safe and efficient Firebase app development and testing.

1

Create Firebase Emulator Configuration File

Create a file named firebase.json with a emulators section that includes firestore on port 8080 and auth on port 9099.

Firebase

{
  "emulators": {
    // Your code here
  }
}

Need a hint?

The firebase.json file tells Firebase which emulators to run and on which ports.

2

Add Emulator Host Configuration Variables

In your app's main JavaScript file, create two constants named firestoreHost and authHost with values 'localhost' and ports 8080 and 9099 respectively.

Firebase

{
  "emulators": {
    "firestore": {
      "port": 8080
    },
    "auth": {
      "port": 9099
    }
  }
}

// Your code here

Need a hint?

These constants will help your app connect to the local emulators.

3

Connect Firebase App to Local Emulators

Use the Firebase SDK functions connectFirestoreEmulator and connectAuthEmulator to connect your Firestore and Auth instances to the emulators using the constants firestoreHost, firestorePort, authHost, and authPort.

Firebase

const firestoreHost = 'localhost';
const authHost = 'localhost';
const firestorePort = 8080;
const authPort = 9099;

// Your code here

Need a hint?

These functions tell your app to use the local emulators instead of the live Firebase services.

4

Complete Emulator Suite Setup

Add the firebase emulators:start command to your package.json scripts section under the key start:emulators to run the Firebase Emulator Suite.

Firebase

import { getFirestore, connectFirestoreEmulator } from 'firebase/firestore';
import { getAuth, connectAuthEmulator } from 'firebase/auth';

const firestore = getFirestore();
const auth = getAuth();

connectFirestoreEmulator(firestore, firestoreHost, firestorePort);
connectAuthEmulator(auth, `http://${authHost}:${authPort}`);

// Your code here

Need a hint?

This script lets you start all configured emulators with one command.