Gain control of your Firebase Extension with Firebase Extension Events

There are a lot of extensions that can be integrated to your project so that your project can be shipped in a very short time, with low cost. But the problem is, sometimes your extension is strict in terms of flow since the server and its logic is beyond of your scope. But now we can listen to an event when a specific logic has been fulfilled inside the extension.

For example : an image has been resized, data has been stored, a payment has been made, an invoice has been generated, a subscription has been unsubscribe, etc. You can listen to these events so that you can expand our business flow to be more flexible!

Firebase Extension events provide more flexibility in terms of developing and managing various extensions.

In this article we will learn how to listen an event that is triggered by an integrated Firebase Extension. And we will demonstrate this using a Firebase extension to resize an image.

Whenever an image has been stored into Firebase Storage, it will be resized automatically.

Then we will get an event once the resize has been completed, and from that event we can do a list of different things:

Here we will log a message to prove that our event listener is working. Before you continue, you can also watch the video version of this article on YouTube:

Let’s get started! Find the Resize Images Extension in the extensions list:

Install the Resize Image Extension in the Firebase console. There you will find a detailed description of the extension. After that, in order to use the extension, you will need to upgrade your plan to the Blaze Plan.

By default, if you already have an existing extension with the same type, you will be asked for a different instance ID:

Before finishing the installation, you can review what other technologies this extension is using (such as a Cloud Functions and Eventarc channel).

You will have to enable the Firebase Storage, and you can choose wether a production mode or test mode. For testing purposes, you can start in test mode, but keep in mind that this mode has no Security Rules, so make sure to change to production mode and write strong Security Rules as soon as possible.

You can choose the location of Firebase Storage that is closest to you, so that it will have a better performance.

You can also choose the location of your extension, as well as other properties. For this example we will use the default ones, as you can see in the image above.

This is the most important part, you can click enable events and then you can choose the channel location of your events. I suggest you to use the Default location so that you will not get charged for the difference for your extension channel and your Firebase extension location.

Then you can select the event that you want your function to listen to. In this case, we are selecting firebase.extension.storage.resize-image-v1.

Next you can click the install extension and after that you should wait around 3 until 5 minutes so the extension is ready and it’s integrated with your Firebase project.

Once it has been installed you can open the extension to double check that the configuration and the properties are exactly how you have configured before:

Now let’s create our Firebase Cloud function by initializing Firebase. Choose Functions, then choose the project. Once the project has been created, the function folder and the firebase json and firebase.rc files will be created as well. The index.js file is where you can add your logic.

Now let’s import onCustomEventPublished from Eventarc API and add the name of the event, as we saw in the Firebase console. Then inside the function we can log a message that says “Image has been resized!” to make sure that the Resize Image Event has been triggered:

Run firebase deploy to deploy our Cloud Function:

Once it has been done let’s check our Cloud Function in the Firebase console:

As you can see in the image above, the trigger is still unknown. It means that the deploy is still in progress and once it has been done the trigger details will be visible.

Now we need to trigger the Resize Image Event by uploading an image to Firebase Storage. Open the Firebase Storage page in the Firebase Console and upload an image. After that you will have a thumbnails folder where your resized image will be stored.

Now if you open the folder you will see the recently uploaded image there:

And once the image has been uploaded you can check the log on the Google Cloud platform that has been integrated with Firebase:

It means that the event has been triggered and the Cloud Function is working as expected!

Wrapping up:

1. We have successfully integrated the Firebase Extension called Resize Image with a Firebase project.
2. We configured the Firebase Extension Event to be triggered when an uploaded image has been resized.
3. We created and deployed a Cloud Function that will print a log to the Google Cloud Platform log history when the event is triggered.

Reach out to me if you have any questions!