How to host react app on multiple environment using Firebase and Gitlab.

Recently i was working on a client project, where i came across requirement of hosting a front-end and the back-end was all in smart contracts (Ethereum and Blockchain stuff). So i switched over to a new type of deployment method from usual containerization. I thought of using firebase for my front-end as there was no back-end for application and i could save a lot of time and money.

Firebase is a platform provided by Google to hosting mobile applications and web applications.

Firebase.

Firebase comes with a lot of feature but today we are going to just talk about hosting a Firebase app for different environments, keeping all the environments separate from each other and then integrating it with gitlab for Continuous Deployment.

Prerequisites :

1. A Firebase account with billing enabled.
2. A gitlab project.
3. A react app.

1. Setting up the Firebase :

First we need to setup our Firebase system for the project.

Go to https://console.firebase.google.com/ .

Login using your google account to get into firebase console.

Click on ‘Add project’ tab on firebase console.

Complete the simple few steps to create a new project over firebase.

Now we can see our project over firebase console.

Click on the project create and it will take you to the project dashboard for firebase.

Project Dashboard.

Next step will be creating web-apps for firebase project.

Create a web app with name production-’project_name’-app or what ever name you desire but i will suggest to follow this nomenclature so that you can follow what environment you are dealing with .

Click on this option create a new web-app for firebase project.

Next we will create 3 more web apps like this with 3 more environments (this was requirement for my project but you are free to create web-apps for your required environment) :

• staging-’project_name’-app
• qa-’project_name’-app
• review-’project_name’-app

After we have created web apps next step will be setting up hosting for these web-apps.

Go to hosting screen by clicking on ‘Hosting’ option available on left side on the project dashboard.

At the end of Hosting page there will be an option ‘Add another site’ under Advance, click on to create a site for hosting.

Enter the name for site like for production-project_name-app, we can use the same name for site and a new site will be created.

(there will be a default project site created by firebase, that we did not need to worry about )

Production site created along with default project site.

Create sites for all of our web-apps with same steps.

Different sites for our web-apps.

Next we will link all these sites to our web-apps.

Go to our project dashboard again > Click on the web-app > Click on settings option > Click on ‘Link to Firebase Hosting site’ under ‘Your apps’ menu.

Follow the same steps for all other web-apps and we will be done with Firebase console.

2. Setting up Firebase on local system :

First we need to setup our react app for the project which is topic for another discussion.

When we are done setting up our react app, we need to install firebase-tools with command

npm install -g firebase-tools

Next we will run ‘firebase init’ in our react app folder.

Proceed further and on next step select Hosting option from command line.

Next select an existing project option.

Select the project we created over Firebase.

Firebase init will ask which directory to use as public, here we can enter build but will later delete build folder created at the end of this process.

Enter No next to prompts.

Firebase now has generated 3 things :

• build folder (delete this)
• .firebaserc
• firebase.json

Next we will add our targets for firebase to make deployments.

Run ‘firebase target:apply hosting Target-Name Hosting-site-name’ command just like for my project it will be:

 firebase target:apply hosting qa-app  qa-projectname-app

Run this command for all your environments and your .firebaserc will look something like this

.firebaserc file.

Next step will be setting up our firebase.json file. Copy the below code with marked changes and change it according to your configurations.

{
 "hosting": [
   {
    "public": "build",
    "target": "target name from .firebaserc",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
},
{
    "public": "build",
    "target": "target name from .firebaserc",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      {
       "source": "**",
       "destination": "/index.html"
     }
   ]
},
{
     "public": "build",
     "target": "target name from .firebaserc ",
     "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
     "rewrites": [
       {
        "source": "**",
        "destination": "/index.html"
       }
     ]
},
{
     "public": "build",
     "target": "target name from .firebaserc",
     "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
     "rewrites": [
       {
         "source": "**",
         "destination": "/index.html"
       }
     ]
}
]
}

Now the firebase.json file will look like this

firebase.json file.

Target names for firebase.json .

We are all done with setting up Firebase for react app. We just need to do one more thing that is to get a CI token from Firebase for gitlab.

We will do it with a simple command

firebase login:ci

It will generate a token that will be added to our gitlab environment variables with name FIREBASE_TOKEN. Make sure to keep this token a secret and not letting anyone get it.

3. Setup our gitlab CI/CD for Firebase deployments :

We need to create a file name .gitlab.yml to setup our CI/CD.

There are different jobs and stages for CI/CD but we will create only build and deploy for our firebase project.

Copy the below code to setup the build stage for gitlab

build-web:
 stage: build
 script:
   - npm run build
 artifacts:
  paths:
   - ./build
   - ./.firebaserc
   - ./firebase.json

Copy the below code to setup our deployment stage for gitlab

deploy-review-app:
 stage: deploy
 environment:
   name: review
 before_script:
   - npm i -g firebase-tools
 script:
   - firebase deploy --only hosting:TARGET-NAME --token     $FIREBASE_TOKEN
deploy-qa-app:
 stage: deploy
 environment:
   name: qa
 before_script:
   - npm i -g firebase-tools
 script:
   - firebase deploy --only hosting:TARGET-NAME --token $FIREBASE_TOKEN
 only:
   refs:
    - dev
 when: manual
deploy-staging-app:
 stage: deploy
 environment:
   name: staging
 before_script:
   - npm i -g firebase-tools
 script:
   - firebase deploy --only hosting:TARGET-NAME --token $FIREBASE_TOKEN
 only:
   refs:
    - master
 when: manual
deploy-production-app:
 stage: deploy
 environment:
   name: production
 before_script:
   - npm i -g firebase-tools
 script:
   - firebase deploy --only hosting:TARGET-NAME --token $FIREBASE_TOKEN
 only:
   refs:
    - tags
 when: manual

Replace the TARGET-NAME with targets defined in .firebaserc

Conclusion :

We are all done setting up our Firebase project and integrating it with react app and gitlab. We can see all our deployments on Firebase Console under Hosting section. This is an approach to setup a clear deployment architecture for projects that just need front-end to be deployed. We can even link custom domains over Firebase to setup our production ready deployments.

Hence Firebase is a very good tool provided by google for creating and managing apps. So i end this article here and will come with some more good articles for future ;)