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
  }
}

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

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

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

Hint

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

Practice

1. What is the main purpose of the Firebase Emulator Suite?

easy

A. To monitor live user data in real time

B. To deploy Firebase apps directly to production

C. To run Firebase services locally for safe app testing

D. To backup Firebase databases automatically

Solution

1. Step 1: Understand Firebase Emulator Suite role

   The Emulator Suite runs Firebase services on your computer, not on the cloud.

2. Step 2: Identify its main use

   It allows safe testing without affecting real data or users.

3. Final Answer:

   To run Firebase services locally for safe app testing -> Option C

4. Quick Check:

   Local testing = Safe app development [OK]

Hint: Emulator = local safe testing environment [OK]

Common Mistakes:

• Confusing emulator with live deployment
• Thinking it monitors real user data
• Assuming it backs up data automatically

2. Which command starts the Firebase Emulator Suite with Firestore and Authentication emulators only?

easy

A. firebase emulators:start --only firestore,auth

B. firebase start --emulators firestore auth

C. firebase emulators:run firestore auth

D. firebase launch --services firestore,auth

Solution

1. Step 1: Recall correct Firebase CLI syntax

   The command to start emulators uses 'firebase emulators:start' with '--only' to specify services.

2. Step 2: Match correct option

   firebase emulators:start --only firestore,auth uses the exact syntax: 'firebase emulators:start --only firestore,auth'. Others are invalid commands.

3. Final Answer:

   firebase emulators:start --only firestore,auth -> Option A

4. Quick Check:

   Correct CLI syntax = firebase emulators:start --only firestore,auth [OK]

Hint: Use 'firebase emulators:start --only' to pick services [OK]

Common Mistakes:

• Using 'firebase start' instead of 'firebase emulators:start'
• Omitting '--only' when selecting emulators
• Wrong command verbs like 'run' or 'launch'

3. Given this command: firebase emulators:start --only database, what will happen?

medium

A. The Authentication emulator will start alongside database

B. Only the Realtime Database emulator will start

C. The command will fail due to missing Firestore emulator

D. All Firebase emulators will start except database

Solution

1. Step 1: Analyze the command's '--only' flag

   The '--only database' means start only the Realtime Database emulator.

2. Step 2: Understand emulator behavior

   No other emulators start unless explicitly listed.

3. Final Answer:

   Only the Realtime Database emulator will start -> Option B

4. Quick Check:

   '--only database' = start database emulator only [OK]

Hint: '--only' limits emulators to listed services [OK]

Common Mistakes:

• Assuming all emulators start by default
• Thinking Firestore or Auth start automatically
• Believing command fails without Firestore

4. You run firebase emulators:start --only firestore,auth but get an error saying the port is in use. What should you do?

medium

A. Uninstall and reinstall Firebase CLI

B. Restart your computer to free all ports

C. Remove the '--only' flag and try again

D. Change the emulator ports in the firebase.json config file

Solution

1. Step 1: Understand port conflict cause

   Port in use means another app or emulator uses the same port number.

2. Step 2: Fix by changing ports in config

   Modify ports in firebase.json under 'emulators' section to unused ports.

3. Final Answer:

   Change the emulator ports in the firebase.json config file -> Option D

4. Quick Check:

   Port conflict fix = change ports [OK]

Hint: Edit firebase.json ports to avoid conflicts [OK]

Common Mistakes:

• Restarting computer without checking ports
• Removing '--only' does not fix port issues
• Reinstalling CLI unnecessarily

5. You want to test your app's Firestore rules locally and also simulate Authentication sign-in. Which setup is best?

hard

A. Run Firebase Emulator Suite with Firestore and Auth emulators, then connect your app to them

B. Use only Firestore emulator since Auth is not needed for rules testing

C. Test rules on live Firestore with test user accounts

D. Run Authentication emulator alone and skip Firestore emulator

Solution

1. Step 1: Identify testing needs

   You need Firestore emulator for rules and Auth emulator to simulate sign-in.

2. Step 2: Choose setup that covers both

   Running both emulators locally and connecting your app allows full safe testing.

3. Final Answer:

   Run Firebase Emulator Suite with Firestore and Auth emulators, then connect your app to them -> Option A

4. Quick Check:

   Test rules + auth = run both emulators [OK]

Hint: Run all needed emulators together for full local testing [OK]

Common Mistakes:

• Skipping Auth emulator when testing sign-in
• Testing rules on live data risking real users
• Running only one emulator when both needed