How to Build a Chat App with Firebase

Last updated
He is a software engineer who is interested in building solutions to real world problems and teaching others about the things he knows. Something he really enjoys doing aside writing codes and technical articles is body building.

Njoku Samson Ebere

This tutorial will show you how to build your own chat application using Firebase's Realtime Database.

How to Build a Chat App with Firebase

Table of Contents


    Have you thought about how difficult it is to build a chat application, showing you messages as soon as they are sent? In this tutorial we will do just that. I will guide you through building a web based chat application using Firebase as a realtime database and some simple HTML, CSS and Javascript for the interface.You can view the source code for the application on Github.

    Note: If you're looking for a chat application but don’t want to build your own, you should consider CometChat. Our robust suite of cloud-hosted text, voice & video solutions, ranging from simple drag-and-drop plugins to UI Kits, APIs and fully customizable SDKs, plus a host of unique ready-to-use extensions, will seamlessly integrate into your website & apps, quickly and securely; saving you countless hours & resources, and dramatically growing engagement on your website. Give us a try for free today!

    Users message each other through the completed chat application
    Example messaging application

    What You Will Need

    You will need a basic understanding of HTML, CSS and JavaScript as well as a google account to use with Firebase.

    What is Firebase?

    Firebase is a back-end platform provided by Google for building full-stack applications. It provides programmers with authentication options, storage, databases, hosting, A/B testing and other services.

    Firebase helps you to focus on developing the front-end of your applications while it does the hidden jobs for you.

    Setting Up Firebase

    Firebase offers two types of databases (Cloud Firestore and Realtime Database). For the his tutorial, you will be using a Realtime Database.

    You will need to create a new Firebase project: 

    Create a Realtime Database

    In the sidebar on the left

    • Open the ‘Build’ menu
    • Click on 'Realtime Database' and then ‘Create Database
    Firebase Project menu

    After that, select the region you want to use

    Select the region for your database

    Finally, start the database in 'test mode'

    Select which mode the database should be started in

    Get Your Configuration Details

    Once your database is setup, the only thing left to do is to get your configuration details. You will use these in order to authenticate your application with the Firebase service.

    You can find your configuration details in the Firebase console:

    • Click the Gear icon next to 'Project Overview'
    • Choose 'Project Settings'
    Open the Project settings for your Firebase project

    Under ‘Your apps’, select ‘Web app’:


    Next you need to register your application:

    • Enter a name for your application
    • Click on ‘Register App

    You can ignore the next screen and click on ‘Continue to Console

    Your application’s config values will then be visible in the ‘Your apps’ section

    Your firebaseConfig object values

    Project Setup

    You project will consist of 3 files, create a folder with the 3 files named:

    • index.html
    • index.css
    • index.js

    Laying The Foundation

    The index.html file will contain the HTML for your application as well as  links to the index.css, and index.js files, as well as the Firebase SDK. 

    Add the following code to your index.html file:

    Notice that the script tags for the Firebase SDKs and your index.js file are included in the <body> element. These load the Firebase SDK and make it available to your application. The index.css file is also included in the <head> element and will be used to style the application.

    Next, Add the following content to the <body> element above the <script> tags:

    In the HTML above, you created a <header> with the name of your app. The <ul> element will be used to to display messages loaded from the server while the <form> element will enable users to submit their messages.

    If you open your application in a browser now, it should look something like this:

    Web page showing the application title and input box to submit a message
    Page with only HTML

    Adding Functionality

    You now need to open the index.js file. This is where we will build out the functionality of our application step by step.

    Initializing the Application

    You need to tell your application how to connect to the Realtime Database we created and initialize the Firebase application.

    Copy the firebaseConfig for your application from the Firebase Project Console and paste it into your index.js file. Then add the following lines of code:

    Sending Messages

    In order to send messages, users will type into the input form provided and click on the ‘Send’ button. Your app will subscribe to the submit event when the ‘Send’ button is clicked and then call the sendMessage() function.

    The sendMessage() function will:

    • Prevent the default form behaviour
    • Capture and store the message sent by the user
    • Clear the input box
    • Scroll to the bottom of the page where the new message will appear
    • Add the message to the database

    Edit your index.js file to contain the following code:

    Receiving Text Messages

    When a message is sent by one user it needs to be received by the other users of the application.

    Edit your index.js file to contain the following code:

    In the code above, you subscribe to the database's child_added event in order to be notified when new messages are added to the database. When a new message is added, it is appended to the <ul> element you created earlier as a new list item.

    At this point, if you open your application in a browser it should be possible to:

    • Specify a username
    • Send and receive messages
    A user sending a message through an unstyled version of the application
    Chat App Demo Without CSS

    Styling The App

    To style your application you need to add some CSS to the index.css file. Feel free to copy and paste the styles below to get you started:


    You have now built a simple realtime chat application using the Firebase SDK and Realtime Database as a datastore.

    If you're looking for a robust application that's built to scale, consider CometChat. You can create an account for free, and start building right away. Develop for as long as you need, and don't pay a thing until you're ready to scale.

    About the Author

    Njoku is a software engineer who loves building solutions to real world problems and teaching others about the things he knows. Something he really enjoys doing besides writing code and technical articles is body building.

    What to Read Next

    No items found.