AdminJS - a Modern Admin Panel for Node JS | React based Admin Panel

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 AdminJS.

AdminJS 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, AdminJS can be integrated with any Node.js Framework.

Why should you use it:

• Supports both relational(Sequalize, TypeORM, MikroORM, Prisma) 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-staging.herokuapp.com/admin/login

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

1. Create your app and models

Before starting with AdminJS 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 },
  },
  { timeStamps: true }
)

// 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 AdminJS

Install the AdminJS and necessary adapter(s)

npm i adminjs @adminjs/express @adminjs/mongoose

Create a admin.js file to Keep your AdminJS Configurations

const AdminJS = require('adminjs')
const AdminJSExpress = require('@adminjs/express')
const AdminJSMongoose = require('@adminjs/mongoose')

const User = require('./models')

AdminJS.registerAdapter(AdminJSMongoose)
const adminJS = new AdminJS({
  rootPath: '/admin'
  resources: [
    {
      resource: User,
      options: {
        // We'll add these later
      }
    }
  ],
})

module.exports = adminRouter = AdminJSExpress.buildRouter(adminJS)

Add the AdminJS Router

Add the AdminJS 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 AdminJS dashboard with your Models on the Left Sidebar. You can now perform all operations on your data with the AdminJS Panel.

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

3. Customization

Customization is where AdminJS 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

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'
      },
      ...
    }
  }
},
...
...

AdminJS 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.

Website: https://adminjs.co/

Documentation: https://docs.adminjs.co/

GitHub: https://github.com/SoftwareBrothers/adminjs

NPM: https://www.npmjs.com/package/adminjs

- Jitendra Nirnejak