How to deploy a react-app to different firebase hosting environments(dev and prod)
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.
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
Login into firebase and select the google account you created your firebase projects with:
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
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.
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 .gitignore
file.
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_
4. Go back to yourfbconfig.js
file 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 formyblog-development
project.
- Repeat the step above to add an alias to your firebase production environment. In this example, my production environment is
myblog-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:
Final Remarks:
Thank you for staying with me up to this point. If you have any questions or suggestions, kindly comment below.😀