How to Export Firestore Data to Excel in React Apps Using Firebase Cloud Functions

Published in

CodeX

3 min readMay 2, 2024

One day, my senior developer presented me with a challenge: we needed a feature that would allow us to download our admin data directly as Excel files for easier reporting and analysis. After extensive research and some help from AI tools like ChatGPT, I devised a solution using Firebase Cloud Functions.

Despite my searches, I couldn’t find a tutorial that perfectly fit our needs for a React/Next.js application. Realizing others might face the same dilemma, I decided to write this blog.

Setting up Firebase

Before we dive into the code, ensure you have a Firebase project set up with Firestore as your database. If you’re new to Firebase, follow their official documentation to create a new project and enable the Firestore database and cloud functions.

Table.jsx

Once you have your Firebase project and Firestore database ready, the next step is to integrate Firestore data into your React/Next.js application. This example illustrates how to display Firestore data in a table within a React component using hooks like useState and useEffect.

Here we have a very simple table showing data fetched from Firestore using React hooks.
Additionally, there is a “Get Report” button that triggers a cloud function.

Button.jsx

This component works as a trigger for the cloud function.

When the “Get Report” button is clicked, a document is added to the reports collection, which acts as a trigger for the cloud function.
The onSnapshot() method watches for any updates to the document, retrieving the download link once it's ready.

Cloud Function

Setting up the Environment

Before diving into the code, ensure you have the necessary modules installed and initialized:

Firebase Functions: Manage cloud functions.
Firebase Admin: Interact with various Firebase services, including Firestore and Storage.
Papaparse: A powerful library for parsing and un-parsing CSV files.
date-fns (Optional): A library to manipulate JavaScript dates in a straightforward way.

Key Points

Trigger: The function is triggered by creating a new document in the reports collection.
Data Fetching: Retrieves all documents from the bills collection.
Date Manipulation: Converts Firestore timestamp fields to a more readable format using date-fns.
CSV Conversion: Uses Papaparse to convert the data to CSV format.
File Handling: Creates a temporary file for the CSV, then uploads it to Firebase Storage.
Public Access: Makes the uploaded file publicly accessible.
Update Firestore Document: Updates the report document with the CSV file’s download link and marks the report as complete.
Error Handling: Includes try-catch for robust error management.

Conclusion

In this tutorial, we’ve demonstrated how to automate the process of converting Firestore documents into a CSV format using Firebase Cloud Functions. This functionality is particularly useful for generating timely reports or exports, streamlining data management tasks without manual intervention.

Below is a GIF that illustrates how the application behaves once integrated. This visual representation helps to understand the seamless flow from data trigger to CSV generation and retrieval.

For more detailed code, check out this GitHub repository: https://github.com/dixitt5/firestore-data-to-excel

Happy coding!