Integrating Firebase with a Stencil Built PWA

Click here to share this article on LinkedIn »

Some apps rely solely on local data to provide a great user experience. Personally, I don’t know what apps those are, but I’m sure they exist. But a common experience is that when you build a mobile app, you run into a point where you need to start integrating a backend into that app. You can build your own backend, but that could take a significant amount of time and experience that you might not have. Instead there is firebase, a fully built backend as a service that makes integrating a backend into your app relatively painless.

Firebase Realtime Database

The Firebase Realtime Database is a cloud-hosted NoSQL database that lets you store and sync data between your users in realtime. — Firebase

Firebase’s realtime database is incredibly powerful, and removes the whole process of building a RESTFull backend for you application. So lets get started adding it to our application.

Configure Firebase

First you need to sign up and start a firebase project. Once you signup for firebase, go to your dashboard and “add a project”

‍

Add A Project To Your Firebase Account

After this, there should be a easy access button that says “Add Firebase to your Web App”. Click that and you should see some configuration details that look like this.

This configuration is important but it is where our configuration process will differ from the standard web application configuration.

‍

Configure PWA with Firebase

Instead of following the web application docs to setup firebase, we are going to follow a similar process for the node.js setup, as they use module imports and npm modules.

To start, in the parent directory of your web app, install firebase with the command

npm install --save firebase

Then, in your entry point file for your stencil project (for me, the entry point is my-app.tsx from the ionic-pwa-toolkit project), we are going to import firebase and create a configuration file to store our configuration.

** Important note, import firebase with the new TypeScript 2.7 import statements. This took me a while to figure out.

import firebase from ‘firebase’

and not

import * as firebase from ‘firebase’

Now you see in this code I am importing my configuration from a file called config.js. We are doing this because it is generally good practice to separate out your config, but also so that we can remove our configuration details from source control, so that we can make our app open source.

To accomplish this, in the “helpers” folder of your project, create a file called config.ts, and add this code (plus your firebase configuration details).

Now we should have everything configured to start using firebase!

Realtime Database

Now that everything is configured, lets add some real example code. I have been working on a sample application that has a job board where people can vote on the jobs they like, and it mirrors the voting process on reddit / hacker news. Were going to use that as a sample just to show what can be done.

Sample Job Listing

Now don’t hate on my design, because I never really learned how to paint things. In our job listing app, there is a voting system that we want to implement, where we want to listen for when other people vote on jobs and update our “points” for each job listing. To do that, we will attach our firebase listener during the componentDidLoad lifecycle event of our stencil component.

The code listens to firebase events on a job and adds up the number of upvotes and downvotes on a specific item.

More Firebase with PWA’s

Firebase is a very powerful tool to add to your stencil project and I know I am really happy with my implementation.

If you want to learn more about utilizing firebases other features, or want to go into more depth about how to implement firebase with your next PWA be sure to check out my courses in “Start A Project”. In both of the PWA courses we go over how to implement firebase into your web application.

Originally published at www.pwatoday.com.