Create and use callable functions with the Firebase function emulator

Instructor: Now we're going to see how we can use callable functions from the emulator. For that, we've created a simple function here that's only going to return a hello from the emulator message. This is a Firebase callable function.

Next, before doing anything else, we need to navigate into the functions folder. In here, we're going to run the npm run build command. This is going to build this function so that we can use it from the emulator.

Now that our backend to our Cloud Function is ready, we can check how we can call this function from the client. From that, we're going to go the file where we initialized Firebase. In my case, it's the app module file, because I'm using an Angular application. We're going to make sure that we have initialized the functions.

If you don't have any initialized, you can import the provided functions and getFunction functions from their functions package. Now, to initialize the emulator, I'm going to go to the functions package, and I'm also going to import the connect function simulator function.

Then, I'm going to go, look for the initializations of my functions, and I'm going to call that here, connect function simulator. This is going to take three parameters. The first parameter is the functions instance, then the domain we are working on. In our case, it's local host.

Lastly, the port. If you don't remember, which port is the Firebase emulator using for functions, you can open the firebase.json file, and here, you can see that it's using the port 5001.

Now, if we open our terminal and type Firebase emulators start, we can see that the emulators are running. If you go into the functions emulator, we can see that it initialized the function, "Say hello."

That's the function that we created here. To test that everything is working, we need to create somewhere in our application a call for this function. In my case, since this is a test, I'm going to go into the login page.

In here, I'm going to create a new button to call that function, and you can see it here on the screen. It just says, "Say hello to the functions." That button is going to call a function called, sayHelloToFunctions. I'm going to create that function here in my class.

Now, to call our function, I'm going to import the necessary packages in my class. First, I'm going to import the functions package, because this is the one that's going to let me create the functions instance that I'm going to be able to use. Since this is an angular application, I need to now inject that into the constructor of my class.

Then, I'm going to import the HTTPS callable function. This is the function I'm going to use to be able to call that Cloud Function that I created. We can use HTTPS callable from anywhere we want in our application. In the example here, I'm going to use it inside of the sayHello function.

To use it, we have to create a new variable. In this case, I'm going to say, sayHello, and we are going to assign the HTTPS callable function. The HTTPS callable receives two parameters. First, is this dot functions. As you remember, this is the instance of our Firebase functions. The second one is a string. This string is the name of the Cloud Function that we are calling.

You can go into the index.ds file and see that the function's name is sayHello. Then, you move back here and you copy it again. Now, the function is ready to be used. To use it, we're going to call sayHello as a function. This returns a promise with the result. Here, we're going to take that result and log it to the console.

Now, when I click my new button, "Say Hello to Functions", you see here I get a response, it's called data. In the data, I get the message, "Hello from the emulator." This is the same message we are sending here inside of our Cloud Function.