Firebase Emulator: Firebase Services on Localhost

I was working on a project with Firebase Cloud Firestore; Like every other project in development, there would be testing, which would involve repeatedly creating, reading, updating, and deleting fake (test) data to the database.

The problems with this were:

1. I had to manually delete data on the database I no longer needed, every time I thought I was done testing.

2. I had to manually delete collections, documents and fields every time I changed the data structure.

3. I needed to be connected to the internet to use Firebase services. Data (Internet) is expensive, and some of us want to be able to work offline as much as possible.

4. I could easily alter production data during testing. If you’re like me and you’ve made this mistake before, you know how bad it can get 😅

I sought a solution around this when I stumbled upon Firebase Emulators. As always, I had to share the good news with you guys.

What is Firebase Emulator?

Firebase Emulator or Firebase Local Emulator Suite is a tool that allows developers to use firebase services locally. As the name implies, it emulates the behaviour of the Firebase console so you are able to use the Cloud Firestore, Realtime Database, Authentication, and so on, locally so it’s separate from your actual console and production data. You can carry out all your testing, CRUD data on your emulator and switch back to your production environment when you’re done or don’t need the data anymore. All these is done on your localhost so you wouldn’t need to be connected to the internet to use the Firebase services on the Emulator.

Platform Support

Firebase Emulator supports Flutter Android, iOS and Web. The Firebase services you can use on the emulator of these platforms are

• Authentication
• Cloud Firestore
• Realtime Database
• Cloud Storage
• Cloud Functions

Integrate Firebase

Integrating Firebase emulator is as easy as integrating Firebase into your project.

First, we create our Firebase Project and connect and configure it to your Flutter project.

Add the following packages to pubspec.yaml file:

firebase_core: ^2.3.0
cloud_firestore: ^4.1.0

Don’t forget to initialize Firebase and ensureWidgetFlutterBinding

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  runApp(const MyApp());
}

Now we have completed setting up our Firebase.

The main order of business, setting up our emulator.

Setting up Firebase Emulator

Open up the terminal at the root of your project and run

firebase init

—? Which Firebase features do you want to set up for this directory?

• Select Emulators from the list of choices.

— ?Please select an option:

• We’ve already created a Firebase project so we’ll select use an existing project

— ?Select a default Firebase project for this directory:

• Select the project from your list of projects.

— ?Which Firebase emulators do you want to set up?

• Select the Firebase service you would like to use. I’m using just Firestore Emulator for now, we can always modify this later.

— ?Which port do you want to use for the firestore emulator? (8080)

• Press Enter to use the default port.

— ?Would you like to enable the Emulator UI?

- Yes

— ?Which port do you want to use for the Emulator UI (leave empty to use any available port)?

- Press Enter

— ?Would you like to download the emulators now? (y/N)

- Yes

When the initialisation is complete, start your emulator by typing this in your terminal:

firebase emulator:start

The emulator has started, to view it, navigate to the localhost URI provided.

This brings you to the Emulator UI, navigate to the service you need and use like the Firebase console.

Using the Firestore Emulator

To use the emulator anywhere, all you have to do is

1. Initialise your Firestore

2. Define your localhost; the host is different for Android and iOS

3. Point the db to Emulator. You must do this before using any of the Firestore functions.

Note: Avoid passing production credentials to Firebase Emulator services as Emulator traffic is not encrypted.

Tip: A simple way to switch between the Firebase emulator and your main Firebase service is to declare a bool and name it something like emulatorEnabled, then use it as a conditional on whether to point Firebase to the emulator or not.

You’re all set!

Let me know if you have any comments or questions about the Firebase Emulator Suite.