How to deploy a react-app to different firebase hosting environments(dev and prod)

7 min readOct 26, 2020

When developing an app using firebase as a Backend-as-a-Service (or any backend you connect to in general), it is always a good practice to perform your development on a separate backend. The reason is, you don’t want to pollute your production database with dummy data or corrupt data in production.

What this blog covers:

Deploying a single react application on different firebase hosting projects (For now🙏🏾).

Getting started:

Spin up a react project using create-react-app and give your project a name. In this example, I am going to name my project dev-prod-environments

npx create-react-app dev-prod-environments

2. Next, head over to firebase and create two projects. For example, myblog-development signifies the development environment and myblog-production signifies the production environment. You can name your project anything you want. It is advisable to add a flag ( dev or prod ) to help you differentiate between the environments.

creating a development environment for myblog firebase project

delete localhost under the authorized domain for the production environment

Quick Tip: For your firebase production environment project only, head over to authentication → click on sign-in-method → scroll-down to authorized domains. Restrict the localhost from the authorized domain by deleting it. The reason being that we don’t want to send or retrieve data when running our application in development mode. We should only manipulate the production backend only when our app is running live.

3. The next step is to register and add firebase to your web app. Don’t forget to enable firebase hosting for both projects. After, copy the configuration settings object on the project settings page in the format below:

// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
  apiKey: "your key",
  authDomain: "xxxxxxxxxxx",
  databaseURL: "xxxxxx",
  projectId: "xxxxxxxxxx",
  storageBucket: "xxxxxxxxxxx",
  messagingSenderId: "xxxxxxxxxxx",
  appId: "xxxxxxxxx",
  measurementId: "xxxxxxxxx"
};

4. We are done with firebase for now.

Quick Recap:

Well done, if you have been able to get to this point. But let’s take a quick recap of what we have done to ensure that we are not missing any steps.

Created a react project
Created two firebase projects, one for production and the other for development
Restricted localhost from the list of authorized domains in the production project
Registered both apps and obtained the configuration settings object, which you will use to connect your react app to firebase.

Installing and initializing firebase in our React Project

For you to use firebase in your react project, you will first of all have to ensure that you have firebase-tools installed globally on your local machine. Installing this library will enable you to run firebase commands in your command-line or terminal

npm install -g firebase-tools

Next, install the firebase library by running the command:

npm install firebase

firebase login

Initialize firebase, use the up and down arrow keys to navigate to the hosting feature, and press the enter key to confirm your choice.

firebase init

initializing firebase and choose the hosting feature

You already have a project, hence choose the existing project option and select your development environment project. It is advisable to start with the development environment project.

selecting an already existing project

Type build as the public directory to be used and answeryes to configure the project as a single-application

Create a firebase configuration file within your project. I named my fbConfig.js Within the file, import and initialize firebase as seen below.

Answering your Questions:

We have two firebase configuration settings object(one for production and the other for development). I know you will be wondering, are we going to create two firebase configuration files? For example, we already have our development configuration settings object infbConfig.js . Are we going to copy the production configuration object settings to another file? Let’s say a fbConfigProd.js ?

The answer is NO 😀. Taking that approach is too rigid and tedious. This is the perfect time to create our environment variables for both development and production. After, we will install a library called env-cmd and write some scripts within our package.json file to automate our deployment to both environments.

Creating the environment variable files.

Create two environment variable files in the root of your project

touch .env.development .env.production .env.example

Quick Tip: I said two environment variables, but I created three? Yes, as best practice, it is not advisable to expose your environment variable secrets, especially when you’re using a version control tool like git and hosting it on Github. I created the third file as a guide for anyone that clones the project to see the structure of the environment variable and the values expected.

2. Make sure to ignore the .env.development and .env.production files from being committed by adding them to your .gitignorefile.

environment variable files for development and production

3. Copy the configuration for each firebase project into their respective environments.

Quick Tip: In order for React to access these environment variables through process.env, start your environment variable name with REACT_APP_

structure of the environment variable file

4. Go back to yourfbconfig.jsfile and replace all the string values in your configuration settings object and access your env variables using the global variable process.env followed by the name of the environment variable.

Ok, guys, it is now time to install env-cmd library and write some scripts.

If you’re wondering, env-cmd library is a simple node program for executing commands using an environment from an env file.

npm i -D env-cmd

Now, I will create aliases for both projects by running:

firebase use --add

Next, select the project you will want to associate an alias with. In this example, I will use dev as an alias for myblog-development project.

Repeat the step above to add an alias to your firebase production environment. In this example, my production environment ismyblog-production .
In your package.json file, write a script to build and deploy your react app to either to production or development environment. Below is the code to enable all the magic to happen.

"build:dev":"env-cmd -f .env.development npm run build && firebase deploy -P dev""build:prod":"env-cmd -f .env.production npm run build && firebase deploy -P prod"

Explaining the script above:

I created a build script for my development and production environment. When I want to deploy my app’s current state to the development environment on firebase, all I have to do is to run the build script for the development environment:

npm run build:dev

Up till this point, we have not run our application. For us to distinguish between what our production site looks like against the development site, I will use a unique environment variable to help us distinguish each project.

Using REACT_APP_AUTH_DOMAIN variable, open App.js and add the following:

<p>{process.env.REACT_APP_AUTH_DOMAIN}</p>

You should see the URL link for the development environment when you run your project on localhost.

Also, when you access the URL link to the live site hosted on the production environment after deploying your app npm run build:prod, you should see the domain of the production project on your site, as seen below: