Don't like this style? Click here to change it! blue.css

Welcome .... Click here to logout

Firebase - beautiful treat

We can use firebase as a whole backend:

I like teaching this because it allows you to deliver powerful apps quickly. I say concentrate on delivering code quickly.

Real-Time Database (as instant REST API)

The database structure in Firebase is simple enough, it's just a giant JSON object (key/value tree).

Let's set it up:

Make an account at (a non-udel account is best because the udel ones all share projects).

Create a new project, navigate your way to the real-time database, make it and put some data in there by clicking the plus button. Select "test" security rules.

Grab the URL just above your database and add .json to the back then go to that URL. For instance for me it's: or

Observation 1: this ENTIRE database is a REST API!

That is, you can pick any node in your database /people and do POST, GET, PUT, DELETE to that URL (with the .json ending) and the behavior will be to CREATE, READ, UPDATE, DESTROY the data at that place.

Let's just use the URL (+.json) and AJAX to make the to-do app internet backed.

Just like that the Monday work becomes an instant communication of a TON of power.

Check out the KATAs page as a way to find yourself in this course. You now know just enough in theory to be extremely dangerous and make so many things but you most practice.

Firebase JS SDK

An SDK (software development kit) let's us use a tool in our code. Setting this up takes a little more delayed gratification but gives us something new... real-time interactions.

OK, now connect a website to the DB: find the gear, click Project Settings, and add a web project (the </> icon)

Select CDN. This will give you some config data, copy paste the JSON object they provide, it looks like this:

Make a pen at Codepen, copy the config stuff into the javascript window (without the script wrapper).

ASIDE: including 3rd-party libraries

In CodePen you can include 3rd-party JS by clicking the gear and searching:

The HTML version of this is to get a URL where the library lives (TRY THIS: CDNJS) and include it like this:

For firebase you can see at: that they provide a TON of ways to customize what you load into your site.

For this class we will use the following 3 from that list (once as just URLs and once here as HTML includes also a demo of the first JS interaction with the DB):


OK Now we're ready for real-timey fun.

Let's make a quick chat-app as a live demo.