2020 Firebase Emulator UI

Firebase provides an excellent tool for developers to test their codes locally before deploying to Firebase server. It supports totally 5 Firebase features:

1. Cloud Firestore — A noSQL database
2. Realtime Database — Predecessor of Cloud Firestore
3. Cloud Functions — A set of server codes which runs on Google server. Functions can be triggered by HTTP requests and Firebase events, e.g. Firestore CRUD, Firebase Auth and Firebase CloudStorage event, etc.
4. Cloud Pub/Sub — A scheduler of certain server functions which can be executed periodically
5. Firebase Hosting — A tool for hosting a webpage and assets

By running Firebase Emulator UI, your computer is turned into a local Firebase server and you can test all your codes instantly. Different module emulators are running at different ports shown below:

In this article, I will cover the details on setting up and some tricks about Firebase Emulator. Let’s start!

Setup with 6 steps

Step 1) Install Firebase CLI tools

npm install -g firebase-tools

Step 2) Emulator installation

During Firebase project initialisation, “Emulators” can be selected and installed. Run the following command at Terminal:

firebase init

Step 3) Select the Firebase features that you want to simulate locally

Step 4) Define the port for different Firebase features

Step 5) Start emulator

Emulator can be started with empty data by the following simple command:

firebase emulators:start

If you want to have some initial data, add the --import parameter to the start command. It will be discussed in details in the coming session “Import and export simulated data”

firebase emulators:start --import=./fooSimulatedDataDirectory --export-on-exit

Step 6) Test with Cloud Function

If you have implemented Cloud Function, the url shown at the Terminal is updated to the new local domain (localhost:5001). You can make a call and see the data is actually uploaded to Firebase Emulator instead of remote Firebase server.

Issue on port management

Port is limited in each computer, it is possible that Firebase Emulator wants to use a port (e.g. 8080 for Firestore) but it is already used by other application. At this moment, Firebase Emulator will fail with error shown below:

Error: Could not start Firestore Emulator, port taken.

The solution is simple. Just running the following command at Terminal and all currently active port information will then be shown:

sudo lsof -i -n -P | grep TCP

After getting the process ID of the specific port (e.g. 8080 for Firestore). The process can be stopped by running the following command:

kill 63550

Finally, the command for starting Firebase Emulator can be run successfully!

firebase emulators:start

Limitation on Firebase Emulator

Although Firebase Emulator can simulate the event triggered from Cloud Firestore, Realtime Database, Hosting and Pub/Sub, it cannot simulate the following events:

1. Triggered from user creation and deletion in Firebase Auth
2. File upload and deletion in Cloud Storage

Import and export simulated data

By default, Firebase Emulator would clear all simulated data once it is shut down. It is often necessary to save the simulated data and share with other team members for development and quality assurance.

Therefore, we should use the following commands:

Export data to directory

firebase emulators:export ./fooSimulatedDataDirectory

Start emulator with initial data

firebase emulators:start 
--import=./fooSimulatedDataDirectory

Start emulator with initial data and export data once it is shut down

firebase emulators:start 
--import=./fooSimulatedDataDirectory 
--export-on-exit=./newFooSimulatedDataDirectory
// If not specifying the export directory, import directory is used.
firebase emulators:start 
--import=./fooSimulatedDataDirectory 
--export-on-exit

Reference: Firebase Official Documentation

Summary

1. Firebase provides emulators for Cloud Firestore, Realtime Database, Hosting, Cloud Functions and Pub/ Sub.
2. Firebase Emulator clears data every time it is terminated. Developer should define the path for exporting simulated data and import the data every time the emulator is started.
3. Firebase Emulator cannot simulate everything for Cloud Functions. It can only simulate the events triggered by Cloud Firestore, Realtime Database and Pub/ Sub. If you want to test on some other features, you should better open another Firebase project for testing only.

References & Readings :

1. Firebase Local Emulator

Run functions locally | Firebase

2. Firebase Local Emulator UI

Introduction to Firebase Local Emulator Suite

You are welcome to follow me at Twitter@myrick_chow for more information and articles. Thank you for reading this article. Have a nice day! 😄