Using Google Firebase to host and manage your apps
Trying to find a source to absorb knowledge and implement them in our own creation is a daily life activity as a new developer. I’m especially intrigued by looking at creating clones of websites that are spreading on youtube or programmers blogs. I believe this is a great way to learn what type of programming language is being used in modern web and mobile applications and see what kind of improvement can be made, perhaps even make a better one of your own.
Upon recreating one popular website, I learned a bunch of things that I didn’t have time to learn during my Coding Bootcamp a few months ago and one of them was Google Firebase.
What is Google Firebase?
It is google’s mobile application platform that helps you manage, grow, and basically earn money with your application as it scales. Firebase has multiple features that make it really easy to manage your application, but I only used a few of them which are Authentication, Hosting, and Cloud Firestore.
If you are interested to read in-depth explanations about Google Firebase, I attached a link to a great blog of a developer who worked using Firebase.
Installing Google firebase suite on your React app
Make sure you have your React App created using npx create-react-app <your-app> . When all the packages have been installed, Go to https://firebase.google.com and then sign in using your google account. Once you’re in:
- Click on the bars on the top left
- click products
- and then ‘Get started’ -> ‘Add Project’
There will be 3 steps before you will start creating the project:
- Give your project a name
- You can choose to turn Google Analytics On/Off
- Choose an account for the project (default account is in the dropdown menu)
Now you can start building your app on this project. Depending on your project, you can set up the features Google Firebase have. We will start with Cloud Firestore.
On the left panel, click ‘Cloud Firestore’. It’s to create a database for Firebase.
- Click on Create Database
- Choose Start in Test Mode
- Click on Enable
And then your database is made! Now we’re not done yet, We still have to set up our Authentication and then connect it to our application. Click ‘Authentication’ on the side panel.
- Select Set up sign-in method.
- click the pencil icon on Email/Password tab
- Enable it, and then save
Once you’re done, click on the side panel again and select ‘Project Settings’. In the ‘General’ tab, scroll down until you see ‘Your Apps’ Section. You will see three icons to choose from, and since I built mine for a web application I chose the third icon.
Enter your project name and then click ‘Also set up Firebase Hosting for this app’ checkbox.
Register app, and then click on next until you go back to your project page. Back to the terminal, You are going to install Firebase dependencies on your app. Run these commands:
npm install -g firebase-tools
npm install firebase && firebase login
It will ask you to login to your Google Account from the terminal.
