Firebase Local Development with Firestore, Cloud Functions and React

NEW POST (AUG ’23) FOR FIREBASE+REACT BOILERPLATE PROJECT: https://medium.com/@samshapiro/react-firebase-boilerplate-setup-1aa4357eca96

There’s a lot of commands, tools and articles available about testing Firebase’s Firestore and Cloud Functions locally, many of which are redundant and confusing. For example, there’s proxies, emulators, rewrite rules, the firebase serve command, etc.

But even with the new Firebase Emulator Suite, which aims to simplify this process, by default you need to build your project into static files for the emulator to work.

So if you’re using React (or generally a bundler like Webpack) and don’t want to rebuild your project every time you make a change, what should you use for the simplest, fastest local development and testing with Firestore & Firebase Cloud Functions?

The simplest way of doing local development with Firestore & Firebase Cloud Functions that I’ve found is the following:

1. In your firebase.js file, add the following block of code:

What this does is effectively tell your Firebase app, while in local development (i.e. the URL is localhost), to automatically reroute Firestore requests and cloud function requests to local Firestore & Cloud Functions emulators instead of the deployed function endpoints.

For example, instead of a function request hitting the endpoint https://us-central1-your-app.cloudfunctions.net/myFunction , we want it to hit: http://localhost:5000/your-app/us-central1/myFunction so that you can edit your functions locally and quickly test them locally without needing to deploy them to the cloud. Similar concept to what’s happening with Firestore.

So now your firebase.js file should look something like this:

The important part starts on line 19.

2. Now we need to run the Cloud Function emulator & Firestore emulator using the following command:

firebase emulators:start

What this will do is start up the Firestore emulator & and initialize each of your cloud functions locally (on port 5001 by default).

Now, what this will also do is start up another local server to serve your app’s front-end (on port 5000 by default). This can be convenient if your app is built into static files that are located in the public hosting directory specified in your firebase.json file:

In this example, the specified hosting directory is the `build` directory

The problem with this local server running the app (the one that launches on port 5000 by default) is that it requires static build files, which means that if you are doing local development with React using a command like yarn start or npm start , then this Firebase local server running on port 5000 will not reflect your latest work until you run yarn build or npm build to build your project into static files. So this leads us to an easy solution:

3. In another terminal window separate from step 2, run your React dev server:

yarn start or npm start

That’s right — just the normal React dev server you always use. Now, go to this React dev server in your browser and everything should just work (by default, it should be running on port 3000). If you go do some stuff in your app to access Firestore or a Cloud Function, you’ll notice in the network requests that your app hits the local emulator servers running in your other terminal window and not the cloud endpoints. This works because of what we did to set up Step 1.

If you’re having any issues, make sure that the port numbers you specified in Step 1 match the port numbers that the Firebase emulators are running on, which you can validate in the terminal output of Step 2.

That’s it! Soon, I’m planning to write a longer, more in-depth React + Firebase tutorial, so be on the lookout for that.