Detect whether firebase app is hosted by emulator or in production

Question

I have a web app which currently uses Firestore as a database with Firebase Auth. I have it set up to try to connect to the Firebase emulators when in development, like so:

if(process.env.NODE_ENV === "development") {
    connectFirestoreEmulator(firestoreDb, "localhost", 8080);
}

I also use this technique to disable some in-browser testing when not in development.

This works fine when running a development server through Vite, which is what I have been using. However, I recently set up the project to run on Firebase hosting, and I found that process.env.NODE_ENV is not set when I run the hosting emulator. Is there another way to determine whether the app is being hosted from an emulator (ie for development) or on the real Firebase hosting service?

To clarify, I need to run this check in the app's client-side code, which is to be hosted statically via Firebase hosting. I am NOT concerned with server-side Firebase Cloud Functions (see this question for answers on that).

Answer 1

Statically hosted code has no concept of "development" vs "production" - that is a server-side feature. You would have to make that distinction in your build step prior to hosting the code on the emulator.

The alternative would be to switch based on the hostname of the rendered page (ie window.location.hostname === 'localhost' ) but this means your development code would be served with your production code.

So you would set up two "public" folders - one for a development compilation of your code and one for a production compilation of your code (that gets deployed when using firebase deploy ). You would then use a npm / yarn script to compile and serve (and maybe even hot-reload) the relevant version. How you go about this would depend on what tool you are using to do your build step.