Different environments on Firebase web application

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.

Jemison

It sounds like you're assuming that Google will index your staging web site even if you never expose the URL to it. I'm not sure that's a correct assumption. Google will crawl web sites that it is specifically told to crawl, or if it finds a link on some other page to it. Also, you can tell bots not to crawl a site by publishing a robots.txt file to your site. en.wikipedia.org/wiki/Robots_exclusion_standard – Ibarra

Thank you very much for the answer. The thing is that I want to make sure my staging web application is accessible only by me. So if you type mystagingapp.firebaseapp.com in the ideal situation you cannot access it. – Jemison

The best you could probably do is protect its sensitive content with Firebase Authentication. – Ibarra

There is also a command in the cli to disable hosting for a particular environment when you don't want it available – Parolee

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!

Zest

Underrated answer! upvoted - this is exactly what the title of the question does Different environments on Firebase web application – Outpatient

but how does my web app switch if my firebase config is in code? I'd imagine we add them to env files, but then how does the cli know which env file to use? – Pensionary

@Pensionary did you ever figure out the answer to your question? I am having the same problem. – Nathalienathan

@Nathalienathan no fixes from firebase yet – Pensionary

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

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.

Floria

Huh, great! Thanks! :) – Jemison