The Firebase emulator suite allow you to interact with Firebase services locally without having to make requests to a live project. It speeds up development and makes working with Firebase tools easy. You will need the Firebase CLI to initialise and run the emulators. If you don’t have it, the most elegent way to install is to get the standalone binary using their auto-install script:

curl -sL https://firebase.tools | bash

This will install the firebase tool. Then you need you initialise the emulators inside your project repository.

firebase init

Select the services you want to emulator as well as the emulators. So if you want to emulate Firestore, then initialise Firestore and select Firestore emulator from the emulators list. You need to initialise the services which creates configuration files that the emulators use. So, you can’t just install the emulators on their own inside your project folder. Then we need to connect our application to the local emulators. For some reason, each emulator has a slightly different way of doing it.

import { initializeApp, FirebaseOptions } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
import { connectFirestoreEmulator, getFirestore } from "firebase/firestore";
import { connectStorageEmulator, getStorage } from "firebase/storage";
import { connectAuthEmulator, getAuth } from "firebase/auth";

// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig: FirebaseOptions = {
  /* Your usual Firebase configuration */
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);

const auth = getAuth(app);
const db = getFirestore(app);
const storage = getStorage(app);

// Connect emulators here
if (import.meta.env.DEV) {
  connectAuthEmulator(auth, "http://localhost:9099");
  connectFirestoreEmulator(db, "localhost", 8080);
  connectStorageEmulator(storage, "localhost", 9199);
}

Each bundler like Webpack and Rollup have their own way of determining whether you are running in a development environment. The common case is through import.meta.env which determines the environment variables. Finally, to get going, start the emulators:

firebase emulators:start

And launch your application in development mode and it should be redirecting the requests to the emulators. You can view the emulator UI by default at http://127.0.0.1:4000 which is pretty neat and not to mention much faster than the actual Firebase console.