Firebase Emulators Suite — Cloud Functions, Database, Firestore and Hosting

The most popular post I have so far is about sending email with Cloud Functions for Firebase and Nodemailer. This is due to the high popularity of this tool.

This popularity is more than fair given the great power that Firebase offers in application development. But a major difficulty that existed were the tests. In this post that was cited for example, whenever we were to test something we had to deploy the function and only then send a request to test.

When there was an integration with Cloud Firestore then that would get more complicated. But behold, the gods of Google answered our cry and at Firebase Summit 2019 (which was amazing) they brought a wonderful new feature, the Firebase Emulators Suite .

And since I needed to help a friend migrate client features to Cloud Functions, and Emulators was very useful I decided to share in the hope that it will be useful for you too.

So in this post you and I will learn a little about Firebase Emulators Suite. Well, let’s go.

By the way the post about Cloud Functions is this one:

Cloud Functions for Firebase, sending e-mail

When you finish this you can check it out.

Step 1: What is it and why do I need it?

The both questions can be answered by docs. From docs we have.

The Firebase Local Emulator Suite is a set of advanced tools for developers looking to build and test apps locally using Cloud Firestore, Realtime Database, Cloud Functions for Firebase and Firebase Hosting. Local development with Local Emulator Suite can be a good fit for your prototyping, development and continuous integration workflows.

Basically with Emulator Suite you have the power of some Firebase tools in your local machine. With this you can debug, check logs and so on.

To better understand the concept let’s connect a web application to our emulator. In this post we will do some test functions and a database with Cloud Firestore.

Step 2: Setup Emulators Suite

First of all we need to setup our emulators and to do this we’ll need of Firebase CLI; so if you don’t have it you can install with this command:

npm install -g firebase-tools

NOTE: Currently the emulators suite can’t run on a Node version greatet than 10.

Once you have the Firebase CLI you need to login in your account with the command:

firebase login

Once you have authenticated you can now crate a Firebase project; so get move to a folder and run this command:

firebase init

This command will initialize a Firebase project and you’ll can select a project, define the set of tools to work with them. After we’ll need to add some setting to our tools.

Image 1 — firebase init command

As you can see in the above image. We added four tools, Database, Firestore, Functions and Hosting. The only tools that can be emulated now. After that we need to setup our project.

Image 2 — Project setup

As you can see, I’ve been selected a existing project, you can create it if ou don’t have yet. The setup follows for Database and here we only need to define the JSON file for Database Rules.

Image 3 — Database Setup

For the Firestore we have a file for Firestore Rules and a file for Firestore Indexes.

Image 4 — Firestore Setup

For Functions wee choose a language between JS and TS, set if we’ll use ESLint and install depencencies.

Image 5 — Functions Setup

And finally for Hosting wee need to define a folder to serve our files to host.

Image 6 — Hosting Setup

NOTE: In the most parte of this setup we used the default values.

So you think. Well I configured a Firebase Project, that is awesome. But where is the Emulators Setup?

Well lucky for you, that’s all. After you need only to start the emulators with the command:

firebase emulators:start

You’ll see someone like

Image 7 — Emulators Runnig

Maybe some JAR files will be downloaded. In our case only the firebase-database-emulator was dowloaded. This is because we already have the others emulators in our machine.

Awesome!! Our emulators is running, let’s connect an app.

Step 3: Connecting our app

First in our directory we’ll create a index.html file with the following content:

In this code you can see some script imports. So the first is the core of Firebase SDK JavaScript and the others imports are for each tool of Firebase.

Let’s connect our app to emulators. As you saw in the Image x, emulators are started in specifics address. In our example Functions are running at http://localhost:5001, Firestore at http://localhost:8080 and so on.

So our app need to appoint to this addresses and this is very simple. Check it out:

...
<script>
const firebaseConfig = {
    projectId: 'happy-todolist',
    databaseURL: "http://localhost:9000?ns=happy-todolist"
};
const app = firebase.initializeApp(firebaseConfig);
app.functions().useFunctionsEmulator('http://localhost:5001');
var db = firebase.firestore();
db.settings({host: "localhost:8081",ssl: false});
</script>

This is the Firebase Initialization. The big difference from the normal initialization is that we configured the tools to appoint to local.

Now we can run our tests locally. In the next section we have a simple test.

Step 4: A simple test

Our test is very simple. We have a propt to get the name of user and add this name to the Firestore and Realtime Database. There are two functions to run when a data created in Firestore and in Database.

Check our full index.html

Full index.html

This same code already shown earlier. The difference is that we add some HTML elements and make use of them in JavaScript to display the list of items in Realtime Database and Cloud Firestore.

As you can see, we have a collection called users in Firestore and a ref with the same name in the Realtime Database. So we get the user name from prompt and add to both.

At the same time, we listen to the collection with the onSnapshot method and listen the ref with the on method.

So in the both method we populate the respective <ul> element in the page. The result is:

Image 8 — HTML page resul

Hey, but we only add the name to our record. Why I see a field named createdAt?

Hey, do you remember our functions? Our functions are responsible for that.

We create two functions to execute when new data is added. The same functions are executed and add a new field to the new data.

Our functions:

Full index.js

Our functions are triggered at onCreate and we can see the execution of both in the terminal when a new user is added as you can see:

Image 9 — Functions execution

Yes!! We have the tools of Firebase working together in our machine we can fell the power!!!

But wait. Where is the Firebase Hosting?
So, the Hosting is most simple tool here and we used the default configuration that created two files in our workspace. An index.html and a 404.html.

You can change these files and make them suit your needs. To test it you can open the address: http://localhost:5000. You’ll see some like:

Image 10 — Hosting demo

But hey and the production?
After prototyping you just need to run the firebase deploy command to submit all your changes. Also remember to put your project settings you get there in the Firebase Console.

Conclusion

As you saw we can get the power of Firebase in our local machine and this can be made with a simple setup. This is perfect for your data modeling tests, new features test, query tests, test the triggers in the Cloud Functions, etc.

This really a lab where you can prototype and after all you can publish that with a simple command and this is really awesome!

So, what are you waiting for? Start deploying and testing that new feature you were wanting to add, do that client role migration to cloud functions, do everything Firebase allows, because now you can.

That’s all, thanks for reading. See ya!