Disable Firebase emulators when in production

Instructor: When we're working with the Firebase emulator, initializing our emulators like this might work while we're in development, but what happens if we deploy our application with this initialization? Let's see.

If I open the terminal and do an ng build...Remember, this is an Angular application. You can run the build command for whatever framework you are using. Once my production build is done, I'm going to type, firebase deploy. This will deploy all of the APIs I'm using for Firebase, so Firestore security rules, the Cloud Functions, hosting, everything.

Once the CLI is done, you can see that it's saying that the hosting URL is HTTPS. However, add -examples.web.app. Let's go there.

When we open the application, you can see both in the console and a big warning here, "Running in emulator mode. Do not use production credentials." This is because it's trying to initialize the emulator even though we are in production.

Now, there are different ways to solve this. The main idea is that this code doesn't make your build when you're running a production build. Depending on the build tooling that your framework uses, you will have different options here. For this example, we're going to use our environment file.

Your Angular application has an environments, and an environment production file where you can store variables, depending on the environment that you are running. You have this production -- false, and in the production environment, you have a flag called production -- true. You can either create a new variable here or something else, whatever you want, but we can use the same production variable.

I'm going to go into the app.module.ds. I'm going to import environment. Here, where we are initializing the emulator, I'm going to say, if environment.production -- true, this means it's a production build, we don't want to use the emulator. I'm going to do the same for the other emulators that we are running.

Now, I can create a new production build. Once the build is done, I can deploy again. This time I only want to deploy hosting since the only changes we have is the application itself. As you can see, if I do a hard refresh here, now I no longer get the warning about the emulator because the application is not using the Firebase emulator.

If I run my application locally, I say Firebase emulators start, and I do an ng serve to serve my application, I can see that the emulator suit is up and running. For my application, I can go to localhost 4200. As you can see both in the console and in here, I get the warning that this is the emulator.

Now with the same code, I can deploy the application and work locally. Whenever I'm working locally, I'm using the emulator. Whenever the application is deployed, it's using the regular Firebase instance. Remember, there are multiple different ways to do this.

It's going to heavily depend on the environment you're using. If you're using View, React, or are using Vanilla JS, you can use your build tooling to make sure that this never makes it to production environments.