Different environments on Firebase web application - firebase

Question

I am building a web application with Firebase. Currently I can say that I do have two stages - development, the firebase serve which runs the localhost and firebase deploy --only hosting which uploads the web application on Firebase hosting.
Everything is fine with that, but I do not see this as a professional solution. The problem that I see is that, my local environment and the live web application share the same database. I did quite some research on the topic and I understood that there is no way to have two databases per one project on Firebase. The solution that is offered out there, is to create two projects on Firebase, one for development and one for production. Or even if you want to, one for staging.
This solution seemed completely fine with me. It's a good idea for sure. Couple of projects, for couple of environments, separate databases, just perfect. Then just before implementing this solution another problem bumped in my head. If I say, let's create a staging project, in order to serve me as a staging environment, and I decide to deploy my web application, the staging web application will be publicly available, so it will also get indexed by Google and so on.
So, what could you advice me in this situation? How can I make sure that my staging web application (hosted on the staging Firebase app) will not be available for others and will not be indexed by search engines. I thought about white-listing IPs or VPC, but I have no clue how to proceed in a way that is free and reliable.

Answer 1

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!

Answer 2

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
Go to your Firebase Project
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).
Customize your Database reference and Security rules, then click Got it.
(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.