Server-side Rendering With Preact and Firebase

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.

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.

ＬＩＫＥ | ＣＯＭＭＥＮＴ | ＳＨＡＲＥ | ＳＵＢＳＣＲＩＢＥ The Firebase Realtime Database is a cloud-hosted NoSQL database that lets you store and sync data between your users in re...

Back in the day, rendering a website was simple. You needed a web server that served HTML files. Those were static sites. Then developers started using databases and authentication. To achieve that, they needed to manipulate the HTML file before serving it.

An overview of the differences between client-side rendering and server-side rendering and how to change your Angular application to do…

ＬＩＫＥ | ＣＯＭＭＥＮＴ | ＳＨＡＲＥ | ＳＵＢＳＣＲＩＢＥ Firebase is a mobile and web application development platform developed by Firebase, Inc. in 2011, then acquired by Google...

In the previous article, we described how to make a production build and deploy it to a server. Naturally, the next step is the server-side rendering. We are going to walk through the process by converting Create React App to a server-side rendered application.