Switching Between Staging and Production Firebase Deploys In A Create-React-App

When building web applications on firebase, it is always a good idea to push the final application to the brand new firebase project.

Go into your firebase console and setup a new firebase project. Explicitly name this project something-something-PRODUCTION so that there is never any confusion between your original project and this new production one.

Your original project becomes your staging server. A safe place for you to try out new features and test things before you push the changes to your production server.

Your production server is the one you connect your domain to and share with the world.

You can flip between the two by connecting both firebase projects to your web application.

In the command line navigate into your project and type:

firebase use --add

The command line will ask you which project you want to connect to, scroll through the available projects till you find the new PRODUCTION project you just created.

You will be asked if you want to give this new firebase project an alias, chose something short like prod so you don’t have to type out a ten letter word every time you want to deploy.

Once the setup is complete you can type firebase use and it will show you all the firebase projects you application is now connected to. You can switch to the production server by typing out firebase use prod (replace prod with whatever alias you gave the new project).

To actually deploy to this new production server you’ll need to navigate into your codebase and find the file where you added your firebase config, it looks something like this:

const config = {
        apiKey: 'xxx',
        authDomain: 'xxx',
        databaseURL: 'xxx',
        projectId: 'xxx',
        storageBucket: 'xxx',
        messagingSenderId: 'xxx'
      }

If you are using a create-react-app project then you can switch the config object out with the following:

const config =
  process.env.NODE_ENV === 'production'
    ? {
       apiKey: 'xxx',
        authDomain: 'xxx',
        databaseURL: 'xxx',
        projectId: 'xxx-PRODUCTION',
        storageBucket: 'xxx',
        messagingSenderId: 'xxx'
      }
    : {
        apiKey: 'xxx',
        authDomain: 'xxx',
        databaseURL: 'xxx',
        projectId: 'xxx',
        storageBucket: 'xxx',
        messagingSenderId: 'xxx'
      };

Copy the details from your production project in the top and your original project in the bottom. When you go to the authentication tab in firebase and click on the ‘web setup’ button in the top right you will see the details we are talking about.

Now, when you spin the project up locally it will use your staging server’s database. When you run yarn run build and firebase deploy it will host any changes you made (and tested) on the production server.

If you are uncertain about whether you are pushing to production or not, type firebase use in the command line and it will highlight where you are about to deploy to.

It is easy to lose track of what got pushed where, or whether something was successfully deployed I always add a tiny line in the footer that tell me the version number of the app. It’s the same colour as the footer so you can only find if you know where it is and you have to highlight it. I manually update the version number before I deploy and then I check the footer to make sure things match up.