Nerd For Tech
Published in

Nerd For Tech

Setting up a create-react-app with Firebase

What is Firebase?

Firebase is a BaaS (backend as a service) platform developed by Google for creating web and mobile applications. It provides developers a number of tools and services to help develop quality apps and scale over time as their user base increases.

Some notable features Firebase provides:

  • Authentication — Firebase Authentication can be used to manually integrate one or more sign-in methods into an app.
  • Realtime database — data is synced across all clients in real time and remains available even when an app goes offline.
  • Hosting — Firebase provides fast hosting for a web app.
  • Analytics — allows you to track and prioritize issues with your app, as well as monitor the success of your app
  • It offers Free and Paid options

Setting up your Firebase account

First, you’ll need to have a Google account. If you don’t have one, or want to create one specifically for Firebase you can go to the Google landing page and make an account for free.

Once you’ve made an account, go to Firebase and click the ‘Get started’ button.

Continue to click ‘Create a project’.

From here you’ll be prompted for setting up a project.

Accept the terms, select the Google account you’d like to associate it with, allow the analytics, and then click ‘create project’.

Firebase will then create the project and direct you to the project’s overview.

Depending on the device your app is for, select the correct icon (iOS, Android, Web). We’ll be connecting our Firebase project to a web app in this blog so feel free to select the web icon.

You’ll be prompted to register your app. Go ahead and do so.

Once registered, Firebase will generate your Firebase SDK script that you will use to link your react-app to the project.

Click ‘continue to console’ and you will be directed back to the overview page.

  • To access this code at any time, just click on the settings dial and select ‘project settings’

Select your database

From your Firebase console, select the ‘Build’ row on the right-side panel and a number of sub-headings will show beneath it — you’ll want to take a look at Firestore Database and the Realtime Database.

The difference between the two described by Firebase is:

  • Cloud Firestore is Firebase’s newest database for mobile app development. It builds on the successes of the Realtime Database with a new, more intuitive data model. Cloud Firestore also features richer, faster queries and scales further than the Realtime Database.
  • Realtime Database is Firebase’s original database. It’s an efficient, low-latency solution for mobile apps that require synced states across clients in real time.

(Find more about the differences here)

For this blog, we’ll choose the Firestore as our database.

Go ahead and click ‘Create database’.

You’ll then be prompted to start in Production or Test mode.

Then to select a location for where your data will be stored. Select the best region for your needs and click ‘Enable’.

Once done, you’ll be redirected to your Firestore database.

Great. We now have a project registered with Firebase and a Firestore database associated with the project. You can manually add data to your database through this console and follows a Collection to Document model.

*Firestore is a horizontally scaling noSQL (non-relational) document database on the cloud (learn more here)

Now lets connect it to our react-app.

Linking Firebase project to our react-app with Firebase SDK

If you haven’t created a react-app yet, go ahead and enter this line in your terminal in the folder where you’d like to store your app.

Once create-react-app has done its thing, make a new folder titled ‘utils’ within your components folder. Within the ‘utils’ folder create a file called ‘firebase.js’.

Within the file add your imports at the top and create a firebaseConfig variable using the SDK code from your firebase project settings. Once the firebaseConfig variable has been made, initialize it via firebase.initializeApp() method. After that create a database variable to reference your project’s firestore database.

Once that has been set up. The last step is to import it into your index.js file.

Although the line is subdued it's okay because you’ve initialized the app and is now connected to your index.js file.

That it! You’ve officially created a Firebase project with an accompanying Firestore database and linked it to your react-app!

There are a ton of different tools and services available to you now, so make sure to go over the documentation to get familiar with CRUD operations as well as authentication and queries.

Now that you’re set-up, Happy Hacking!

--

--

--

NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To know more about us, visit https://www.nerdfortech.org/.

Recommended from Medium

React and Redux — Creating a Powerful Stateful App

https://www.pinterest.com/landonschertz1

Get started with AG Grid

Function Scope Vs Block Scope

What is it like to work in the Frontend team at Docplanner Tech?

Osome7 customer Care number/858489730//8584892730Osome7 customer Care…

PyScript — Power of Python in your Browser

Home page image of Pyscipt Website

Angular — Saving Location History

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Janu Sung

Janu Sung

Just another one of those dreamers with a sparkle in his eyes.

More from Medium

How To Build A Video Recording App

Routing and Page Navigation in React

Add Login Sessions to the state

Vue vs. React JavaScript Framework To Choose For Application Development Project