Can't write to Firestore Emulator

Question

i'm using Firebase and React. I'm not able to write to my emulator data, or rather, i can't see it after writing. So when a user signs up, i copy their name to Firestore, so even though the web app gives appropriate notifications, nothing has been added to http://127.0.0.1:4000/firestore. I want to create an emulator for functions, firestore, hosting, auth and storage but only auth is working. I can sign up users and view them on http://127.0.0.1:4000/auth.

I can even edit the data from the website but i don't know where or if the data is on my emulator. I know that its not on my production site though.

firebase.js:

const firebaseConfig = {
  apiKey: process.env.REACT_APP_APIKEY,
  authDomain: process.env.REACT_APP_AUTHDOMAIN,
  projectId: process.env.REACT_APP_PROJECTID,
  storageBucket: process.env.REACT_APP_STORAGEBUCKET,
  messagingSenderId: process.env.REACT_APP_MESSAGINGSENDERID,
  appId: process.env.REACT_APP_APPID,
  measurementId: process.env.REACT_APP_MEASUREMENTID,
};

const hostname = window.location.hostname;
const app =
  hostname === "localhost"
    ? initializeApp({
        apiKey: "demo-key",
        authDomain: "demo-test",
        projectId: "demo-test",
        storageBucket: "default-bucket",
        appId: "demo-appId",
      })
    : initializeApp(firebaseConfig);

export const auth = getAuth(app);
export const db = getFirestore(app);
export const storage = getStorage(app);
export const functions = getFunctions(app);
export const analytics = getAnalytics(app);

if (hostname === "localhost") {
  connectAuthEmulator(auth, "http://localhost:9099");
  connectFirestoreEmulator(db, "localhost", 8080);
  connectStorageEmulator(storage, "localhost", 9199);
  connectFunctionsEmulator(functions, "localhost", 5001);
}

firebase.json:

{
  "firestore": {
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  },
  "functions": [
    {
      "source": "functions",
      "codebase": "default",
      "ignore": [
        "node_modules",
        ".git",
        "firebase-debug.log",
        "firebase-debug.*.log"
      ],
      "predeploy": ["npm --prefix \"$RESOURCE_DIR\" run lint"]
    }
  ],
  "hosting": {
    "public": "build",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  },
  "storage": {
    "rules": "storage.rules"
  },
  "emulators": {
    "auth": {
      "port": 9099,
      "host": "127.0.0.1"
    },
    "functions": {
      "port": 5001,
      "host": "127.0.0.1"
    },
    "firestore": {
      "port": 8080,
      "host": "127.0.0.1"
    },
    "hosting": {
      "port": 5000,
      "host": "127.0.0.1"
    },
    "storage": {
      "port": 9199,
      "host": "127.0.0.1"
    },
    "ui": {
      "enabled": true,
      "port": 4000,
      "host": "127.0.0.1"
    },
    "singleProjectMode": true
  }
}

Just to be clear, it doesn't make a difference whether i make use localhost or 127.0.0.1 in firebase.json or firebase.js

An image of user being signed up and the database that firebase is writing to, which i don't know how to access:

Please help, i would really appreciate your assistance. I've been trying to figure this out for a while.

Answer 1

Answer from my comments:

In order to match the emulator project ID with the project ID in the application, start the emulators with the following:

firebase emulators:start --project=demo-test where demo-test is the project ID in your initializeApp configuration.