DEV Community

Etinosa Obaseki
Etinosa Obaseki

Posted on • Updated on • Originally published at notes.etin.space

My Year in Firebase: Experiences with Building & Deploying on the Platform

I began using the Firebase platform last year along with a number of other technologies and it has been an interesting ride. I'm going to document my experience here.


Love At First Byte?๐Ÿ˜

Firebase's landing page

My introduction to Firebase came when, in 2018, I got a gig to add Google Analytics to a web app (I charged quite a bit for that ๐Ÿ˜…). The front end was built in the Ionic Framework and hosted on Firebase Hosting while the back end was in Java and hosted elsewhere.

Thinking about it now, it was my earliest exposure to Distributed Client-Server Architecture on the web. All my prior experience had been with monoliths that served straight to the clients plate.

I was intrigued.

I ran git clone and set up Analytics on the project fairly quickly.

Time to deploy? Phew. Google to the rescue. The Firebase Docs were extremely helpful.

I'd need to install the Firebase CLI, firebase-tools using NPM:

$ npm install -g firebase-tools

And deploying?

$ firebase deploy

'I was in love!

Job done and I got paid!

But, how much does such a great service cost? Absolutely nothing!(With limits, of course ๐Ÿ˜’).

Marry me FiFi!

Did I get her number?โ˜Ž๏ธ

Well, I didn't really think about Firebase much after that. Most of my work was still done in just PHP, so I didn't really have a use for it day-to-day.

This changed when in November 2018 I had to build a portfolio website for myself. That's quite an interesting story itself, but the two most relevant parts are that

  • I didn't have the money to pay for a domain and (shared) hosting like I usually would for my projects
  • I had just begun to learn React from a Wes Bos course

After building the portfolio website in good time, it was time to set up my project on Firebase.

Our First Date๐Ÿ’‘

To set up the project we'll need to head to the Firebase Console and create a new Project. A Firebase Project contains "Apps" which share Firebase resources like Authentication, Database, etcetera.

After setting up the project on the Console, the next thing to do is initialize Firebase in my portfolio website. We do this by running:

$ firebase init

A few on screen prompts later, where we select the project we want to work on and the Firebase feature we want to use and voila! We're ready to deploy.

Can you feel the fire?

We also need to specify whether it's a Single Page Application (in which case all requests will be redirected to index) and where our public folder is. In the case of my portofolio app it was the build directory.

Now, when we run the firebase deploy command from earlier, it'll copy the files from the public directory we specified and upload them to the Firebase cloud.

We are Live!!! ๐ŸŽ‰

Once the deploy is successfully done, we get our own URL: https://your-app-name.firebaseapp.com (and more recently, you also get https://your-app-name.web.app).

That was smooth, wasn't it? Connecting to a custom domain is just as easy. Simply navigate to the Hosting tab from your Project page on the Firebase Console and click Connect Custom Domain.

The Console's sidebar

You'll need to already own a domain, of course, and be able to update it's DNS Records. The process varies across providers but generally you do the following:

  • Add a TXT Record provided in the Console to prove ownership of the domain.
  • Add an A record pointing to the Firebase Hosting's public IP
  • Add another A record pointing to another Firebase public IP for redundancy.

And in 0-48 Hours your domain should be provisioned along with a free SSL certificate.

What Else Can This Baby Do? ๐Ÿ˜‰

So, that covers Hosting, which was far and away my most used Firebase service this year. But what other goodies does Firebase provide?

From the sidebar we can already see a lot of things, but my next favourite feature has to be Firebase Databases, specifically the Realtime Database. There's also Cloud Firestore, but I haven't used that yet.

The Firebase Realtime Database

The Realtime Database is a cloud NoSQL database implementation, which means it's similar to MongoDB. It stores data in an Object-Key format and can access several records very quickly.

My favourite thing about it? It comes with a REST API right out of the box! Define your data structure and you can access it RESTfully via https://your-app-name.firebase.io/node-name.json and do all the usual GETs, POSTs, PUTs & DELETEs.

It saved me the trouble of building a full back end for a few small projects I built in React.

I also had plenty of joy using Firebase functions to build a Twitter Bot.

Cloud Functions for Firebase

Firebase Functions allow you run server side code without infrastructure. Serverless, as the kids are calling it these days.

Inspired by the numerous bots built by Shalvah, it allowed me write a NodeJS function to search Twitter for tweets that were a quote by someone famous and upload that quote to the Firebase Database (remember that guy?).

Typically, I'd have to spin up a server and set up a cron job to fire that function at intervals, but with Cloud Functions I can create a PubSub function that runs on some event (in this case, every 15 minutes).

In Conclusion ๐Ÿ‘‹

Firebase has become my first choice development platform. It's easy to use and incredibly versatile.

I'm building a SAAS Product in Q1 2020 and I'm attempting to convince my team that it's what we should use.

Wish me luck.

Top comments (0)