DEV Community: Nick

Meet the Mongorai — new MongoDB Web-UI

Nick — Mon, 28 Jul 2025 12:30:00 +0000

When the need arises to administer MongoDB, especially during early development stages and in small projects, you often have to either fiddle with the command line (mongosh, yet another syntax you don't want to learn), or choose between bulky (and often paid) tools with tons of dependencies.

Existing free solutions like Mongoku from industry giant Hugging Face provide a convenient interface but may lack necessary configurations. When attempting to modify them, you'll inevitably face problems due to outdated technologies like legacy Angular and decade-old libraries that are no longer maintained. That said, Mongoku itself isn't bad, but it critically lacks certain features, such as even basic authorization... And so it appeared...

• ▌ ▄ ·.        ▐  ▄ ▄▄ •       ▄▄▄   ▄▄▄· ▪
·██ ▐██ ▪▪     •█▌▐█▐█ ▀        █  █·▐█ ▀█ ██
▐█ ▌▐▌▐█· ▄█▀▄ ▐█▐▐▌▄█ ▀█▄ ▄█▀▄ ▐▀▀▄ ▄█▀▀█ ▐█·
██ ██▌▐█▌▐█▌.▐▌██▐█▌▐█▄▪▐█▐█▌ ▐▌▐█ █▌▐█ ▪▐▌▐█
▀▀  █ ▀▀▀ ▀█▄▀▪▀▀ █▪·▀▀▀▀  ▀█▄▀▪.▀  ▀ ▀  ▀ ▀▀▀

For one of my projects, I needed a convenient administration system for MongoDB, but I couldn't quickly extend Mongoku because the source code simply wouldn't build... Long story short, I decided to rewrite this legacy code in React, update dependencies, and add useful features — that's how Mongorai was born.

As you've obviously guessed, it's based on Mongoku's functionality, but the frontend was completely rewritten in React, significantly improving the code and development process.

Who will benefit it? Developers and database administrators who need a fast, easy-to-install, and visually intuitive tool for:

— Viewing databases, collections, and documents
— Executing basic queries (currently primitive editing is partially implemented)
— Analyzing data structure (especially relevant for dynamic schemas)
— Testing and debugging on local or staging environments.

Mongorai main page looks like:

Key features

— Optimized code: Redundancy eliminated, project structure improved.
— Simplified build: Installation and launch processes are much faster, codebase is smaller.
— Reduced dependencies: Minimized external packages enhance stability and security.
— Added HTTP Basic Auth

Install & Run

This is the two simple ways Mongoku can be installed:

# Install global with NPM
npm install -g mongorai

# Then run it from your terminal
mongorai start

Other way is just cloning this repo, install deps and run it locally:

npm i
npm run server

After install you can also run Mongorai as a daemon, using either PM2 or
Forever.

mongorai start --pm2
# or
mongorai start --forever

Options

Run mongorai with the environment variable MONGORAI_ENABLE_AUTH=true to enable Basic Auth, or just use --auth option:

mongorai start --auth

If you use basic authentication, don't forget to change the password by setting the variable MONGORAI_PASS, or run with --pass option:

mongorai start --auth --pass='your_strong_pass'

Development roadmap

— Full edit support
— Remove bootstrap from frontend
— Resolve outdated nedb issue
— Add convenient export and import

Currently, Mongorai provides a reliable tool for viewing and navigating MongoDB data. Full document editing functionality is being debugged and will be added in upcoming releases.

The project is open-source – if you'd like to contribute, you are welcome!

Get it at NPM.
Project GitHub: https://github.com/psychosynthesis/mongorai

Vanicom — A tiny helper tool with a set of simple, frequently used functions for your JS project

Nick — Sun, 04 May 2025 23:52:45 +0000

At one of my previous jobs, me and my ex-colleague created a small helper package with the most frequently used functions that were used in almost every project.

I continue to develop it, as many of the functions are still relevant.

Noname from the internet

Mar 6 '25

Introducing Vanicom.js: A Minimalist JavaScript Helper Library

#webdev #javascript #beginners

Comments

5 min read

New ESLint flat config file format example

Nick — Wed, 10 Apr 2024 22:00:25 +0000

This note does not pretend to be complete - in fact, I don’t even want to understand how this junk works under the hood. However, it might save someone a day of work.

For some reason, the ESLint developers once again changed (this 9.0.0 v. is the second or third time in my memory) the configuration file format and plugin packages, so now the old configs do not work, so adding a linter to a new project may cause a problem. In fact, thanks to the efforts of these wonderful people, even this note will most likely soon become useless.

Official way

To get started, you can use the command that is recommended to use for setup in the official guide:

npm init @eslint/config

However, after this, simply running the linter will most likely not produce any result. Even if you run the linter with the correct command specifying the files to check, it still won’t work:

The most interesting thing here is that the official guide gives a completely empty example of the config, as if you did not execute their command npm init @eslint/config

After running this command, the config will look something like this (if they haven’t changed anything again, lol):

import path from "path";
import { fileURLToPath } from "url";
import { FlatCompat } from "@eslint/eslintrc";
import pluginJs from "@eslint/js";

// mimic CommonJS variables -- not needed if using CommonJS
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const compat = new FlatCompat({
  baseDirectory: __dirname,
  recommendedConfig: pluginJs.configs.recommended
});

export default [
  ...compat.extends("standard-with-typescript")
];

Example of the eslint.config.js for the new version

Another way

Since the official config, apparently, is quite crooked (and, to be honest, I don’t even know if it works correctly), you may want to install the linter yourself. For this config you will need to install the following packages in the project:

{
  "devDependencies": {
    ... // your other deps
    "@eslint/eslintrc": "^3.0.2",
    "@eslint/js": "^9.0.0",
    "@typescript-eslint/eslint-plugin": "^6.21.0",
    "eslint": "^8.57.0",
    "eslint-config-standard-with-typescript": "^43.0.1",
    "eslint-plugin-import": "^2.29.1",
    "eslint-plugin-n": "^16.6.2",
    "eslint-plugin-promise": "^6.1.1"
  }
}

As i already said, just after install linter wouldn't work anyway, because you still need add files section in config and, possible add some your own rules to it.

I found out that if need to add rules to the config file, you must do it in a certain way: since we already have some rules created by config command, we don't need to just add new ones, but do it next way:

import path from "path";
import { fileURLToPath } from "url";
import { FlatCompat } from "@eslint/eslintrc";
import pluginJs from "@eslint/js";

// mimic CommonJS variables -- not needed if using CommonJS
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const compat = new FlatCompat({
  baseDirectory: __dirname,
  recommendedConfig: pluginJs.configs.recommended
});

export default [
  ...compat.extends("standard-with-typescript").map(
    config => ({
      ...config,
      files: ["**/*.tsx"],
      rules: {
         ...config.rules,
         "semi": "off", // For some reason the old rule is buggy and needs to be disabled IDK
         "@typescript-eslint/semi": ["error", "always"],
         "no-unreachable": "error", // Already in ts, but perhaps it catches more cases
         "@typescript-eslint/explicit-function-return-type": "off",
         "@typescript-eslint/strict-boolean-expressions": "off", // Often works incorrectly
         "@typescript-eslint/no-floating-promises": "off",
      }
    })
  ),
];

Working example of eslint.config.js with custom rules

Now you can start the linter with the following command (for some reason it is still necessary to additionally specify files in the console, i have no idea why):
npx eslint 'src/**/*.{ts,tsx}' --no-ignore

You can add it to your scripts section of package.json for easy launch via npm run.

What's next? Code formatting?

The next stage, which may throw you into frustration, is that it turns out that the new linter now does not know how to properly format code out of the box.

Now a linter is purely a linter. Wow! Such great idea!

You can read about it here (the indentation problem that no one wanted to fix) and here (about the integration between a linter and a formatter), and here is even more detailed information about the “problems” with using linters as formatters.

So, in addition to the file with the linter settings, you will also have to add a .prettierrc file with the prettier settings:

{
  "tabWidth": 4,
  "singleQuote": true
}

...as well as install the prettier itself:

npm install --save-dev eslint-plugin-prettier eslint-config-prettier
npm install --save-dev --save-exact prettier

Yes, and besides, you will once again have to correct the linter config. Here's the final version:

import path from "path";
import { fileURLToPath } from "url";
import { FlatCompat } from "@eslint/eslintrc";
import pluginJs from "@eslint/js";
import prettierConfig from 'eslint-config-prettier';
import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended';

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const compat = new FlatCompat({
  baseDirectory: __dirname,
  recommendedConfig: pluginJs.configs.recommended
});

export default [
  ...compat.extends("standard-with-typescript").map(
    config => ({
      ...config,
      files: ["**/*.tsx"],
      rules: {
         ...config.rules,
         // ...other your custom rules
      }
    })
  ),
  prettierConfig, // Turns off all ESLint rules that have the potential to interfere with Prettier rules.
  eslintPluginPrettierRecommended
];

Note: While it is possible to pass options to Prettier via your ESLint configuration file, it is not recommended because editor extensions such as prettier-atom and prettier-vscode will read .prettierrc, but won't read settings from ESLint, which can lead to an inconsistent experience.

Well, now, after all these crutches and a bunch of ~~new garbage~~ wonderful files in the root of your project, you can now use the linter. I think those who have read to the end already understand why the linter is a lousy tool in general.

But everything should work now. I hope this is useful to someone.

As for my opinion, ESLint is absolute garbage, a perfect example of a garbage application, so if you have a choice, try looking for something else. In my company it is a standard tool, so for years i have had to deal with changing config formats, constant renaming of plugin packages (FOR THAT?) and compatibility problems caused by this junk software. ESLint you must burn in hell!