Different environments on Firebase web application

Edit: The following solution is for Firebase "Realtime Database". It does not apply to "Firestore". Read the difference here.

1. Firebase Realtime Databases Sharding

Now (2018 March), Firebase Realtime Database allows you to create multiple instance.

Official Document: Scale with Multiple Databases

1. Go to your Firebase Project

2. In the Firebase console, go to the Data tab in the Develop > Database section. Select Create new database from the menu in the Databases section (upper right corner).

3. Customize your Database reference and Security rules, then click Got it.

4. (Optional) Modify the Security rule and Backup option of the new instance.

2. Usage

// Get the default database instance for an app
var database = firebase.database();

// Get a secondary database instance by URL
var database = firebase.database('https://testapp-1234.firebaseio.com');

3. Example Usage: Different Environment

firebase-config.js

const BUILD_LEVEL = "dev";
// const BUILD_LEVEL = 'stage'
// const BUILD_LEVEL = 'prod'

let config = {
  apiKey: "your_apiKey",
  authDomain: "your_authDomain",
  projectId: "your_projectId",
  storageBucket: "your_storageBucket",
  messagingSenderId: "your_messagingSenderId"
};

if (BUILD_LEVEL === "dev") {
  config.databaseURL = "https://your-project-dev.firebaseio.com/";
} else if (BUILD_LEVEL === "stage") {
  config.databaseURL = "https://your-project-stage.firebaseio.com";
} else if (BUILD_LEVEL === "prod") {
  config.databaseURL = "https://your-project-dev.firebaseio.com";
}

firebase.initializeApp(config);

Now to change the Firebase Database instance, you only need to change the BUILD_LEVEL variable.

Combine this feature with Git/Github/Gitlab workflow, Git hook, webpack, CI/CD tool, and you have a very flexible solution.

In case anyone has this question, there's an article on the Firebase Blog about this.

Note: This Firebase article assumes that you have already created a second Firebase project for this new environment (i.e. project-dev), and have copied the config details into your working env (i.e. project-dev). Master and dev are two different env, so it makes sense to have two different Firebase configs.

The article states:

Fortunately for us, the Firebase CLI makes it simple to setup and deploy to multiple environments.

Adding and switching between environments with the Firebase CLI is as simple as one command: firebase use.

$ firebase use --add This command prompts you to choose from one of your existing projects

Select the project you want to use for a different environment, and then give it an alias. The alias can really be whatever you want, but it’s common to use aliases like “development”, “staging”, or “production”.

Once you’ve created a new alias, it will be set as the current environment for deployment. Running firebase deploy will deploy your app to that environment.

Switching environments

If you want to switch to another environment, just provide the alias in the use command.

$ firebase use default # sets environment to the default alias

$ firebase use staging # sets environment to the staging alias

For a single command, you can also specify the environment using the -P flag:

$ firebase deploy -P staging # deploy to staging alias

Hope that helps!