Firebase RemoteConfig Integration with your web app

Disclaimer: This tutorial is mainly targeting web apps developing

This tutorial is divided into two parts:

1. Integrating to Firebase RemoteConfig and setup our configs object
2. Create a HOC (Higher Order Component) that fetches the remote configs and provides them to our web app.

Integrating to Firebase RemoteConfig and setup our configs object

1. Create a new web project on Firebase

goto https://console.firebase.google.com/u/0/

2. Get your new firebase app settings keys, they will be used in our react web app

3. let’s create some new configs object in Remote Config and publish it.

Create a HOC (Higher Order Component) that fetches the remote configs and provides them to our web app

1. install firebase in your react app dependencies

yarn add firebase

2. Create a HOC

/* eslint-disable no-underscore-dangle */
import React from 'react';
// Firebase App (the core Firebase SDK) is always required and
// must be listed before other Firebase SDKs
import firebase from 'firebase/app';
// Add the Firebase services that you want to use
import 'firebase/auth';
import 'firebase/firestore';
import 'firebase/remote-config';




// these are the firebase config keys that we copied previously from firebase web app
// place them in your env file so you can switch between multiple Firebase web apps according
// to your environment
const firebaseConfig = {
  apiKey: 'AIzaSyDNojvRmGBJJvWG0OxfkfIr_z4etRAIBwM',
  authDomain: 'account-management---fe.firebaseapp.com',
  projectId: 'account-management---fe',
  storageBucket: 'account-management---fe.appspot.com',
  messagingSenderId: '244661602783',
  appId: '1:244661602783:web:8fee4116044c92861a1c6a',
  measurementId: 'G-F23TX392EQ',
};


// eslint-disable-next-line import/prefer-default-export
export const withFireBaseRemoteConfig = WrappedComponent =>
  class extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        myAppConfigs: undefined,
      };
    }


    componentDidMount() {
      firebase.initializeApp(firebaseConfig);
      const firebaseRemoteConfig = firebase.remoteConfig();
      if (firebaseRemoteConfig) firebaseRemoteConfig.settings.minimumFetchIntervalMillis = 0;
      if (!this.state.appConfig && firebaseRemoteConfig) {
        firebaseRemoteConfig
          .fetchAndActivate()
          .then(() => firebaseRemoteConfig.getAll())
          .then(remoteFlags => {
            // in remoteFlags you will find all the config objects you have created
            // we named our config object "myAppConfigs" in firbase web app.
            if (
              remoteFlags &&
              remoteFlags.myAppConfigs &&
              remoteFlags.myAppConfigs._source === 'remote'
            ) {
              const { _value } = remoteFlags.myAppConfigs;
              this.setState({
                myAppConfigs: JSON.parse(_value),
              });
            }
          })
          .catch(err => {
            console.log(err);
          });
      }
    }


    render() {
      const { myAppConfigs} = this.state;
      return <WrappedComponent myAppConfigs={myAppConfigs} />;
    }
  };

in App.js file

import React, { PureComponent } from 'react';


// Import your HOC component
import { withFireBaseRemoteConfig } from '../app/withFireBaseRemoteConfig/withFireBaseRemoteConfig';


class App extends PureComponent {
  constructor() {
    super();
    this.state = {};
  }




  render() {
    const { myAppConfigs} = this.props;


    return (
      // Code
    );
  }
}


export default withFireBaseRemoteConfig(App);

Now your app is ready to receive remote configs from firebase.