Firebase emulator setup
Tags: firebaseemulator, firebase, firebasecli, localdevelopment
Published: 2022-05-21 10:24:07

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](https://firebase.google.com/docs/emulator-suite/install_and_configure)

for the quic setup guide run

```
npm install -g firebase-tools
```

to install the firebase cli
then login by running 
```
firebase login
```

then check the firebase version 

```
firebase --version
```
in your projects root directory ,
start configuring by running

```
firebase init
```

![fire base init screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dqfj55ndethb97k002a1.png)

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


![firebase services we need](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xmbq22hn5gyqsc547hiq.png)

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


![select firebase project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5pruxq65z2kfqxzmwuvy.png)

now let's set up firebase , accept the defaults 

![emulator firestore setup](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kx5eembeg0a6ocwjznik.png)

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


![select emulators](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7binfs7ldihaqluroyv0.png)

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


![select emulator ports](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/re5xmrz824znprfwiikj.png)

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

```
firebase emulators:start

```
firestore also lets you import production data for firestore when you start the emulators 
 for that you'll need:
- the gcloud cli [download](https://cloud.google.com/sdk/docs/install)

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

the run 

```
gcloud projects list
```

then select your project of choice project id

```
gcloud config set project production-c33c5
```
then export the data by running

```
gcloud firestore export gs://"your project id here".appspot.com/save        
```
then copy these files to your local device current directory

```
 gsutil -m cp -r gs://production-c33c5.appspot.com/save  .
```
to launch the emulator with the data run 

```
firebase emulators:start --import ./save
```
you can save any changes you make by before closing the session

first run 
```
firebase emulators:export ./save
```
to connect your app to the emulator 
import 

```
import { connectAuthEmulator } from "firebase/auth";
import {connectFirestoreEmulator} from "firebase/firestore"
import { connectFunctionsEmulator } from "firebase/functions";
```

add these to the firebaseConfig.ts at the bottom

```
connectFirestoreEmulator(db, 'localhost', 8080);
connectAuthEmulator(auth, "http://localhost:9099");
connectFunctionsEmulator(functions, "localhost", 5001);
```

> 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
```
and grab the ipv4 value

![ipv4 local address](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/it7xlsnsjowt4ic4jrad.png)

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
    }
  }
```
and also in the firebaseConfig , change the connectFirebaseEmulator to:
```
connectFirestoreEmulator(db, '192.168.0.109', 8080);
```
or for auth

```
connectAuthEmulator(auth, "http://192.168.43.238:9099");
```

![emulator started](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/abv42avyu8tfadrpz5wm.png)


![emulator UI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4ovxstfcnkpodott1lea.png)

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"
```
 

Happy coding