Firestore Explorer

Web based read only admin UI to explore cloud firestore and emulator.

Motivation

There are a couple of issues we noticed during our day to day development with Firestore projects.

Exploring documents in your collections can soon become tedious process as you have to click through and navigate the whole hierarchy, its a painful experience that eats into your productivity.
There is no way to explore Firestore emulator.

What we need is a quick way to query the data of interest, just like there is an sql console for a relational database, we would need a query tool for Firestore as well.

Before you begin

To connect to Cloud Firestore, this tool would require Firebase project's security credentials for admin access. To mitigate any risk of accidental writes to Firestore, this tool ensures that the queries passed to it are read only calls. It does so by applying a layer of javascript parsing that filters only read queries.
This tool is like any other Firestore client, hence reads made through this tool will be charged as per Firestore plan.

Usage

Note: Ensure you have nvm and firebase-tools installed.

Clone the repository

Follow these steps when using for the first time.

nvm use
yarn
yarn onetime_setup
yarn serve

Subsequent usage

nvm use
yarn serve

You will see that Firebase Proxy is running at port 7000 and Explorer running at port 8000

Query console

Query console supports arbitrary queries to Firestore. It expects javascript based method calls just like the web or admin sdk. There are some limitation to the queries

Single valid javascript statement
Query should always start with db
Query should always end with call that will return a promise of QueryDocumentSnapshot or QueryDocumentSnapshot or QuerySnapshot or Array<CollectionReference>

Examples

db.listCollections();

db.collection("movies")
  .limit(10)
  .get();

db.collection("movies")
  .where("title", "==", "LBJ (2017)")
  .limit(10)
  .get();

db.doc("movies/179813").get();

db.doc("movies/179813/ratings/179813-462-1536467407").get();

Development Details

The project is divided into three modules. All these three modules can be developed independent of each other. Typescript is used across all these modules.

Firebase Proxy
Explorer
Firebase seeds

Firebase Proxy

An express based server which mainly deals with exposing two kinds of api.

An api for web app for its storage needs. Exposes servers and config api endpoints.
An api for command execution. It uses firebase admin sdk under the hood to wrap firebase calls to the firestore emulator or cloud firestore.

This can be worked on independently. Simply cd to the directory and use yarn watch to work on the code.

Explorer

A vuejs based web application. Uses vuex for state management needs and vuetify for ui components. This module can also be worked on independently, simply cd to the directory and use yarn serve to work on the code.

Firebase seeds

This is simple utility module to setup data in firestore emulator and cloud firestore.

Use yarn to install project dependencies.
Use yarn emulator_setup to install firebase tools along with emulator
Use yarn emulator_start to start the firestore emulator
Use yarn seed_local to seed data present in data directory into emulator firestore
Use yarn seed_cloud to seed data into cloud firestore. To work with cloud firestore you will admin sdk credentials file. You can get one by navigating to service accounts -> generate new key. Create a file called FirebaseAdminConfig.json in root directory of this module and paste the contents of the downloaded file into the json file.

Note: Firestore emulator requires Java runtime, so ensure your machine Java installed.

murijr/firestore-explorer