Deploy Firebase Different Hosting Environments

by Geoffrey Bourne

Google's Firebase is a great platform to quickly build apps. However, there are a few tricky things one must around, such as managing and deploying to different hosting environments.

While there are many ways to create and manage different Firebase environments, such as using Firebase’s env config variables, I'll show you my favorite and easiest way using NodeJS and ReactJS.

An Environment for Every Occasion

Here is what I do to create a dev, staging, and production environments with different configurations in Firebase.

1. Setup a unique Firebase project in the Firebase console for each environment, e.g. Production, Staging, and Development.

2. At a command prompt, assign an alias for each project with:

firebase use --add

You will be prompted to select a project and an alias name to associate - use something simple like dev, staging, and prod. You can see all the aliases in the .firebaserc file or by typing firebase use

3. Install "dotenv" with:

npm i --save-dev dotenv

4. Create a different .env file for each environment: .env.production, .env.staging, .env.development. Place your environment configurations in the appropriate .env files, such as your Firebase staging project config into .env.staging.

5. Add a build script "build-staging" to your package.json file (or build-dev) for each environment. For example:

"build-staging": "dotenv -e .env.staging react-scripts build"

6. Build with the script you just created:

npm run build-staging

This creates a static build of your React project using the environment variables you set in your .env file.

7. Deploy to the Firebase environment using -P followed by the alias name:

firebase deploy -P staging

8. Head to your project URL and verify the deployment was successful.

When you want to build and deploy to a different hosting environment, simply run the build script for that environment and deploy with that environment's alias.

Happy coding!

Thank you for reading. 🙏

But before you go: if you're a Firebase user, you're probably concerned about a surprise month-end bill or being suddenly shut off if your free tier runs out.

If this resonates with you, check out our app 🔥fireRun.io🔥 - the only way to monitor and control your Firebase spend and usage. Try it for Free.