Alex Peter Hall

Quickly Install Firebase Local Emulators

Date: 14 Apr 2023 | Reading Time: 2 minutes

Bonfire on beach at night

This post will show you how to quickly install the Firebase Local Emulators on Mac. It assumes you already have a Firebase project created, an existing project you want to connect to Firebase, and are comfortable using the command line. These are the bare-bones commands you need to get the emulators up and running. I recommend you still take the time to read the documentation linked at the bottom to fully understand the emulators.

Make Sure You Have Java

No, not coffee. The emulators need Java Developer Kit (JDK) version 11 or greater installed on your system to run. Guess how I found this out. :)

Use javac -version to verify your JDK version/install. If you don't have it, download and run the installer before proceeding.

Install Firebase CLI

Install the Firebase CLI curl -sL <https://firebase.tools> | bash.

The above command will ask for your local machine password to proceed with the install.

After installing you need to authenticate with firebase login.

Test it out with firebase projects:list. You should get back a nicely formatted list of all your Firebase projects.

Install Firebase Emulators

Navigate to your project directory and run firebase init and follow the prompts to initialize Firebase for your project. This will add a few Firebase configuration .json files to your project directory. I only wanted the Realtime Database and Authentication emulators for this project so I did not install the others.

Fire (lame pun intended) it up! firebase emulators:start

Terminal output for start emulator command

The Firebase Emulator has a slick UI that runs on your localhost using whatever ports you setup during the initial configuration. Click the link from the above output in your console to open it in a browser.

Screenshot of the Firebase Emulator UI

Seed and Persist Test Data

You can easily seed test data into your emulated database so you have data to work with while developing locally. You'll need a directory you can point to that contains your test data JSON file. Then you can import this data when you start up the Firebase emulators.

# My import directory is called test_data in this example.
# You need to provide a path to a directory, not to the data file itself!
firebase emulators:start --import=./test_data --export-on-exit

The --export-on-exit flag will automatically export the emulator data with any changes you've made to the same directory you used for import when you quit the emulators. You can provide a different directory for export if you prefer as well.

When the emulator starts up it will create a new database named after your import file. I found that the database rules setup in database.rules.json only apply to the default database. If you name your import file (and therefore your database) something else, they won't work. So it's easiest to just name your data import file the same as your default database. It will look something like the string after ns= in the example below. If anyone knows how to make the database rules apply to other database names please let me know.

//Ex.
let config = { databaseURL: 'http://127.0.0.1:9000/?ns=myApp-31aou-default-rtdb' }

Add a script to your package.json to make this easy to start up.

  "scripts": {
"firebase": "firebase emulators:start --import=./test_data --export-on-exit",
},

Now you can just npm run firebase and you're off to the races.

Conclusion

You are now ready to connect your app to the local emulator and start developing locally. If you are using Firebase you should do this as soon as possible, even if you are just getting started with a side project. It gives you the ability to quickly and safely develop against Firebase services locally without an internet connection. Another large benefit if you are using Firestore or Realtime Database is you can safely wipe the local database and easily re-seed test data. Now go forth and build.

Sources

Firebase Docs: Firebase CLI reference
Firebase Docs: Install, configure and integrate Local Emulator Suite
VIDEO - The Local Firebase Emulator UI in 15 minutes