Organizing Your Firebase Client-Side Configuration File

Note: The following examples are in React, but you can adapt them to your language of choice.

When you implement client-side Firebase, you need to add in the configuration goodies Firebase gives you at setup to initialize the Firebase object.

var firebaseConfig = {
  apiKey: "api-key",
  authDomain: "project-id.firebaseapp.com",
  databaseURL: "https://project-id.firebaseio.com",
  projectId: "project-id",
  storageBucket: "project-id.appspot.com",
  messagingSenderId: "sender-id",
  appId: "app-id",
  measurementId: "G-measurement-id",
};

Typically you do not want to repeat this config info in multiple places. Furthermore, you want to initialize the various Firebase objects, such as firebase, firestore, performance, and analytics, your app will make use of.

firebase.js

In my React apps, I create one file called firebase.js and place it in the main directory. Within this file I house the Firebase config info, initialize my objects, and export them. I then import the object from this file where ever I need access to Firebase resources.

import firebase from "firebase/app";
import "firebase/auth";
import "firebase/firestore";

import "firebase/analytics";
import "firebase/performance";

const firebaseConfig = {
  apiKey: process.env.REACT_APP_FIREBASE_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_DOMAIN,
  databaseURL: process.env.REACT_APP_FIREBASE_DATABASE,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_SENDER_ID,
  appId: process.env.REACT_APP_APP_ID,
  measurementId: process.env.REACT_APP_MEASUREMENT_ID
};

firebase.initializeApp(firebaseConfig);
const performance = firebase.performance();
const db = firebase.firestore();
const analytics = firebase.analytics();

export default firebase;
export { db, firebaseConfig, analytics, performance };

Note that by initializing the analytics object, you're now tracking basic user behavior. If you want to record specific events you will use the analytics object.

Now I'm set to go and can import my firebase.js file where ever I need access to the Firebase objects.

import firebase, { db, analytics } from "./firebase";

.env

You might have noticed the process.env.REACT_APP_FIREBASE_KEY. Instead of hardcoding config values in my firebase.js file (but you are welcome to do so), I instead utilize the .env file that React (using create-react-app or manually with Webpack) to manage the different environments.

Create a .env.development, .env.staging, and .env.production files to house your config files for your various environments. When you deploy, you can use the right config files for your environment. See Deploy Firebase for more information.

If you enjoyed, please consider subscribing to be kept informed.

Also check out my Firebase Substack Newsletter 🔥 for even more great Firebase articles and videos.