DEV Community

Cover image for Introducing FireDrill - Power tools for Firebase
Scott Lepper
Scott Lepper

Posted on • Edited on

Introducing FireDrill - Power tools for Firebase

Firebase rocks! We devs can create apps faster than ever, not having to worry about setting up and maintaining back end infrastructure.

The challenge I found with Firebase was using the Firebase console to find data. Also adding/modifying data in the console is a bit cumbersome.

To overcome these challenges, I've created FireDrill

Let's check it out!

First we need to connect to our database. The easiest way is to open your Firebase project, then click the Gear and "Project Settings":

settings

Now scroll down and select "Add Firebase to your Web App":

add

Highlight the section you see below and Ctrl-C (don't use the Copy button)

config

You will also need to add firedrill-74829.web.app as an Authorized domain. On the left under Develop click Authentication. Then choose "Sign-in Method", then scroll down to "Authorized domains" and click "Add Domain". Enter "firedrill-74829.web.app" as your domain.

Now open FireDrill. On the Connect page click the JSON tab and paste your connection info. The default database type is "Firestore" but you can change this to "Realtime" depending on your database type. When ready click the Connect button.

connect

You are connected! Now you need to sign in. You can use your email or sign in with Google (if you have enabled Google authentication in Firebase). You can skip this step if you haven't secured your data.

signin

OK! We are ready to start drilling!

On the Drill screen you see a "Path" input. Here you can enter a Collection name.

path

I have a Collection called "shoes". I'll type "shoes" and click "Drill".

path

Great I found my shoes. Notice the limit at the right of the Drill button is 10. You can adjust the limit to your liking. You may also notice all the values are links. This allows quick filtering. I'll click the Brand "Jordan" on the first result.

path

So I was able to quickly filter down to only "Jordan" shoes. This is nice for quick filtering, but I want more advanced filtering, like date range or price range. No problem.

Let's open the filters drawer. I'm going to click the "Show Filters" link you see above the results. Now the drawer opens and I can choose a field to filter on.

filter

I'm going the select the "price" field and the "Between" type, then add 100 as the Start and 150 as the End price and click "Apply". Now I see only items within that price range. This also works for date fields.

filter

We can also use "Greater Than", "Less Than" or "Equals" as the Type.

Now I want to see the highest prices first. No problem. On the right click the "Sort" link and click the "price" field. It sorts in ascending order first (notice the icon next to the field). Just click "Sort" again and click the "price" field again. It will now be in descending order. Notice the icon changed pointing downward.

sort

And we can see our results are now sorted by highest price first:

sort

So I've shown how you can use FireDrill to quickly find your data in Firebase. I've also shown how you can use range filters and how you can sort your data. In the next article, I'll show you how you can quickly edit and manage your Firebase data. Stay tuned!

In the meantime, try FireDrill out for yourself. If you encounter any issues, please feel free to report them here: FireDrill Issues. Thanks and happy drilling!

Top comments (6)

Collapse
 
chan4077 profile image
Edric Chan • Edited

Great post, but I think the authentication is a bit broken (seems that the FireDrill website isn't added as a valid redirect URL in your API console).

See the image below:

Broken authentication

Collapse
 
scottlepp profile image
Scott Lepper • Edited

Hi Edric. You have to authorize the domain in your Firebase settings (from the Firebase console).

Develop > Authentication > Sign-in method > Authorized domains > Add Domain

Collapse
 
chan4077 profile image
Edric Chan • Edited

Oops! Forgot about that! Thanks for responding!

EDIT: I didn't read through the whole article, so I probably skipped the authentication part.

Thread Thread
 
scottlepp profile image
Scott Lepper

Sure thing. I updated the article as others have asked the same question.

Collapse
 
cryptospy profile image
Sahil Cryptospy

Hey Scott, just stumbled across your project. I was thing to use this in one of my project on a long term basis. but i see no github activity for quite sometime.
Is the project dead?

Collapse
 
scottlepp profile image
Scott Lepper

Hi. It's still alive I just haven't needed to make any changes recently.