filleduchaos / firechat

A simple chat application with Firebase

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool


Tutorial for a simple chat application using JavaScript and Firebase.

Setting up

To complete this tutorial, you will need:

  • NodeJS
  • Firebase Tools
  • A (preferably new) Firebase project
  • A suitable text editor (Sublime Text, Vim, Emacs, VSCode, Atom, etc)
  • Git (optional)


  • Clone this repository (or download the zipped source and extract it)
  • Change into the project folder
  • If you have not logged in before, run firebase login to log in to Firebase from your console.
  • Run firebase init to set up your project
    • Select Real-time Database and Firebase Hosting on the list of required services
    • Select your project name when prompted
    • Make sure you don't overwrite the public folder!
  • Edit the produced database.rules.json file and set the values of .read and .write to true.
  • Once that is done, run firebase deploy to push the barebones version of your app to Firebase Hosting.
  • Get coding!

Tutorial steps

An HTML/CSS template has been provided so you can focus on building out the chat app. Feel free to tweak it as much as you like!

  • Load the Firebase SDK in the index.html file.

  • Set up references to the DOM nodes for important elements

  • Set up the Firebase database object and get a reference to the message path

  • Create an event listener to handle submitting the chat form

  • Display outgoing/incoming messages on all clients

  • TODO (Self): Try adding authentication!


A simple chat application with Firebase


Language:HTML 46.0%Language:CSS 37.4%Language:JavaScript 16.5%