Firebase is a great tool for getting data from a server to a client. Firebase handles caching, retries, socket management, and all the other unpleasant details of getting data to a client with spotty internet connection. In particular, Firebase is excellent for mobile web and mobile apps. In this article, I’ll walk you through using Firebase with Preact, a lightweight React alternative, to build a simple app with server-side rendering.

Setting Up The App

Here’s the pushups app on GitHub. The general idea is that you assign pushups to people when they’re late for meetings and then mark your pushup assignments as complete.

To set up a Firebase project for this app, follow Firebase onboarding and create a new project. Clone the GitHub repo and copy the project’s web config (from Authentication -> Web Setup) into firebaseConfig.js. Your firebaseConfig.js should then look like:

module.exports = {
  apiKey: /* ... */,
  authDomain: /* ... */,
  databaseURL: /* ... */,
  projectId: /* ... */,
  storageBucket: /* ... */,
  messagingSenderId: /* ... */
};

You should then be able to run npm start and run the app.