How to Export Firebase Data to Excel In A ReactJS App

What is going to happen

In this five-step tutorial, we are going to start with making a ReactJS app. After that, we will make a proof of concept. Next up is displaying the data in a fancy way. Then import data from Firebase and finally export it to Excel. If you ever get stuck or just want to see the whole project here’s the link to the code https://github.com/antonderegt/export-demo

Prerequisites

Before we start, I’m going to assume you have knowledge of or have installed the following:

1. yarn (npm works as well)

2. Basic ReactJS knowledge

3. GitHub (not mandatory, but it is used in this tutorial)

4. Knowledge about Firebase is a pro

5. Any code editor

If you are set on these five easy parts, we can start with the tutorial.

Let’s see the steps involved in Exporting firebase data to excel with a React JS app.

Step 1: Create a ReactJS app

Do you like simple? I like to keep things simple so we will start off with a boilerplate of a ReactJs app. Open your terminal and install create-react-app by typing to following:

$ yarn global add create-react-app

Once this is installed we can create a react app from anywhere on our computer. Open the terminal and go to the folder where you want to store your application in, type this:

$ create-react-app export-demo
$ cd export-demo
$ yarn start

A browser window will open and show a beautiful spinning atom.

I will push this code to GitHub so you can follow along. You should do as well. Here we go:

$ git init
$ git add .
$ git commit -m "Step 1: Init react app"
$ git remote add origin https://github.com/your-user-name/export-demo.git
$ git push -u origin master

Step 2: Rough version

In this step, we are going to make a rough version of what we are going to build. Let’s go ahead and replace the code in src/App.js with the following:

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div style={style}>
        <div>
          <h1>Export Demo</h1>
          <button>Export to Excel</button>
          <table>
            <tr>
              <th>Firstname</th>
              <th>Lastname</th>
              <th>Age</th>
            </tr>
            <tr>
              <td>Elon</td>
              <td>Musk</td>
              <td>23</td>
            </tr>
            <tr>
              <td>Donald</td>
              <td>Trump</td>
              <td>94</td>
            </tr>
          </table>
        </div>
      </div>
    );
  }
}

const style = {
  display: 'flex',
  justifyContent: 'center',
}

export default App;

In the code above two imports were deleted, the div in the return was changed to our own title, a button and a table. The style at the button just makes everything sit in the center of the screen. Upon saving this document the page will look like this:

You can see three elements here: title, button, table. Somewhere in the future, the table will be populated by Firebase and the button will export the table to an Excel file.

That’s it for step 2, let’s push our code to GitHub again.

$ git add .
$ git commit -m "Step 2: Rough version"
$ git push origin master

Step 3: React Table

The standard table is okay if you only have two records like we have right now. When you amass lots of data you want something prettier and easier to use. React-table is the package we are going to use.

Install react-table:

$ yarn add react-table

Replace the code in /src/App.js with the following:

import React, { Component } from 'react';
import ReactTable from 'react-table'
import 'react-table/react-table.css'

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      users: [
        {
          firstname: "Elon",
          lastname: "Musk",
          age: 23
        },
        {
          firstname: "Donald",
          lastname: "Trump",
          age: 94
        }
      ]
    }
  }

  render() {
    const userColumns = [
      {
        Header: "Name",
        columns: [
          {
            Header: "First Name",
            id: "firstname",  
            accessor: d => d.firstname
          },
          {
            Header: "Last Name",
            id: "lastname",  
            accessor: d => d.lastname
          }
        ]
      },
      {
        Header: "Age",
        columns: [
          {
            Header: "Age",
            id: "age",  
            accessor: d => d.age
          }
        ]
      }
    ]
    return (
      <div style={style}>
        <div>
          <h1>Export Demo</h1>
          <button>Export to Excel</button>
          <ReactTable
            style={{marginLeft:'-40%', marginRight:'-40%'}}
            data={this.state.users}
            columns={userColumns}
          />
        </div>
      </div>
    );
  }
}

