Admin Panels are great. They increase the developer productivity and also provides an easy interface to quickly make the changes without needing to connect to the database and messing around with Database Queries. For developers who are not very good with SQL/Mongo Queries, It greatly simplifies the process. But Node.js(Express.js) doesn’t come with one ☹️, this may be a little disappointing, especially if you’re coming from Python/Django/ROR background. Those Frameworks comes with great Admin Panel which integrates flawlessly. Although Node.js(Express.js) allows you to add whatever Admin Panel you want to add and configure according to your needs. So, you have a lot of great options 🙂.

Here comes the AdminBro.

AdminBro is a modern Admin Panel/Interface based on React JS for Node JS which allows you to manage your database resources. It supports Mongoose(MongoDB ORM) and Sequelize for your Relational Database ORMs and It works flawlessly with Express.js and Hapi.js. Not just that, AdminBro can be integrated with any Node.js Framework.

Why should you use it:

  • Supports both relational(Sequalize) and non relational(mongoose) Database Models
  • Built on the modern stack: Node.js, React.js, Styled-components, Quill, Bulma
  • Supports heavy customization
  • Come on, it looks awesome 🤷🏻‍

If you want to try it out, here’s a live demo link:

Login: test@example.com

Password: password

https://admin-bro-example-app.herokuapp.com/admin

In this blog, we’ll integrate our express app and mongoose Model with AdminBro. So, let’s get started


1. Create your app and models

Before starting with AdminBro you must have an Express.js application with your models defined. So, in the first section, we are going to set up a Node.js Server with Express.js and also define our models in mongoose.

Create a simple express application

const express = require('express')
const bodyParser = require('body-parser')

const app = express()
app.use(bodyParser.json())

app.get('/', (req, res) => {
  res.send('Hello World')
})

//...
// Your Routes
//...

const PORT = 3000
app.listen(PORT, () => {
  console.log(`🔥  Server started on PORT: ${PORT}`)
})

Create your database model(s) To keep things simple we are just building a User Model in mongoose

const mongoose = require('mongoose');

const userSchema = mongoose.Schema({
  name: { type: String, required: true },
  email: { type: String, required: true },
  password: { type: String, required: true },
  avatar_url: { type: String },
  bio: { type: String },

  created_at: { type: Date, default: Date.now() },
  updated_at: { type: Date, default: Date.now() },
});

// Update the updated_at field on save
userSchema.pre('save', (next) => {
  this.updated_at = Date.now()
  next()
})

module.exports = User = mongoose.model('User', userSchema);

Add your models in your app and Connect to MongoDB

Connect to your MongoDB database in your index.js file. To do this add the following code in your index.js

// Import MongoDB
const mongoose = require('mongoose')

// Connect to MongoDB
mongoose.connect(YOUR_MONGODB_URI, { useNewUrlParser: true })
  .then(() => console.log('🔥  MongoDB Connected...'))
  .catch(err => console.log(err))

2. Install and integrate AdminBro

Install the AdminBro and necessary adapter(s)

npm i admin-bro admin-bro-expressjs admin-bro-mongoose


Create a admin.js file to Keep your AdminBro Configurations

const AdminBro = require('admin-bro')
const AdminBroExpress = require('admin-bro-expressjs')
const AdminBroMongoose = require('admin-bro-mongoose')

const User = require('./models')

AdminBro.registerAdapter(AdminBroMongoose)
const adminBro = new AdminBro({
  rootPath: '/admin'
  resources: [
    {
      resource: User,
      options: {
        // We'll add this later
      }
    }
  ],
})

module.exports = adminRouter = AdminBroExpress.buildRouter(adminBro)


Add the AdminBro Router

Add the AdminBro Router in your index.js

app.use('/admin', require('./admin'))

Now your folder structure should look something like this

├── node_modules
├── admin.js
├── index.js
├── models.js
├── package.json
├── package-lock.json


Start the server and test

Now start your server and go to https://localhost:3000/admin or to your local server’s URL(If you’re using different configuration).

You can see the AdminBro dashboard with your Models on the Left Sidebar. You can now perform all operations on your data with the AdminBro Panel.

We are done with the integration at this point. The next step is to add customizations which unlocks best the features of AdminBro.


3. Customization

Customization is where AdminBro shines. It provides plenty of options to customize your Admin Panel’s aesthetics and functionality. You can customize the fields you want to show and how you want to show them, you can also customize the Dashboard and add custom components to show stats and even graphs and charts.

Here we’ll take a look at some basic customization options. You can add these customization options in your admin.js file.

Customize branding

...
...
rootPath: '/admin',
resources: [...],
branding: {
  logo: 'URL_TO_YOUR_LOGO',
  companyName: 'YourCompanyName',
  softwareBrothers: false   // if Software Brothers logos should be shown in the sidebar footer
},
...
...


Customizing properties of fields

You can choose the fields you want to show, filter with, edit and list, etc. For each resource, you need to give options for your properties. Here’s an example:

Visibility of Fields

...
...
{
  resource: User,
  options: {
    properties: {
      name: { isVisible: { list: true, filter: true, show: true, edit: false } },
      email: { isVisible: { list: true, filter: true, show: true, edit: false } },
      password: { isVisible: { list: false, filter: false, show: false, edit: false } },
      avatar_url: { isVisible: { list: false, filter: false, show: true, edit: false } },
      bio: { isVisible: { list: false, filter: false, show: true, edit: true } },
    }
  }
},
...
...

Type of a field

The richtext option will show a Rich Text Editor interface whenever you are editing it in Admin Panel.

...
...
{
  resource: User,
  options: {
    properties: {
      ...
      bio: { 
        isVisible: {...},
        type: 'richtext'
      },
      ...
    }
  }
},
...
...

AdminBro is a great, modern Admin Panel for NodeJS applications, with an amazing set of features, extensibility and customization options, and with options to support both Relational and Non-Relational Databases. If you want to know more about it, please check out the documentation and give it a shot.



Documentation: https://softwarebrothers.github.io/admin-bro-dev/

GitHub: https://github.com/SoftwareBrothers/admin-bro

NPM: https://www.npmjs.com/package/admin-bro


Contact us to work on Node.JS development needs.

- Jitendra Nirnejak