DEV Community

Cover image for Firebase emulator setup
Dennis kinuthia
Dennis kinuthia

Posted on

6 3

Firebase emulator setup

#firebaseemulator #firebase #firebasecli #localdevelopment

Firebase is cool and all but you'll run through your free allowance fast if you choose to develop while teasting on the live servers,
because it's one accidental infinite loop away from making one too many requests.
That's why they developed firebase emulator a local testing tool which simulates firestore,authentication ,functions, storage and hosting with more features in the works .

for the detailed insatllation process
installation procedure

for the quic setup guide run

npm install -g firebase-tools
Enter fullscreen mode Exit fullscreen mode

to install the firebase cli
then login by running

firebase login
Enter fullscreen mode Exit fullscreen mode

then check the firebase version

firebase --version
Enter fullscreen mode Exit fullscreen mode

in your projects root directory ,
start configuring by running

firebase init
Enter fullscreen mode Exit fullscreen mode

fire base init screen

In our case we need firestore ,functions and emulators , space bar to select then enter to confirm

firebase services we need

at this point you'll need to connect your existing firebase project or create one if you don't have one

select firebase project

now let's set up firebase , accept the defaults

emulator firestore setup

select javascript for functions and accept the defaults too and select the firestore,functions and authentication emulators

select emulators

then select localhost ports for the services ,the defaults willbe good too . also select to enable the emulator UI

select emulator ports

then allow download of the emulators
and finally strt up te emulators

firebase emulators:start
Enter fullscreen mode Exit fullscreen mode

firestore also lets you import production data for firestore when you start the emulators
for that you'll need:

  • the gcloud cli download

  • your project needs to be on at least the blaze plan

the run

gcloud projects list
Enter fullscreen mode Exit fullscreen mode

then select your project of choice project id

gcloud config set project production-c33c5
Enter fullscreen mode Exit fullscreen mode

then export the data by running

gcloud firestore export gs://"your project id here".appspot.com/save
Enter fullscreen mode Exit fullscreen mode

then copy these files to your local device current directory

 gsutil -m cp -r gs://production-c33c5.appspot.com/save  .
Enter fullscreen mode Exit fullscreen mode

to launch the emulator with the data run

firebase emulators:start --import ./save
Enter fullscreen mode Exit fullscreen mode

you can save any changes you make by before closing the session

first run

firebase emulators:export ./save
Enter fullscreen mode Exit fullscreen mode

to connect your app to the emulator
import

import { connectAuthEmulator } from "firebase/auth";
import {connectFirestoreEmulator} from "firebase/firestore"
import { connectFunctionsEmulator } from "firebase/functions";
Enter fullscreen mode Exit fullscreen mode

add these to the firebaseConfig.ts at the bottom

connectFirestoreEmulator(db, 'localhost', 8080);
connectAuthEmulator(auth, "http://localhost:9099");
connectFunctionsEmulator(functions, "localhost", 5001);
Enter fullscreen mode Exit fullscreen mode

another nice tip is how to run it on your lan network ,
which is helpfull if you're testing on multiple devices on the > same network.

ipconfig
Enter fullscreen mode Exit fullscreen mode

and grab the ipv4 value

ipv4 local address

in the firebase.json file , change the configuration and add the host value as the ipv4 address we git from ipv4

  "emulators": {
    "firestore": {
      "port": 8080,
      "host":"192.168.43.238"

    },
    "hosting": {
      "port": 5000
    },
    "ui": {
      "enabled": true
    },
    "auth": {
      "port": 9099
    }
  }
Enter fullscreen mode Exit fullscreen mode

and also in the firebaseConfig , change the connectFirebaseEmulator to:

connectFirestoreEmulator(db, '192.168.0.109', 8080);
Enter fullscreen mode Exit fullscreen mode

or for auth

connectAuthEmulator(auth, "http://192.168.43.238:9099");
Enter fullscreen mode Exit fullscreen mode

emulator started

emulator UI

last thing to watch out for is port conflict , you can change the port if it's already taken or run

npx kill-port "port-number"
Enter fullscreen mode Exit fullscreen mode

Happy coding

profile
Heroku
 Promoted

Heroku

Amplify your impact where it matters most — building exceptional apps.

Leave the infrastructure headaches to us, while you focus on pushing boundaries, realizing your vision, and making a lasting impression on your users.

Get Started

Top comments (1)

Collapse
 
shahzad6077 profile image
Muhammad Shahzad Ali •

Great article 👍🏻

profile
AWS
 Promoted

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Explore a trove of insights in this engaging article, celebrated within our welcoming DEV Community. Developers from every background are invited to join and enhance our shared wisdom.

A genuine "thank you" can truly uplift someone’s day. Feel free to express your gratitude in the comments below!

On DEV, our collective exchange of knowledge lightens the road ahead and strengthens our community bonds. Found something valuable here? A small thank you to the author can make a big difference.

Okay