How to Configure Firebase Emulator: Setup and Usage Guide

To configure the firebase emulator, install the Firebase CLI, initialize the emulator with firebase init emulators, and set the services you want to emulate in firebase.json. Then start the emulator using firebase emulators:start to run Firebase services locally.

Syntax

The Firebase Emulator configuration involves these main steps:

• firebase init emulators: Initializes emulator settings in your project.
• firebase.json: The config file where you specify which emulators to run and their ports.
• firebase emulators:start: Starts the configured emulators locally.

Each emulator service (like Firestore, Auth) can be enabled with its port and options inside firebase.json.

json

{
  "emulators": {
    "firestore": {
      "port": 8080
    },
    "auth": {
      "port": 9099
    },
    "ui": {
      "enabled": true,
      "port": 4000
    }
  }
}

Example

This example shows how to configure Firestore and Authentication emulators with the Emulator UI enabled. It demonstrates local testing setup for these Firebase services.

json

{
  "emulators": {
    "firestore": {
      "port": 8080
    },
    "auth": {
      "port": 9099
    },
    "ui": {
      "enabled": true,
      "port": 4000
    }
  }
}

Output

✔  emulators started successfully
Firestore Emulator running at http://localhost:8080
Authentication Emulator running at http://localhost:9099
Emulator UI running at http://localhost:4000

Common Pitfalls

Common mistakes when configuring Firebase emulators include:

• Not enabling the Emulator UI, which helps monitor running emulators.
• Port conflicts if other services use the same ports.
• Forgetting to start the emulators with firebase emulators:start.
• Not updating client SDKs to connect to the local emulator endpoints.

Always check firebase.json ports and ensure no other apps block them.

json

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

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

Quick Reference

Tips for configuring Firebase Emulator:

• Run firebase init emulators to set up your project.
• Specify each emulator and port in firebase.json.
• Enable the Emulator UI for easier management.
• Use firebase emulators:start to launch all configured emulators.
• Update your app code to connect to emulator endpoints during development.

Key Takeaways

Use firebase init emulators to configure emulators in your project.

Define emulator services and ports in firebase.json for local testing.

Start emulators with firebase emulators:start to run them locally.

Enable the Emulator UI for easy monitoring and control of running emulators.

Avoid port conflicts and update your app to connect to emulator endpoints.