How to deploy React Web Application on Firebase with different environments
When you implement React Web Application then need to build and deploy on firebase, there’s no problem, if you have only one environment or you have configuration file store. But, in real life you have more than one environments such as dev or test and prod. This can be your problem. Currently, we have many solutions to solve it and I’m going to share one of them. This article will guide you to set environments on multiple Firebase hosts.
> Let’s do it
First of all, you need to create React Web Application. To create one instantly, I use the command $ npx create-react-app react-firebase-diff-env . I hope it works for you. If everything ok you just try $ npm start .
Next, Go to your Firebase console here then
- Click Add project
- Enter your project name e.g. react-fb-diff-env-prod and react-fb-diff-env-dev
- Configuration Google Analytics
Get started by adding Firebase to your app
1. Register app </>
2. Click Next on Add Firebase SDK
3. Install Firebase CLI $ npm install -g firebase-tools4. To deploy to Firebase Hosting, you need the account authorization $ firebase login then initial Firebase by command $ firebase init then deploy it using $ firebase deploy
PS1. Remind create two project dev and prod.
PS2. Don’t do step 4 because we will do it after we set configuration at Firebase Application complete.
Get the configuration from Firebase App
To get the configuration from Firebase Application, you need to click the Gear at your application then scroll down until found Firebase SDK snippet then click Config
Remind, you must have two configurations.
Now, we have two Firebase application like this.
> Initializing Firebase in our React Web Application
Go to your directory then command below to install firebase.
$ npm install firebaseInitializing Firebase
$ firebase login
$ firebase initPress spacebar at Hosting: Configure and deploy Firebase Hosting sites .
Then select Use an existing project .
Then select react-fb-diff-env-prod .
Enter build to set the directory named build as a public directory then enter 1no1 to not rewrite /index.html file.
Hosting: Configure and deploy Firebase Hosting sites
Use an existing project .
react-fb-diff-env-prod
Set up React Web Application
Update src/App.js with the following code.
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import firebase from 'firebase';class App extends Component {
constructor(props){
super(props);
var config = {
apiKey: process.env.REACT_APP_API_KEY,
authDomain: process.env.REACT_APP_AUTH_DOMAIN,
projectId: process.env.REACT_APP_PROJECT_ID,
storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
appId: process.env.REACT_APP_APP_ID,
measurementId: process.env.REACT_APP_MEASUREMENT_ID};
if (!firebase.apps.length) {
firebase.initializeApp(config);
}
}
render() {
return (<>
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>{process.env.REACT_APP_PROJECT_ID}</p>
</header>
</div>
</>
);
}
}
export default App;
Now we’ve added Firebase configuration and changed App.js to be Component. So, After that we will create env file as following
$ touch .env.eg .env.development .env.productionAdd the following configuration to these three files and replace the value with your project information to both env files except the file .env.eg. I need to keep it as an example on github.
REACT_APP_API_KEY={your_api_key}
REACT_APP_AUTH_DOMAIN={your_auth_domain}
REACT_APP_PROJECT_ID={your_project_id}
REACT_APP_STORAGE_BUCKET={your_storage_bucket}
REACT_APP_MESSAGING_SENDER_ID={your_messaging_sender_id}
REACT_APP_APP_ID={your_app_id}
REACT_APP_MEASUREMENT_ID={your_measurement_id}go to .gitignore then add
.env.development
.env.productionNext step, we will install env-cmd
The env-cmd library is a program for executing commands using an environment from an env file.
$ npm i -D env-cmdAdd an alias to Firebase environment by using command
$ firebase use --add
Please be reminded add both environments. $ firebase use --add .
Next step, Add configuration to package.json
Go to package.json then modify part of “scripts” like this
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"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"
}> Let’s try
$ npm start // It should show development env
$ npm run build:dev // It should show development env on firebase
$ npm run build:prod // It should show production env on firebase
If you made it, I want to tell you… Congratulations!!
> Conclusion
However, this is one of many methods to set an environment. There are other ways to do so e.g. using dotenv instead of env-cmd which you can find more at this link. In addition, the next interesting topic for you to study is how to manage secret and protect sensitive data which I recommend Vault to be your first step.
Thank you so much for staying with me until this line. I hope you can make it done and have fun with this article. Please feel free to give me comments and suggestions.
You can clone this project source code from Github
