Firebase Remote Config

Firebase remote config

Let’s leverage the work already done by the Firebase team on Firebase Remote Config. What started out as a feature for native apps is now also available for the web Firebase SDK. For now, we are going to focus on how to get started.

Client-side only

One important aspect to keep in mind before we embark on the journey of using Remote Config is that this feature is client-side only. This means that the server-rendered HTML will not include a feature, even if it is enabled according to the feature toggle configuration. It is only once the client-side code runs and fetches the Remote Config details then the feature becomes visible.

In our Sapper-based web application, this is only an issue on the very first page load. Once that page is loaded, the feature toggle configuration is available on the client, and features that are turned on render instantly.

Initialize remote config

Let’s start by creating a new branch:

git switch -c add-feature-toggles

Open the services/web/src/template.html file using:

nano services/web/src/template.html

and add the following line below the firebase-analytics.js script to enable Remote Config:

<script src="/__/firebase/X.Y.Z/firebase-remote-config.js"></script>

This enables us to use the window.firebase.remoteConfig() to generate a new Remote Config instance and interact with the configuration stored on Firebase. Don’t forget to replace X.Y.Z with the version number provided to you by Firebase when you created a project.

Create a services/web/src/feature-toggles/index.js file by executing:

mkdir services/web/src/feature-toggles

touch services/web/src/feature-toggles/index.js

nano $_

and add the following definition of feature toggles:

export const FEATURE_TOGGLES = {
  vipWelcome: {
    name: "feature_vip_welcome"
  }
};

This gives us the flexibility to add more feature flags and also more properties for individual flags, such as a default value, later.

Next, we need a function to initialize the remote config, fetch the latest values and activate them on the client. Add the following below the code you entered above:

export const initFeatureToggles = async () => {
  const remoteConfig = window.firebase.remoteConfig();
  await remoteConfig.fetchAndActivate();
  return remoteConfig;
};

Excellent! That’s a good start, and all we need to do now is to call the init function. The best place to do that is in src/client.js. This file is where the client-side Sapper application is started. Open the file:

nano services/web/src/client.js

Right above the sapper.start() function call, add the following:

import { initFeatureToggles } from "./feature-toggles";
initFeatureToggles();

NOTE: The initFeatureToggles() is an asynchronous function that returns a promise. We don’t have to wait for the promise to resolve, as this would add an unnecessary delay in starting up the client-side Sapper application.