Managing MongoDB Servers From The Browser Using WebMongo

MongoDB is an awesome database system and I've always had so much fun working with it, especially paired with ODMs such as Mongoose. Some of my friends that I've introduced to MongoDB, coming from a MySQL background, thought they had finally found Heaven, and while I don't necessarily agree with that hyperbole, I can see why they'd think it's so great. It's fast, easy to learn, very flexible and scalable, and just overall fun to work with.

Another great thing about the MongoDB ecosystem is the existence of MongoDB Atlas, an official Database-as-a-Service solution which is pretty affordable and easy to maintain. I think a good introduction to the serverless architecture is Atlas + Next.js + Vercel (I actually use this stack for some of my own apps too).

However, every now and then, you might want to access your MongoDB server directly. Maybe to inspect some data or to change some stuff, but at some point you just can't fully rely on your app and let it do all the work.

MongoDB Clients

If you can SSH into your server you can easily just run mongo in the terminal and do everything you must do. But sometimes a GUI can be nice because you can better visualize the things you're working with. This is why GUI clients exist. These tools allow you to manage everything on your MongoDB server using a friendly graphical interface. The official desktop app - Compass - is very good for this task, for example.

However, there's a small issue... and that is portability. MongoDB Compass is only available for the desktop, so if you want to have a GUI client on your phone, you have to use third-party apps. Furthermore, if you're moving to a different workstation (for example, your school computer), you'd have to download and install Compass on it, which isn't very effective and might not even work at all (since schools and workplaces usually won't allow you to install new software).

This can be an annoying task especially if you manage multiple servers, since you'd have to find the right connection string for each server and set it up accordingly.

What If...

What if you could easily access, modify, and manage your MongoDB servers directly from your web browser? It would be perfect, since there is pretty much no computer, tablet, or smartphone that doesn't have a web browser*. You could just enter a web address and you'd instantly have access to all your servers.

But doesn't that imply that you'd have to store the admin credentials of your servers on someone's server? What if the web interface you're using has a security breach and someone will gain full access over everyone's connection strings?

As soon as a website has a database with sensitive data and it also has a way to authenticate users, it can become a target for hackers. So, is it really a good idea to use a web service for this after all?

In this sense of things, it's probably not a good idea, especially if you're very security-conscious.

*) don't actually quote me on that

How I Tried To Solve This

The web is a powerful invention that only gets more and more powerful. We can solve a lot of things more easily than we have imagined. This is why one night I was wondering - what if we didn't store anything at all? If we don't store credentials, there's nothing that hackers could break into.

This might sound pretty weird at first. You might be wondering how that would even work. And the answer to that is... well... just save it to the user's device, duh! localStorage is an amazing tool if you handle it correctly and this is what I took advantage of when creating WebMongo - a fast and secure web-based GUI for managing MongoDB servers.

About WebMongo

This is a small passion project of mine with the goal of making a solid web interface for MongoDB without giving up on things like security. It started as an experiment, mainly for me to see if something like this was indeed possible. And sure enough, it is! Even though it's still in beta and could definitely use some more improvements, the web app is in a fairly stable condition right now.

WebMongo takes a different approach on storing and syncing data. Instead of saving your data to a centralized database, it saves it to your browser's local storage. This is convenient because you don't have to worry about someone stealing your credentials, unless someone steals one of your physical devices (in which case your other credentials would probably be at risk too). For syncing, there's an Import/Export feature. The exported file is AES-encrypted with a passphrase that you provide, which means you can save it in a cloud provider of your choice. That way you can access your servers anywhere, anytime.

Here's a list of what WebMongo is capable of doing at this moment:

• Add and remove MongoDB servers (or connection strings, rather)
• View databases
• View, add, modify, and drop collections
• View, add, modify, and delete documents
• Export the list of your MongoDB servers as a passphrase-protected encrypted file
• Lock your session using a passphrase (encrypts the data that's saved in your browser)
• One-click "Delete All Data" button to completely get rid of all data (useful if you needed it temporarily, for example, on a shared computer)
• PWA for easy installation and quick access
• Due to its open-source nature, you can deploy your own instance of WebMongo, making it 100% decentralized

Tech

I won't go in-detail into describing how I made WebMongo, but give you an overview of the stack that I used for it.

• Frontend: Sapper (Svelte). A tiny web framework that has always helped me develop stuff quickly.
• Backend: Express.js. Express is only used to communicate with your MongoDB server and process your queries. Nothing else. It uses the value of the Connection-String header to figure out how to connect to a server.
• Deployment: Vercel. I love serverless architecture and Vercel makes it accessible for everyone. With their nearly unlimited plans and super easy deployment strategy, I can automate a lot of stuff and worry less about everything else. The app deploys automatically every time I push something to the master branch on GitHub.

Open-Source And Self-Hostable

Still don't like the idea of using a MongoDB manager that's hosted on someone else's server? Don't worry! I won't get offended by that and I can totally understand you! WebMongo is completely open-source, which is why you can easily deploy it yourself anywhere you want.

See the repo here: https://github.com/jozsefsallai/webmongo

TL;DR

• MongoDB is awesome, but we need a way to make it very easy to access our servers from anywhere.
• Storing MongoDB credentials on a remote server is dangerous because it can become a target for hackers.
• WebMongo is an open-source, fast, and secure web UI for MongoDB that uses a different approach for this by saving all data on the user's computer and using encrypted exporting/importing as a sync method.

Conclusion

This project is something I'm really proud of and I'm looking forward to making it as great as I can. What are your thoughts, suggestions, questions, or bug reports? WebMongo is currently still in beta, so everyone's input would be greatly helpful! :)

You can access the production app here: https://webmongo.now.sh.