Using local emulator for firebase with expo

user_13238615 0
Viewed 1051

I am trying to firebase to emulate locally for testing a react native app I am working on with expo. To that end I am trying to set the host of the functions and firestore to the proper port on local host.

After many iterations I finally found a weird combination of imports and calls that did not error. However, when I tried to run it with expo my App came up as a blank screen with no errors. I am pretty lost at this point and the firebase documentation is confusing.

This is my current index.js:

import firebase from "firebase"
import 'firebase/firestore';
import 'firebase/functions';
import 'firebase/app';


const config = {
    //config info
  };
const fb = firebase.initializeApp(config);
const firestore = firebase.firestore();
const functions = firebase.functions();

if(__DEV__){
  firestore.settings({
    host : "localhost:9000",
    ssl : false
  });
  functions.useFunctionsEmulator("http://localhost:5001");
}
const auth = fb.auth();

export { auth, functions, firestore }

The imports are very weird and I don't understand them but I got them from another stack overflow thread and it was the only thing that made it even get to the end of the file. Is there something very obvious I am missing about setting up the local emulator?

expo firebase react-native
4 Answers
user_143737650

I was able to get this to work on my machine via:

import * as firebase from 'firebase';
import '@firebase/firestore';
import '@firebase/functions';

const firebaseConfig = { /* config data */ }
firebase.initializeApp(firebaseConfig);
firebase.firestore().settings({ host: "localhost:8080", ssl: false });
firebase.functions().useFunctionsEmulator('http://localhost:5001');

In your attempt, I think your problem might be the the way you declared:

const fb = firebase.initializeApp(config);

and then forgot to use the initialized fb -- and instead you used firebase again.

try changing these lines:

const firestore = firebase.firestore();
const functions = firebase.functions();

to this:

const firestore = fb.firestore();
const functions = fb.functions();

or just use the firebase class directly instead of setting to a variable.

Edit:

I noticed that I actually had my firestore store host value set incorrectly so I edited it above - I had added http:// to the beginning but that's not what you want for that parameter.

Note - If you want to see exactly what your dev env is doing when trying to connect to your local firestore, add this line: firebase.firestore.setLogLevel('debug');

user_25696020

I'm not exactly sure it's your only problem. But for firebase functions to work in an emulator using your android or iphone you need to change

functions.useFunctionsEmulator("http://localhost:5001") to firebase.functions().useFunctionsEmulator("http://10.0.2.2:5001");

it's for an android emulator only. It's the IP adress of the device you need to reach.

user_47866630

This article does a good job of showing you how to get the right debugger host IP dynamically (if you're running Expo Go on a mobile phone).

basically, it all comes down to:

const origin = Constants.manifest.debuggerHost?.split(":").shift() || "localhost";

firebase.auth().useEmulator(`http://${origin}:9099/`);
firebase.firestore().useEmulator(origin, 8080);
firebase.functions().useEmulator(origin, 5001);
user_124103210
Related