Deploying React Js Project on Google Firebase
Recap
In my previous blog post I talked about implementing Microsoft OAuth Provider with Google Firebase Authentication using React Js & Redux. It was in great detail & beginner friendly make sure to checkout that one too.
Prerequisites
- Google Firebase Free Account
- Good understanding of React & Redux
Just in case if you want to preview this article’s Firebase Hosted Project : link
Let’s Get Started
We will not spend time in writing React Redux app rather let me share with you a readymade redux-scaffold-project. Please grab your copy from github repository here. In case you want to test the application then please follow the Installation steps written in project Readme.
This project has 3 routes. Auth status & Todos are stored in Redux Store.
1. Login
2. About
3. Home (Protected)
I have followed standard practices while creating this project so feel free to use it as a starter for any of your projects :)
Setting Up Firebase Project
In Firebase, we first create a project & then create an application inside it. You can have multiple applications inside one project. Many Firebase services have nice free plans for hobbyist developers. It is user friendly & one does not need to be DevOps person to work with Firebase.
To create project, open firebase console after signing in. If you have not created any projects in past then it would look like below. Click Create a project button.
Next you will be asked for project name & if you want to enable Firebase Analytics. I have turned it off to keep things specific but feel free to try it on your own. They give Real Time audience, Location based audience, visitors age group & many more stats. Below are the screenshots for creating firbease project (left to right)
Firebase Hosting
Firebase Hosting is very straight forward. If you practice it few times then it should not take more than 2 minutes to deploy projects! They cache your project in SSDs & keep it distributed around the world, this helps user to access your site quickly. On top of that they also provide free SSL certificate so your site is always secure.
In the left side bar under Project Overview select Hosting & then click Get started button on right Header. Please refer below screenshot.
I highly encourage you to watch the video at bottom & also go through the links they have provided along with it.
Open our React Redux project’s root directory in Vscode & launch integrated terminal (View > Terminal).
- Install Firebase CLI through npm by running below command in integrated terminal of Vscode. (if you have done it before than skip)
npm install -g firebase-tools2. Firebase CLI login. Run below command in terminal.
firebase login- It will ask you to allow collecting CLI usage & reporting errors (usual stuff). I have pressed Y & Enter key.
- It will open “Sign In Google Account” webpage in your default browser.
- Choose your firebase linked Gmail account. After that click Allow when it says “Firebase CLI wants to access your Google Account”.
- Finally it will show you confirmation message “Firebase CLI Login Successful”. (You can close this webpage now)
3. Initiating Firebase project inside React Redux Project (please make sure you are in root directory, you can run ls (for mac, linux,..) or dir (for windows) in Vscode integrated terminal & confirm you see package.json file listed.
firebase init- After running above command, you will see cool yellow FIREBASE word written in terminal & below that list of options asking you to select one of them. Move down to Hosting: Configure and deploy Firebase Hosting sites & press Space key > Enter key to confirm.
- Then it should ask you to do Project Setup. Select the first option Use an existing project. (press Enter key)
- It will get the list of all your Firebase projects, select the one we created during Setting Up Firebase Project (Fig 3)
- Now you will be asked for name of public directory, type build & press Enter
- IMPORTANT : Next up it will ask if we want to configure our react project as a single-page app. YES (type Y & press Enter)
- Set up automatic builds and deploys with GitHub? Not required for now (type N & Enter key) With this Firebase Initialization is complete!
I have consolidated all steps in below screenshot in case you need visual reference. (this is just one time setup per project)
Notice 2 files are added to project root after completing above steps.
1. firebase.json contains all hosting properties
2. .firebaserc contains project id.
You can commit these to your project github repo if needed.
Adding Deploy Script
You can safely close integrated terminal for now & also dismiss Set up Firebase Hosting dialog by clicking “Continue to console” button in firebase console. (It appeared when we clicked Get started in Fig 4).
Inside project in Vscode, open package.json & add deploy script under scripts property. (don’t forget to put , at end of eject script)
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"deploy": "npm run build && firebase deploy --only hosting"
},This script will build react project & deploy build folder to firebase. By default react projects create public builds in build folder & that is why we had set this folder as our public folder while initialising firebase project in terminal.
Start the Engines!
Run below command in terminal & your project will be deployed to Firebase Hosting platform within 2 mins:
npm run deploy
Find the url of deployed project at the bottom. It will be like following:
https://<project-id>.web.appFor deploying updates, run the same npm deploy script.
Epilogue
Delta Auth is a fictional name with regard to this project & article. It is used just for demonstration purpose. Any resemblance to 3rd party entities is purely a coincidence.
I am learning Docker & Next Js, probably write something about it next time. If you liked this article leave some claps, share your doubts on comment box below & I’ll see you next time!
