My Year in Firebase: Experiences with Building & Deploying on the Platform
Tags: firebase, javascript
Published: 2020-04-21 18:28:53

<!-- wp:heading {"level":3} -->
<h3>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.</h3>
<!-- /wp:heading -->

<!-- wp:separator -->
<hr class="wp-block-separator"/>
<!-- /wp:separator -->

<!-- wp:heading -->
<h2>Love At First Byte?😍</h2>
<!-- /wp:heading -->

<!-- wp:image {"align":"center","id":34,"sizeSlug":"large"} -->
<div class="wp-block-image"><figure class="aligncenter size-large"><img src="https://services.etin.space/notes/wp-content/uploads/2019/12/Screenshot-2019-12-06-at-9.30.15-AM-1024x419.png" alt="" class="wp-image-34"/><figcaption>Firebase's landing page</figcaption></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>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 <a href="https://firebase.google.com/docs/hosting">Firebase Hosting</a> while the back end was in Java and hosted elsewhere. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Thinking about it now, it was my earliest exposure to <a href="https://www.quora.com/Why-does-it-make-sense-to-separate-front-end-from-back-end">Distributed Client-Server Architecture</a> on the web.  All my prior experience had been with monoliths that served straight to the clients plate.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>I was intrigued. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>I ran <code>git clone</code> and set up Analytics on the project fairly quickly. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Time to deploy? Phew. Google to the rescue. The <a href="https://firebase.google.com/docs">Firebase Docs</a> were extremely helpful. <br></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>I'd need to install the <a href="https://firebase.google.com/docs/cli">Firebase CLI</a>, <code>firebase-tools</code> using NPM:</p>
<!-- /wp:paragraph -->

<!-- wp:preformatted -->
<pre class="wp-block-preformatted">$ npm install -g firebase-tools</pre>
<!-- /wp:preformatted -->

<!-- wp:paragraph -->
<p>And deploying?</p>
<!-- /wp:paragraph -->

<!-- wp:preformatted -->
<pre class="wp-block-preformatted">$ firebase deploy</pre>
<!-- /wp:preformatted -->

<!-- wp:paragraph -->
<p>'I was in love!</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Job done and I got paid!</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>But, how much does such a great service cost? Absolutely nothing!(With limits, of course 😒).</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Marry me FiFi! </p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Did I get her number?☎️</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>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.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>This changed when in November 2018 I had to build a <a href="https://etin.space">portfolio website</a> for myself. That's quite an interesting story itself, but the two most relevant parts are that </p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>I didn't have the money to pay for a domain and (shared) hosting like I usually would for my projects</li><li>I had just begun to learn React from <a href="https://reactforbeginners.com/">a Wes Bos course</a></li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>After building the portfolio website in good time, it was time to set up my project on Firebase.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Our First Date💑</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>To set up the project we'll need to head to <a href="https://console.firebase.google.com">the Firebase Console</a> and create a new Project. A Firebase Project contains "Apps" which share Firebase resources like Authentication, Database, etcetera. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>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:</p>
<!-- /wp:paragraph -->

<!-- wp:preformatted -->
<pre class="wp-block-preformatted">$ firebase init</pre>
<!-- /wp:preformatted -->

<!-- wp:paragraph -->
<p>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.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":36,"sizeSlug":"large"} -->
<div class="wp-block-image"><figure class="aligncenter size-large"><img src="https://services.etin.space/notes/wp-content/uploads/2019/12/EKI0dU3WwAUvqYO.png" alt="" class="wp-image-36"/><figcaption>Can you feel the fire?</figcaption></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>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 <code>build</code> directory.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Now, when we run the <code>firebase deploy</code> command from earlier, it'll copy the files from the public directory we specified and upload them to the Firebase cloud.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>We are Live!!! 🎉</h2>
<!-- /wp:heading -->

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

<!-- wp:paragraph -->
<p>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 <strong>Connect Custom Domain.</strong> </p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":35,"sizeSlug":"large"} -->
<div class="wp-block-image"><figure class="aligncenter size-large"><img src="https://services.etin.space/notes/wp-content/uploads/2019/12/Screenshot-2019-12-06-at-11.49.20-AM.png" alt="" class="wp-image-35"/><figcaption>The Console's sidebar</figcaption></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>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:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>Add a TXT Record provided in the Console to prove ownership of the domain.</li><li>Add an A record pointing to the Firebase Hosting's public IP</li><li>Add another A record pointing to another Firebase public IP for redundancy.</li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>And in 0-48 Hours your domain should be provisioned along with a free SSL certificate.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>What Else Can This Baby Do? 😉</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>So, that covers Hosting, which was far and away my most used Firebase service this year. But what other goodies does Firebase provide?</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>From the sidebar we can already see a lot of things, but my next favourite feature has to be Firebase Databases, specifically the <strong>Realtime Database</strong>. There's also Cloud Firestore, but I haven't used that yet.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":4} -->
<h4>The Firebase Realtime Database</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>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. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>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 <em>https://your-app-name.firebase.io/node-name.json</em> and do all the usual GETs, POSTs, PUTs &amp; DELETEs.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>It saved me the trouble of building a full back end for a few small projects I built in React. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>I also had plenty of joy using Firebase functions to build a Twitter Bot.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":4} -->
<h4>Cloud Functions for Firebase</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Firebase Functions allow you run server side code without infrastructure. Serverless, as the kids are calling it these days.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Inspired by the <a href="https://github.com/shalvah">numerous bots built by Shalvah</a>, 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?).</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>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).</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>In Conclusion 👋</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Firebase has become my first choice development platform. It's easy to use and incredibly versatile. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>I'm building a SAAS Product in Q1 2020 and I'm attempting to convince my team that it's what we should use. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Wish me luck.</p>
<!-- /wp:paragraph -->