const style = {
  display: 'flex',
  justifyContent: 'center',
}

export default App;

The code above imports react-table and its style. On line 6–22 is the state react-table will be used as data. The const user Columns initialize the table with the right headers and make sure the right data is displayed in the right column. The <table></table> was replaced by <ReactTable /> which takes the users data in the state and the initialisation of the columns as inputs.

The result:

This immediately looks a lot better! What do you think? We finished step 3 already.

$ git add .
$ git commit -m "Step 3: React-table"
$ git push origin master

Step 4: Connect to the firebase

If you don’t know what Firebase is, it’s basically a cloud database hosted by Google. It’s free to use for applications that have less than 100 concurrent connections, which is enough for small applications. To get started with Firebase go to https://console.firebase.google.com/u/0/. Click the + to create a new project. Give it a name and a region. We will use the Real-time Database because Cloud Firestore is still in Beta. Select the ‘Start in test mode’ radio button and click ‘ENABLE’. These settings can be changed at any time in the Rules tab of the database. For now, we will ignore the error message that says: ‘Your security rules are defined as public, anyone can read or write to your database’.

Let’s populate it with some random data. You can do this by hovering over the name of your database, in my case export-demo and clicking the + sign.

The next step is to add the Firebase package to our application by pasting the following into your terminal:

$ yarn add firebase

To connect to the database we just created, the firebase package needs credentials. You can find these by clicking the gear icon on the left side of the firebase console. Next, click ‘Project settings’. Make a new file called config.js in the src directory. Add this to the file:

import firebase from 'firebase'
import firebaseSecrets from './firebaseSecrets'

const config = {
    apiKey: firebaseSecrets.apiKey,
    authDomain: firebaseSecrets.authDomain,
    databaseURL: firebaseSecrets.databaseURL,
    projectId: firebaseSecrets.projectId
};

const fire = firebase.initializeApp(config);

export default fire;

In the file above the secret credentials are imported from a file called firebaseSecrets.js. Let’s create that file in the src directory. Add this to the file:

module.exports = {
    apiKey: "your-api-key",
    projectId: "your-project-id",
    authDomain: "your-project-id.firebaseapp.com",
    databaseURL: "https://your-project-id.firebaseio.com"
};

Make sure to change the values in the firebaseSecrets.js file. We want to keep the credentials in this file secret. To do this go to the file .gitignore and add the line: firebaseSecrets.js

Time to load the Firebase data in our app. Change the /src/App.js to the following:

import React, { Component } from 'react';
import ReactTable from 'react-table'
import 'react-table/react-table.css'
import firebase from './config'

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      users: []
    }
  }

  componentWillMount(){
    this.getUsers()
  }

  getUsers() {
    let users = []
    firebase.database().ref(`users/`).once('value', snapshot => {
      snapshot.forEach(snap => {
        users.push(snap.val())
      })
      this.setState({
        users
      })
    })
  }

  render() {
    const userColumns = [
      {
        Header: "Name",
        columns: [
          {
            Header: "First Name",
            id: "firstname",  
            accessor: d => d.firstname
          },
          {
            Header: "Last Name",
            id: "lastname",  
            accessor: d => d.lastname
          }
        ]
      },
      {
        Header: "Age",
        columns: [
          {
            Header: "Age",
            id: "age",  
            accessor: d => d.age
          }
        ]
      }
    ]
    return (
      <div style={style}>
        <div>
          <h1>Export Demo</h1>
          <button>Export to Excel</button>
          <ReactTable
            style={{marginLeft:'-40%', marginRight:'-40%'}}
            data={this.state.users}
            columns={userColumns}
          />
        </div>
      </div>
    );
  }
}

const style = {
  display: 'flex',
  justifyContent: 'center',
}

export default App;

$ git add .
$ git commit -m "Step 4: Connect to Firebase
$ git push origin master

Step 5: Export to Excel

The final step! In this step we are going to add the logic to the export button we have been looking at the whole time. I bet you clicked it