Firebase Remote Config

Firebase Remote Config lets you change your app's behavior and appearance without publishing a new release. You store configuration values in Firebase and your app fetches them at runtime. Change a value in the Firebase Console and every user gets the new experience within minutes — no app store submission, no update required.

The Remote Control Analogy

Imagine publishing a book and realizing a chapter title should be different. Without Remote Config, you reprint the entire book (publish a new app release). With Remote Config, the book has a blank title page that fills in from a server at print time. Change the server value and every copy of the book reads the new title next time it is opened.

What Remote Config Controls

  • Feature flags — enable or disable features for all users or specific groups
  • UI text — change button labels, welcome messages, or promotional banners
  • Color themes — update accent colors without a release
  • API endpoints — switch between test and production endpoints
  • Numeric limits — change items-per-page, retry counts, or timeout values
  • Rollout control — enable a feature for 10% of users, then 50%, then 100%

Setting Up Remote Config

Go to Remote Config in the Firebase Console and click Create configuration. Add parameters — each parameter has a name, a default value, and a data type (string, number, boolean, or JSON).

Parameter Name     | Default Value  | Type
-------------------|----------------|--------
welcome_message    | "Welcome back" | String
items_per_page     | 20             | Number
show_promo_banner  | false          | Boolean
theme_color        | "#1976D2"      | String
feature_new_ui     | false          | Boolean

After adding parameters, click Publish changes. Parameters go live immediately.

Fetching Remote Config in Your App

import { getRemoteConfig, fetchAndActivate, getValue }
  from "firebase/remote-config";
import { app } from "./firebase";

const remoteConfig = getRemoteConfig(app);

// Set default values — used if fetch fails or on first load
remoteConfig.defaultConfig = {
  welcome_message: "Welcome back!",
  items_per_page: 20,
  show_promo_banner: false,
  theme_color: "#1976D2",
  feature_new_ui: false
};

// Fetch and activate the latest values
async function loadRemoteConfig() {
  try {
    const updated = await fetchAndActivate(remoteConfig);
    if (updated) {
      console.log("Remote Config updated.");
    } else {
      console.log("Remote Config already up to date.");
    }

    // Read values
    const welcomeMsg = getValue(remoteConfig, "welcome_message").asString();
    const itemsPerPage = getValue(remoteConfig, "items_per_page").asNumber();
    const showBanner = getValue(remoteConfig, "show_promo_banner").asBoolean();
    const color = getValue(remoteConfig, "theme_color").asString();

    applyConfig(welcomeMsg, itemsPerPage, showBanner, color);
  } catch (error) {
    console.error("Remote Config fetch failed:", error);
    // App continues with default values
  }
}

loadRemoteConfig();

Fetch Throttling

Remote Config caches fetched values to reduce server load. By default, it caches values for 12 hours in production. You can change this minimum fetch interval:

remoteConfig.settings.minimumFetchIntervalMillis = 3600000; // 1 hour

During development, set it to 0 to fetch fresh values every time:

// Development only — do not use in production
remoteConfig.settings.minimumFetchIntervalMillis = 0;

Conditional Values

Remote Config supports conditions that apply different values to different user groups. Define conditions in the console based on:

  • App version
  • Operating system
  • User property (from Analytics)
  • Percentage of users (for gradual rollouts)
  • Firebase Analytics audience membership

Example: enable feature_new_ui to true only for users whose Analytics plan user property is premium. All other users still see false.

Feature Flags Pattern

const featureNewUI = getValue(remoteConfig, "feature_new_ui").asBoolean();

if (featureNewUI) {
  renderNewDashboard();
} else {
  renderLegacyDashboard();
}

This pattern lets you deploy the new UI code in a release but keep it hidden behind a flag. Enable it in Remote Config when you are ready — no new release needed. Roll it back instantly if problems appear by setting the flag to false.

Key Takeaway

Remote Config stores configuration parameters in Firebase and delivers them to your app at runtime. Always define default values in code so your app works correctly before the first fetch succeeds. Use conditions to target specific user segments or OS versions. Use feature flags to ship code before it is publicly available and enable it remotely when ready. Avoid setting the fetch interval below 1 hour in production to prevent throttling.

Leave a Comment

Your email address will not be published. Required fields are marked *