How to Use Firebase Remote Config: Simple Setup and Example

To use Firebase Remote Config, initialize it in your app, fetch the latest parameters from Firebase, and activate them to change app behavior remotely. Use fetchAndActivate() to get updates and getValue() to read config values in your code.

Syntax

The main steps to use Firebase Remote Config are:

• Initialize the Remote Config instance.
• Set default values for parameters in your app.
• Fetch the latest config values from Firebase servers.
• Activate the fetched values to apply them.
• Read the config values using getValue().

This lets you change app behavior without releasing a new version.

javascript

import { getRemoteConfig, fetchAndActivate, getValue, setDefaults } from 'firebase/remote-config';

const remoteConfig = getRemoteConfig();

// Set default values
setDefaults(remoteConfig, { 'welcome_message': 'Hello!' });

// Fetch and activate remote config
await fetchAndActivate(remoteConfig);

// Read a value
const welcomeMessage = getValue(remoteConfig, 'welcome_message').asString();

Example

This example shows how to initialize Firebase Remote Config, set defaults, fetch updates, activate them, and read a parameter to display a welcome message.

javascript

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

// Your Firebase config object
const firebaseConfig = {
  apiKey: 'YOUR_API_KEY',
  authDomain: 'YOUR_AUTH_DOMAIN',
  projectId: 'YOUR_PROJECT_ID',
  appId: 'YOUR_APP_ID'
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);

// Initialize Remote Config
const remoteConfig = getRemoteConfig(app);

// Set default values
setDefaults(remoteConfig, { 'welcome_message': 'Welcome to the app!' });

async function showWelcomeMessage() {
  try {
    // Fetch and activate remote config values
    await fetchAndActivate(remoteConfig);

    // Get the welcome message
    const message = getValue(remoteConfig, 'welcome_message').asString();

    console.log('Welcome message:', message);
  } catch (error) {
    console.error('Remote Config fetch failed:', error);
  }
}

showWelcomeMessage();

Output

Welcome message: Welcome to the app!

Common Pitfalls

Common mistakes when using Firebase Remote Config include:

• Not setting default values, which can cause your app to break if fetch fails.
• Not calling fetchAndActivate() before reading values, so you get stale data.
• Ignoring fetch errors and not handling them gracefully.
• Using long fetch intervals during development, delaying updates.

Always set defaults, fetch and activate before reading, and handle errors.

javascript

/* Wrong way: reading value before fetch and activate */
const messageWrong = getValue(remoteConfig, 'welcome_message').asString();
console.log('Wrong message:', messageWrong);

/* Right way: fetch and activate first */
await fetchAndActivate(remoteConfig);
const messageRight = getValue(remoteConfig, 'welcome_message').asString();
console.log('Right message:', messageRight);

Output

Wrong message: Welcome to the app!
Right message: (updated value from Firebase if any)

Quick Reference

Action	Method	Description
Initialize Remote Config	getRemoteConfig(app)	Create Remote Config instance for your app
Set Defaults	setDefaults(remoteConfig, defaults)	Set fallback values for parameters
Fetch and Activate	fetchAndActivate(remoteConfig)	Download and apply latest config values
Get Value	getValue(remoteConfig, key)	Read a parameter value
Convert Value	.asString() / .asBoolean() / .asNumber()	Convert parameter to desired type

Key Takeaways

Always initialize Remote Config and set default values before fetching.

Use fetchAndActivate() to get and apply the latest config values before reading them.

Handle fetch errors gracefully to avoid app crashes.

Use getValue() with type conversion methods to read parameters safely.

Test changes in Firebase Console and fetch updates in your app to see effects immediately.