How to Run Firebase Functions Emulator on your iPhone using Expo

Using Expo makes developing React Native apps incredibly easy and it works great with many tools including firebase.

By following these steps you can setup your React Native Expo app with firebase functions and run them locally.

Setting up Expo and React Native

yarn global add expo-cli

then..

expo init AwesomeProject
cd AwesomeProject
yarn start

Boom done.

Connect with Firebase Functions

First you’re going to want to go to console.firebase.com, create a project and add a web app. Make sure to activate all the services you’re interested in using including Firebase Functions by clicking through the left menu bar.

Then switch back to your code editor and install firebase:

expo install firebase

Then you need to create a firebase.js file in the root of your directory and add your config details that you can find in the Firebase console. Mine looks like the following:

import firebase from 'firebase/app'
import 'firebase/firestore'
import 'firebase/functions'
import 'firebase/storage'
import 'firebase/auth';
// Initialize Firebase
const firebaseConfig = {
apiKey: PLACE_YOUR_CONFIG_HERE,
authDomain: PLACE_YOUR_CONFIG_HERE,
databaseURL: PLACE_YOUR_CONFIG_HERE,
projectId: PLACE_YOUR_CONFIG_HERE,
storageBucket: PLACE_YOUR_CONFIG_HERE,
messagingSenderId: PLACE_YOUR_CONFIG_HERE,
appId: PLACE_YOUR_CONFIG_HERE,
measurementId: PLACE_YOUR_CONFIG_HERE
};
if (!firebase.apps.length) {
firebase.initializeApp(firebaseConfig)
} else {
firebase.app(); // if already initialized, use that one
}
export const firestoreDatabase = firebase.firestore()
export const firebaseStorage = firebase.storage()
export const firebaseFunctions = firebase.functions()
export const firebaseAuth = firebase.auth()

Cool, next enter firebase init into the command line and select functions and press enter. Firebase will setup the folder structure and add an index.js or index.txs file for you to get started. Edit these as you please.

Running Firebase Functions Locally

If you want to test out your react native app in the Expo interface on your mobile device you’re going to need your IP address, specifically your IP4v address which you can find here: https://whatismyipaddress.com/

Good, now that you’ve got your IP, switch back to your firebase.js file and let’s add another line.

firebase.functions().useEmulator("PLACE_YOUR_IP_HERE:5001");

Then we need to edit our firebase.json file and add a new “host” line to our emulator settings like so:

"emulators": {
"functions": {
"port": 5001,
"host": "0.0.0.0"
},
"ui": {
"enabled": true
}
},

Sweet.

If you added configs to your firebase functions you’ll need to run the following command:

firebase functions:config:get > .runtimeconfig.json

If you’re using Typescript functions make sure to run this as well:

cd functions
npx tsc --watch

Now We’re Ready

Now that’s setup we are ready to run:

firebase emulators:start — only functions

If all went well your firebase functions should be responding when you expo start and test your app on your mobile device.