Learn how to set up a Firebase project using the command line and how to use the Firebase Emulator for a local-first workflow.

What is Firebase Emulator?

The Firebase Emulator suite enables a local-first development workflow which is not only perfect for prototyping, but it’s also faster than communicating directly with the Firebase console, safer because your development environment is completely isolated (giving you the chance to test edge cases without worrying about corrupting or wiping your production data), and cheaper.

Regardless of how many developers are working on a project, all interactions with Firebase remain local.

Prerequisites

To make use of this guide, you need:

• Basic knowledge of React, Firebase, and the command line.
• A Firebase account.
• To install Java on your system.

How to integrate Firebase Emulator with React

To get started, create a react-app using $ yarn create react-app todo && cd my-app and install firebase-tools globally by running $ yarn global add firebase-tools. Run $ firebase login to authenticate yourself.

To create a Firebase project, run $ firebase projects:create and enter a unique ID. You can store your ID in a variable $ fbid=your-unique-id-here (which can be used as $fbid.)

Next, create a Firebase web app in your project by running $ firebase apps:create --project $fbid web my-app.

Inside the root of your react app directory, enable Firestore by running $ firebase init firestore --project $fbid, which will error out with a link to enable the feature in the Firebase console. After doing so, re-run $ firebase init firestore --project $fbid, which will create a couple of files.

Having done that, now run $ firebase init emulators --project $fbid and select the Authentication and Firestore emulators. Accept the default ports for each emulator, make sure to enable the Emulator UI, and download the emulators. (Again, Java must be installed on your system to run the emulators.)

#firebase #react #javascript #web-development