iwantcoding.com
🔥 Daily 👥 Rooms 🏆 Top Log in Sign up

Remote Config

Firebase Remote Config: server-driven app config + experiments. Flags, defaults, conditions, and live A/B tests without redeploying.

Firebase — Remote Config

EXAMPLE
// ===== Why Remote Config =====
// - Feature flags (toggle features without redeploy)
// - A/B tests + experiments
// - Per-platform / per-version overrides
// - UI copy + colour rollouts
// - Per-segment behavior (country, audience, version)

// ===== Web SDK =====
import { getRemoteConfig, fetchAndActivate, getValue } from 'firebase/remote-config';
import { initializeApp } from 'firebase/app';

const app = initializeApp(firebaseConfig);
const rc = getRemoteConfig(app);

// Default values (used if no fetch yet):
rc.defaultConfig = {
  showBanner: false,
  primaryColor: '#2563eb',
  greetingText: 'Hello',
  maxItemsPerPage: 20,
};

// Fetch interval (don't hammer the server):
rc.settings.minimumFetchIntervalMillis = 3600 * 1000;   // 1 hour
rc.settings.fetchTimeoutMillis = 60_000;

// Fetch + activate:
await fetchAndActivate(rc);

// Use:
const show = getValue(rc, 'showBanner').asBoolean();
const color = getValue(rc, 'primaryColor').asString();
const max = getValue(rc, 'maxItemsPerPage').asNumber();

// ===== Conditions (in console) =====
// Console -> Remote Config -> Add condition:
//   - Country: AU, NZ
//   - App version >= 1.5.0
//   - User audience: 'beta_testers'
//   - Platform: Web, iOS, Android
//   - Random percentile: 0% - 10%

// Conditions stack; first-match wins.

// ===== Real-time updates (newer feature) =====
import { onConfigUpdate } from 'firebase/remote-config';
onConfigUpdate(rc, async (snapshot) => {
  await snapshot.activate();
  renderUI();
});

// Pushes updates to active clients without polling.

// ===== A/B testing =====
// Console -> A/B Testing -> Create experiment.
// Targets a Remote Config parameter; randomly assigns users to variants.
// Tracks an Analytics goal (purchase, retention, ...).
// Roll out winning variant to 100% after the experiment.

// ===== Server SDK (cloud functions / Node) =====
import { initializeApp } from 'firebase-admin/app';
import { getRemoteConfig } from 'firebase-admin/remote-config';
const app2 = initializeApp();
const template = await getRemoteConfig(app2).getTemplate();
// Read parameters, evaluate for a given user context...

// ===== Local fallbacks =====
// Always set defaults: if fetch fails, the app still works.
// Save the last activated config to local storage for offline fallback.

// ===== Patterns to internalise =====
// - Defaults defined in code AND in console (different defaults per env)
// - Short minimum fetch interval in dev; long (1h+) in prod
// - Pair Remote Config with Analytics for measurable experiments
// - Type each parameter; do not stuff JSON blobs unless really needed

// ===== Pitfalls =====
// - Fetching too often -> quota throttling
// - Mixing critical app logic with Remote Config flags (a bad rollout = bad app)
// - Reading values BEFORE activate() -> defaults only
// - Skipping defaults -> app crashes when offline + first launch

Why it matters

Remote Config is feature flags + experiments without redeploying. Define defaults in code, override via conditions in console, pair with Analytics for measurable rollouts. Long fetch interval in prod, short in dev, always-have-defaults for offline. Real-time updates make rollouts a single button click.

Tip: Tweak the snippet with Try it Yourself », then sit the quiz at the bottom of the page.

Example

Example
import { getRemoteConfig, fetchAndActivate, getString } from 'firebase/remote-config';
const rc = getRemoteConfig(app);
rc.settings.minimumFetchIntervalMillis = 60_000;
await fetchAndActivate(rc);
const banner = getString(rc, 'banner_text');
Try it Yourself »

Discussion

Loading…