[Firebase] Everything you need to know to setup Firebase and GCP emulators — Part 1

Generally speaking, cloud helps us to optimize computing costs based on our demands and takes away unnecessary overhead of purchasing, maintaining and forecasting hardware needs. But cloud makes it difficult for us to test our apps locally. Good thing is, Google provides a bunch of emulators to help us test our apps locally without incurring cloud costs.

But if you are pulling an all-nighter and not careful, your GCP bill will be on 🔥🔥🔥

So, to avoid a heart attack at the end of the month, you need to devote your maximum attention while setting up the emulators. BTW, setting up the emulators is not hard but doing it right is crucial.

Emulators provided by the Google Cloud Platform are —

1. Firebase Functions
2. Firebase Hosting
3. Firebase Firestore
4. Firebase Realtime Database
5. Google Cloud Spanner
6. Google Cloud BigTable
7. Google Cloud PubSub
8. Google Cloud DataStore

Setting up the above emulators require zero to minimum code change depending on from where(client or server) your code is using GCP.

In this part, we look at setting up Firebase Emulators. For Google Cloud Platform emulators, check out this part —

[GCP] Everything you need to know to setup Firebase and GCP emulators — Part 2

Installing Emulators —

Firebase

If you haven’t setup your firebase project already in your working directory, go ahead and do it with the command —

firebase init

You can install the emulators while initialising your firebase project or later with the command —

firebase init emulators

Firebase CLI provides 5 emulators to install. You can install whatever emulators you like from the list. After installing the emulators, in your firebase project directory, you can see firebase.json file. That contains all the info about your emulators. You can change the port numbers and path to your rules json files.

Note: Firebase and GCP offers same emulators for pubsub and firestore. You can install it using either one of them.

firebase.json

Note: I have intentionally skipped installing Hosting emulator. You’ll know why in a moment.

To run the firebase emulators —

# To start all emulators
firebase emulators:start
# To start only selected emulators
firebase emulators:start --only functions firestore [other emulators]

Let’s go through each one of them —

1. It shows the list of emulators started
2. Do you still remember that I didn’t setup a Hosting emulator? This is what I want to show you. Firebase CLI is kind enough to warn that “Hey! for whatever reason, you are not running [this] emulator. So, be careful as your test runs will hit your production servers”
3. Those are the logging files for each emulator
4. These URLs are the cloud functions URLs for your local emulator. These can be used to call your cloud functions from client side code.
5. This one uses “triggers”. I have setup a function trigger to be run after every upload to Cloud Storage. The thing is, firebase doesn’t provide a Cloud Storage emulator, so the cloud function is being ignored. If you have a Cloud Firestore triggers, it will be executed only if you enable the Cloud Firestore emulator.
6. You can visit the mentioned URL to visit the UI of Firebase Emulators.

Firebase Emulator Suite UI

If you look at the image carefully, you can see Firestore and Realtime Database tabs. You can use those tabs to insert or view your data just like you do it in the Firebase Console.

But there is a bug in Firestore UI where the data is being written from the Firebase SDKs but you can’t see the data visually. I have commented a workaround on this bug. Check out if you experience the same bug —

Firebase real time database at local emulator is not showing updated data · Issue #2322 ·…

For example if you have created a document at the path in your code —

list/users/1003/details

Then create a dummy document in the same path through Emulator UI —

list/users/dummy

Now you can see your original data.

Install, configure and integrate Local Emulator Suite | Firebase

Now we are done with Installing all Firebase specific emulators. Let’s move on to using the emulators.

Using Emulators

The above visualisation should be self explanatory on how the emulator works.

Firebase

There are 2 cases you have to consider while using firebase emulators in your code —

1. Client-side code accessing Firebase products
2. Server-side code accessing Firebase products

Firebase Client-side code —

If you are using Firebase products, you can access the backend directly from the client code using Firebase Client SDKs.

There is one important step to follow to make sure the Firebase Client SDKs are hitting emulators — Point the Firebase Client SDK to your localhost:port.

Firebase Functions:

In Firebase Functions, there are 3 types to invoke a function:

1. Callable Functions
2. HTTPS Functions
3. Trigger Functions

Callable Functions:

While initialising the functions, pass the localhost:port

Link:

Call functions from your app | Firebase

Connect your app to the Cloud Functions Emulator | Firebase

HTTPS Functions:

If you are using axios, fetch etc type of libraries to run the functions, use the URL returned by the Firebase CLI

Use the URL returned by Firebase CLI tool like mentioned in 4.

Trigger Functions:

There is no setup required for using trigger functions.

Firebase Firestore:

While initialising the Firestore, pass an object to point it to the localhost —

Link:

Connect your app to the Cloud Firestore Emulator | Firebase

Firebase Realtime Database:

While initialising the Firebase object, pass an object to point it to the localhost —

Link:

Connect your app to the Realtime Database Emulator | Firebase

Firebase Server-side code —

If you are using Firebase admin SDK to interact with the firebase products then the good news is, you don’t have to do any additional work to make it work with the Firebase Emulators.

Remember the firebase.json? It is used by the Firebase admin SDK to find out in which port our emulators are running. If any emulator is not running, then Firebase admin SDK hits your production server (remember the warning about Hosting emulator not running while starting the emulator?). If the emulator is running, then the SDK hits your emulator. How convenient ❤️

That’s it

https://giphy.com/gifs/b5Cj0cAsg3buE

You must be feeling tired going through all those commands, codes and links.

So, go ahead and bookmark it and don’t be selfish! Share it with fellow developers to help them out

Want to contact me? Twitter.com/@SkrewEverything.

Found any mistakes or got anything to say? Comment down below.

Liked it? 👏👏👏 it ( come on! If I can spend this much time to write then you can spend few seconds to clap it 50 times 🤷) and Share it.