app does not connect to firebase emulators but connects to production

Question

I have a react app connected to firebase project.

On running firebase emulators:start I get the following output.

firebase emulators:start
i  emulators: Starting emulators: auth, functions, firestore, hosting, storage
⚠  functions: The following emulators are not running, calls to these services from the Functions emulator will affect production: database, pubsub
✔  functions: Using node@16 from host.
i  firestore: Firestore Emulator logging to firestore-debug.log
i  hosting: Serving hosting files from: build
✔  hosting: Local server: http://localhost:5011
i  ui: Emulator UI logging to ui-debug.log
i  functions: Watching "/Users/{username}/{app}/functions" for Cloud Functions...
✔  functions[us-central1-addFirestoreEvents]: firestore function initialized.

┌─────────────────────────────────────────────────────────────┐
│ ✔  All emulators ready! It is now safe to connect your app. │
│ i  View Emulator UI at http://localhost:4000                │
└─────────────────────────────────────────────────────────────┘

┌────────────────┬────────────────┬─────────────────────────────────┐
│ Emulator       │ Host:Port      │ View in Emulator UI             │
├────────────────┼────────────────┼─────────────────────────────────┤
│ Authentication │ localhost:9099 │ http://localhost:4000/auth      │
├────────────────┼────────────────┼─────────────────────────────────┤
│ Functions      │ localhost:5001 │ http://localhost:4000/functions │
├────────────────┼────────────────┼─────────────────────────────────┤
│ Firestore      │ localhost:8080 │ http://localhost:4000/firestore │
├────────────────┼────────────────┼─────────────────────────────────┤
│ Hosting        │ localhost:5011 │ n/a                             │
├────────────────┼────────────────┼─────────────────────────────────┤
│ Storage        │ localhost:9199 │ http://localhost:4000/storage   │
└────────────────┴────────────────┴─────────────────────────────────┘
  Emulator Hub running at localhost:4400
  Other reserved ports: 4500

Issues? Report them at https://github.com/firebase/firebase-tools/issues and attach the *-debug.log files.
 
i  hosting: 127.0.0.1 - - [27/Mar/2022:11:12:53 +0000] "GET / HTTP/1.1" 200 584 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.83 Safari/537.36"
i  hosting: 127.0.0.1 - - [27/Mar/2022:11:12:53 +0000] "GET /static/js/main.60d5b53b.js HTTP/1.1" 200 928509 "http://localhost:5011/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.83 Safari/537.36"
i  hosting: 127.0.0.1 - - [27/Mar/2022:11:12:53 +0000] "GET /favicon.ico HTTP/1.1" 200 15406 "http://localhost:5011/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.83 Safari/537.36"
i  hosting: 127.0.0.1 - - [27/Mar/2022:11:13:30 +0000] "GET /manifest.json HTTP/1.1" 200 494 "http://localhost:5011/enter" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.83 Safari/537.36"
i  hosting: 127.0.0.1 - - [27/Mar/2022:11:13:30 +0000] "GET /static/js/main.60d5b53b.js.map HTTP/1.1" 200 6816096 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.83 Safari/537.36"

In my index function, I initialize the app like this

let fapp
if (!getApps().length) {
  // if (window.location.hostname === 'localhost') {
  //   initializeApp({})
  // } else {
  //   fapp = initializeApp(firebaseConfig)
  // }
  fapp = initializeApp({})
}

// Auth exports
export const auth = getAuth()
connectAuthEmulator(auth, 'http://localhost:9099')

// Firestore exports
// export const db = getFirestore(fapp)
export const db = getFirestore()
connectFirestoreEmulator(db, 'localhost', 8080)

Now When I go to the hosting URL 'https://localhost:5011" and try to login.(signInAnonymously) It is using the production config and not the emulator. even the db is getting connected to production.

OS details
Mac version 12.3

node version 16.4.0
firebase cli version 10.5.0
npm version 8.3.0

Adding my firebase.json file

{
    "firestore": {
        "rules": "firestore.rules",
        "indexes": "firestore.indexes.json"
    },
    "functions": {
        "predeploy": "npm --prefix \"$RESOURCE_DIR\" run build"
    },
    "hosting": {
        "public": "build",
        "ignore": [
            "firebase.json",
            "**/.*",
            "**/node_modules/**"
        ],
        "rewrites": [
            {
                "source": "**",
                "destination": "/index.html"
            }
        ]
    },
    "storage": {
        "rules": "storage.rules"
    },
    "emulators": {
        "auth": {
            "port": 9099
        },
        "firestore": {
            "port": 8080
        },
        "hosting": {
            "port": 5011
        },
        "storage": {
            "port": 9199
        },
        "ui": {
            "enabled": true
        }
    }

Answer 1

I found the issue here and just wanted to post it.

On running the firebase emulators:start all the services are started. However, I need to run the app on localhost and should not connect to the hosting one at localhost:port. I just ran npm run start and used the localhost:3000 to debug and all the emulators were working properly

TLDR: run npm start/dev scripts and they will connect to the emulators, do not use the hosting URL (that firebase runs and provides)