Environment configuration in Firebase - Mini Project: Build & Apply

Environment configuration

📖 Scenario: You are setting up a Firebase project for a web app. You want to manage different environment settings for development and production to keep your app organized and safe.

🎯 Goal: Create a Firebase environment configuration that defines separate settings for development and production. This will help you switch between environments easily and keep your app secure.

📋 What You'll Learn

Create a Firebase configuration object for the development environment

Add a variable to select the current environment

Use the environment variable to choose the correct Firebase config

Export the final Firebase configuration for use in the app

💡 Why This Matters

🌍 Real World

Managing environment configurations is essential for deploying apps safely and efficiently. It helps keep development and production settings separate to avoid mistakes.

💼 Career

Cloud engineers and developers often configure environment settings to ensure apps run correctly in different stages like development, testing, and production.

1

Create the development Firebase configuration

Create a constant called firebaseConfigDev with these exact properties and values: apiKey: 'dev-api-key', authDomain: 'dev-project.firebaseapp.com', projectId: 'dev-project', storageBucket: 'dev-project.appspot.com', messagingSenderId: '1234567890', appId: '1:1234567890:web:dev'.

Firebase

// Your code here

Need a hint?

Use const to create an object with the exact keys and values given.

2

Add the environment selector variable

Create a constant called currentEnv and set it to the string 'development'.

Firebase

const firebaseConfigDev = {
  apiKey: 'dev-api-key',
  authDomain: 'dev-project.firebaseapp.com',
  projectId: 'dev-project',
  storageBucket: 'dev-project.appspot.com',
  messagingSenderId: '1234567890',
  appId: '1:1234567890:web:dev'
};

// Your code here

Need a hint?

Use const currentEnv = 'development'; to set the environment.

3

Create the production Firebase configuration and select config

Create a constant called firebaseConfigProd with these exact properties and values: apiKey: 'prod-api-key', authDomain: 'prod-project.firebaseapp.com', projectId: 'prod-project', storageBucket: 'prod-project.appspot.com', messagingSenderId: '0987654321', appId: '1:0987654321:web:prod'. Then create a constant called firebaseConfig that uses a ternary operator to select firebaseConfigDev if currentEnv is 'development', otherwise firebaseConfigProd.

Firebase

const firebaseConfigDev = {
  apiKey: 'dev-api-key',
  authDomain: 'dev-project.firebaseapp.com',
  projectId: 'dev-project',
  storageBucket: 'dev-project.appspot.com',
  messagingSenderId: '1234567890',
  appId: '1:1234567890:web:dev'
};

const currentEnv = 'development';

// Your code here

Need a hint?

Use a ternary operator to select the config based on currentEnv.

4

Export the final Firebase configuration

Add the line export default firebaseConfig; at the end of the file to export the selected Firebase configuration.

Firebase

const firebaseConfigDev = {
  apiKey: 'dev-api-key',
  authDomain: 'dev-project.firebaseapp.com',
  projectId: 'dev-project',
  storageBucket: 'dev-project.appspot.com',
  messagingSenderId: '1234567890',
  appId: '1:1234567890:web:dev'
};

const currentEnv = 'development';

const firebaseConfigProd = {
  apiKey: 'prod-api-key',
  authDomain: 'prod-project.firebaseapp.com',
  projectId: 'prod-project',
  storageBucket: 'prod-project.appspot.com',
  messagingSenderId: '0987654321',
  appId: '1:0987654321:web:prod'
};

const firebaseConfig = currentEnv === 'development' ? firebaseConfigDev : firebaseConfigProd;

// Your code here

Need a hint?

Use export default to make the config available to other files.