Site icon Jaime

Google Firebase DB with React

Jaime Calvo
Picture of react and firebase logo

Requirements:

I’m going to describe how I set up a Firebase DB and React.
First off, I’m doing this on a Mac, so I’m not sure it will be the same on Linux. And I’m pretty sure it will not be the same on a Windows system.
If you want to run this on a Windows computer I suggest that you don’t and just use a virtual machine and run it there. Microsoft has Hyper-V, I have never used it but they see the need for virtual machines and I hope they do a good work in making it possible.
I have used VirtualBox and it has worked well for me.
There are some ported fixes to run things on Windows but my experience is that they are almost never supported, and are slower than a VM.

Install

So let’s get started.

The first thing you will need is npm.
Inside of npm there is npx which in my understanding is more for a project and not so global in the system, which will help if dependencies might be different if you have more then one project.
With npx/npm you can install a lot of packages that might be needed for your projects.

Then we will use another package to that is called create-react-app.
It’s a very easy way to get started with a react projects.
We will install this into a “react-firebase” folder so in your command prompt type:

npx create-react-app react-firebase
cd react-firebase
npm start

And just like that, you have a react app running. It will open your app in your default browser and it’s also reloading everytime you change something so you will see your changes directly.
But you will need this running in your command prompt, so if you need to run more commands ( like we are, later on ), just run them in a new tab.
The create-react-app is also supported by yarn but that is another story.

When your project is done you run

npm run build

This builds the app to the build folder as an optimized version.
Now we have React up and running, now we need firebase, so in the command prompt run

npm install firebase --save

And now let’s look at the files, since this is a webpack solution, webpack will handle requirements for the App.
Everything you work with is in the src folder.
So you will not edit the index.html, but you might need to edit index.js ( or in some cases main.js ) to add dependencies and so on.

Your index.js might look something like this:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

this is handled by webpack and bundled into bundle.js which will be used in index.html.
So if we add the row import * as firebase from ‘firebase’; webpack will understand and include firebase.
like this:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import * as firebase from 'firebase'; 

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

Then we need to initialize firebase with config from you firebase console.

So you login on your google firebase console, click on your project, then click on the settings,

and then click “Add Firebase to your web app”

Copy everything inside the <script> tags and import it into your index.js.
So it will look something like this:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import * as firebase from 'firebase';

// Initialize Firebase
var config = {
  apiKey: "-- your apikey --",
  authDomain: "-- your project name --.firebaseapp.com",
  databaseURL: "https://-- your project name --.firebaseio.com",
  projectId: "-- your project name --",
  storageBucket: "-- your project name --.appspot.com",
  messagingSenderId: "-- your msg id --"
};
firebase.initializeApp(config);

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

And now your React is connected to Firebase.

Prep database

Now to test this connection, first make sure that your Firebase database is open for read and write.
Go to your console,
Click Database,
I used “Realtime Database” and not “Cloud Firestore” next to the Database header,
And then click Rules.

Here, change it to:

"rules": {
  ".read": true,
  ".write": true
}

We are just going to get some data for starters, so let’s prep the database by adding a node called react, and under it, let’s add a key of boo and value 5.

Fetch it with react

Now open your src/App.js. This is something like App root.
I’m not going to go into the details of React on this post, just to very simple test the connection.

Let’s replace everything in App.js with this

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import * as firebase from 'firebase';

class App extends Component {
  
  constructor() {
    super();
    this.state = {
      boo: 11
    };
  }

  componentDidMount() {
    const rootRef = firebase.database().ref().child('react');
    const booRef = rootRef.child('boo');
    booRef.on('value', snap => {
      this.setState({
        boo: snap.val()
      });
    });
  }


  render() {
    return (
      <div className="App">
        <h1>{this.state.boo}</h1>
      </div>
    );
  }
}

export default App;

Now when you save your file, your browser where you got your app, will update and first the number 11 will show, and then it will change to 5.
11 is the initial value that is set in the constructor in the App.js file and 5 is from the database.
If you would change the value in the database to for example 7, the App will update and show 7 without you needing to reload the page.

Cool right ?

Exit mobile version