Get Started With Firebase in 5–10 Minutes

The goal of this article is to expose you to the basics of Firebase and provide simple, working examples. If you want to go more in depth, check out Firebase’s documentation

Link to final code below.

Final Code

What is Firebase?

Firebase is a platform that allows you to build websites without server side code. It has a ton of cool features but we are going to be focused on it’s Realtime database.

Now lets get started.

Adding Firebase to your website.

  • Step 1: Go to
  • Step 2: Add a project
  • Step 3: Press “Add Firebase to your web app”
  • Step 4: Copy that code into your HTML page

Setting up the Realtime Database

  • Step 1: Go into your Database
  • Step 2: Click the rules tab
  • Step 3: Change your rules to the code snippet below. Normally you shouldn’t do this due to security reasons, but for testing purposes it will be fine. Read more about it here
"rules": {
".read": "true",
".write": "true"
  • Step 4: Download the demo.json from here. Right click and Save as on the page to download it. Don’t forget to name is demo.json, not demo.json.txt.
  • Step 5: Import demo.json to firebase

Pulling data from the Realtime Database

First add the following code to your script tag.

var database = firebase.database();

There are two main ways to get data from the database, but for now we are going to focus on .once. Use this if you want to pull from the database just one time.

database.ref('/').once('value', function(snapshot){

The database will listen at the root directory, which is done with .ref(‘/’). Below is another way to declare the .ref.

var rootRef = database.ref('/');
rootRef.once('value', function(snapshot){

When you make a call to the Firebase Database, it will return a snapshot, which is data at the reference point you gave it. To access this data, we use .val().

Now, lets say that our data was in a different child location, as it is in the image below.

Getting that data is still easy. Instead of database.ref(‘/’), we would do database.ref(‘/username’) to get the data.

Now, what if you want to continue to listen for updates past the first one. In that case, you would use .on()

What .on() does is that it will listen for a certain event at a certain child. The different types of events are shown below.

We are going to be focusing on 2 of the events, child_added and child_changed events.

child_added event

This will run when the user loads the page, and can be used in place of a .once().

pushDataRef = database.ref("/pushData");
pushDataRef.on("child_added", function(snapshot){
console.log("Below is the data from child_added");

child_changed event

setDataRef = database.ref("/setData");
setDataRef.on('child_changed', function(snapshot) {
console.log("Below is the data from child_changed");

Updating data in the Realtime Database

Lets add a button and text box on our page for this example.

The two ways I update/create values in the database is with .push() and .set().

You use .push() if you want to create a new child location with a new generated id. You can then use .set() to update or create a key:value pair.

Below is an example of using .push() and .set()

function pushData(){
var data = document.getElementById("dataValue").value;
var dataRef = database.ref('/').push();//Generates a new child location with a randomly generated id.
value: data

Another example, except this time it is only using .set

function setData(){
var data = document.getElementById("dataValue").value;
var dataRef = database.ref('/newData');
value: data

Dealing with Firebase Generated Unique Ids

Now, you might have noticed that Firebase creates a crazy string of characters and numbers when you use .push().

This is the UID, unique ID, that Firebase generates when we use .push(). We can get the UID of a child by using either Object.keys() or .key() as demonstrated below.


This will return an array of keys.

database.ref('/pushData').once('value', function(snapshot){


This will return the key of 1 object.

database.ref('/pushData').once('value', function(snapshot){


Hope this helps with getting you started with Firebase. If you have any issues or questions, create an issue here.

Originally published at

More info at




Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Simple JS Projects: Project 2: MovieInfo Search App

Is React — The Complete Guide (incl Hooks, React Router, Redux) on Udemy Worth it? [Review]

Is React — The Complete Guide (incl Hooks, React Router, Redux) on Udemy Worth it?

AEM: Conditionally show or hide a field based on a Checkbox widget (or anything else)

Parsing absolutely anything in JavaScript using Earley algorithm

Learn the First-class function in JavaScript in 5 minutes

Node.js app in the real world : what they never really tell you — Part 2 of a 5 part series

“this” keyword in JavaScript

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Sean Kim

Sean Kim

More from Medium

Mobile application Development Methodology

Hybrid App vs Native App: Making the Right Choice for Your App Development

Top Trending Technologies That Will Change Mobile App Development

Why Should Startups Choose Flutter To Develop Mobile Apps in 2022?