How to set up Firebase Emulators

Using Firebase Emulators to mirror development on your local system: free, fast.

Firebase Emulators sound like a great idea. Run an extract of your cloud environment on localhost, Avoid expensive accidents in the cloud. Be fast. The reality, hoever, is that there are a lot of little problems to deal with.

Let’s assume you already have gcloud set up, and have a Firebase project named dev-test with authentication, a Firestore database, Storage, and security rules for both of the latter.

Install the Emulators

    cd <project_directory>
    gcloud auth login
    gcloud config set project PROJECT_ID
    firebase login
    firebase use dev-test   // "firebase use" to show the current project
    npm install -g firebase-tools 
    firebase init    
    // Use the defaults. If you need to start over; delete .firebaserc and firebase.json

Backup and download the Firebase project (“dev-test” for this example)

    cd ~/Downloads    
    gcloud firestore export gs://<your_project>-dev-test.appspot.com/dev-test
    //?? vs.: console > Databases > Firestore > Import and Export > Export on <project> export entire database > chose destination > Export
    // Note: Kristofer Källsbo, "Export Firestore to dev environment" 
    // (https://hackviking.com/2021/10/20/export-firestore-to-dev-environment/) says to use gcloud 
    // instead of the console, which may add special characters that prevent downloading the data.
    gsutil ls -la gs://<your_project>-dev-test.appspot.com/
    // vs.: console > storage > cloud storage > browser
    gsutil -m cp -r gs://<your_project>-dev-test/dev-test/ .
    // Delete the old directory, if there is one, before downloading

Modify app to use Emulators for localhost

    if (location.hostname === "localhost") {
        auth.useEmulator("http://localhost:9100");
        db.useEmulator("localhost", 8080);     
        projectStorage.useEmulator("localhost", 9199);
    }
    // Example is for Firebase 8 in firebase.js
    // .vscode/launch.json should have a line:
        "url": "http://localhost:8081",

Start the Emulators using your download:

    firebase emulators:start 
    --import /<your_path>/Downloads/dev-test 
    --export-on-exit
    // Populates from "dev-test" and saves any changes there on exit.
    // Argh! Be sure to use absolute path above to the download.

Launch and run the project in VS Code:

    npm run serve   // ctrl-click to open app on http://localhost:8081

Wow, that was easy! ;)

Notes:

In case of a “port already in use” error:

    lsof -i:<port> // like 8080
    // returns PID; if multiple PIDs, pick the first
    sudo kill PID

To see project information:

    gcloud config list

To run on local network, like to check out your app over wifi on a phone:

    // Use *ifconfig* to get your network IP: 192.168.x.y
    http://192.168.x.y:8081/

To have correct permissions on your “bucket” for your backup, you may need to add your account as “new principal” with role of “Storage Admin.” ERROR: PERMISSION_DENIED: Service account does not have access to Google Cloud Storage file. See https://cloud.google.com/datastore/docs/export-import-entities#permissions for a list of permissions needed. Error details: account does not have storage.buckets.get access to the Google Cloud Storage bucket.

When creating a bucket, by default no security settings are defined, so come back to this and define some security settings.

For more information, see Jorge Vergara (JS Mobile Dev), “How to set up Firebase Emulator for local development.”