Vue.js

Building A Real-Time Chat Application With Vue.js and Firebase – Part 3


Subscribe On YouTube

DemoCode

Part 1: Setting Up The Project
Part 2: Implementing The Chat Logic
Part 3: Firebase Cloud Functions

In this second part of the Building A Real-Time Chat Application With Vue.js and Firebase tutorial series we’ve further completed the implementation of the Vue.js front-end application.

In this third part we’ll be implementing the Firebase Cloud Function which is used to automatically clean up the Firestore database if more than ten messages have been inserted.

First of all let’s clarify what Firebase Cloud Functions are.

What Are Cloud Functions?

So far we’ve only used client-side code to build our Vue.js application. All the code which has been added to the project so far is executed client-side right in the browser.

For certain tasks there might be the need to execute code on the server-side as well. By using Firebase Cloud Functions we’re able to deploy code to the Firebase server and let that code run when certain events are occurring (like inserting a new document in Firestore). By using Firebase Cloud function we’re able to execute JavaScript code server-side without running our own server.


If you like CodingTheSmartWay, then consider supporting us via Patreon. With your help we’re able to release developer tutorial more often. Thanks a lot!


Adding Cloud Functions To The Project

To add Firebase Cloud Functions to the project we first need to make sure that the Firebase CLI is installed. The installation is done by using NPM again in the following way:

$ npm install -g firebase-tools

You should now have a globally available firebase command available from any terminal window on your machine. Once you’ve installed the Firebase CLI, sign in using your Google account:

$ firebase login

This command connects your local machine to your Firebase account and grants access to your projects. To test that authentication worked, you can run $ firebase list to see a list of all of your Firebase projects.

Initiate the Firebase Cloud Functions feature by running the following command within the Vue project directory:

$ firebase init

You then should be able to see the following output on the command line:

You’re being asked which Firebase CLI features you want to add to the project. By using the arrow keys navigate to the list of features and select the Functions feature by pressing the spacebar. Finally hit return to confirm the selection: