Name: Disable Firebase emulators when in production
Uploaded: 2021-10-04T22:12:27-05:00
Description: You are not supposed to run the Firebase emulators in production. In this lesson, you will learn how to set up environment variables to prevent emulator initializers from being executed when deploying your app.

Intro to Use the Firebase emulator to create safe test environments for Angular

Overview of the demo application and tools we'll use

Initialize Firebase emulators in your app

Setup the Firebase authentication emulator

Initialize the Firestore emulator

Overview of the different Firebase cloud functions

When to use the onCall or onRequest Firebase Cloud functions

Get started with Firebase HTTP Cloud Functions

Create and use callable functions with the Firebase function emulator

Watch for changes and trigger functions with the Firestore emulator

Disable Firebase emulators when in production

Import seed data for your Firebase emulators

Local App Development with the Firebase Emulator Suite

You are not supposed to run the Firebase emulators in production. In this lesson, you will learn how to set up environment variables to prevent emulator initializers from being executed when deploying your app. 

https://app.egghead.io/api/v1/lessons/firebase-disable-firebase-emulators-when-in-production/subtitles



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.

Disable Firebase emulators when in production

Share this video with your friends

Course

Local App Development with the Firebase Emulator Suite