How to add an advanced, React based, admin panel to Node.js app in 3 minutes.

This article will be about a new package called: AdminBro published recently by SoftwareBrothers.

AdminBro is an automatic admin interface which allows you to manage your database resources. It can be added to almost any Node.js framework. In this short tutorial, I will show you how to configure AdminBro to manage User mongoose resource in a simple express.js app.

I suggest you check out the AdminBro demo page before moving further.

This is the plan:

  1. Create a simple express app
  2. Add AdminBro to it

…and we shall do this in 3 minutes!

Let’s do this!

In the first step, we will create a simple one-file API server.

An example app without an AdminBro

The app is an express.js API server which uses mongoosejs to fetch data from mongodb and returns it in a JSON format.

The code of the app looks like this.

// ==========  server.js ==============
// Requirements
const mongoose = require('mongoose')
const express = require('express')
const bodyParser = require('body-parser')
// express server definition
const app = express()
app.use(bodyParser.json())
// Resources definitions
const User = mongoose.model('User', { name: String, email: String, surname: String })
// Routes definitions
app.get('/', (req, res) => res.send('Hello World!'))
// Route which returns last 100 users from the database
app.get('/users', async (req, res) => {
const users = await User.find({}).limit(10)
res.send(users)
})
// Route which creates new user
app.post('/users', async (req, res) => {
const user = await new User(req.body.user).save()
res.send(user)
})
// Running the server
const run = async () => {
await mongoose.connect('mongodb://localhost:27017/test', { useNewUrlParser: true })
await app.listen(8080, () => console.log(`Example app listening on port 8080!`))
}
run()

To run it you have to install dependencies:

npm install mongoose express body-parser

Make sure you have a mongodb running in the system.

and you can run the server via node command:

node server.js

Server exposes 2 routes GET /users and POST /users you can test them by using curl:

curl -d '{"user": {"name": "wojtek"}}' -H "Content-Type: application/json" -X POST http://localhost:8080/users/
# => {"_id":"5c546dcbc98f5e1923c8eef9","name":"wojtek","__v":0}
curl http://localhost:8080/users
# => [{"_id":"5c546dcbc98f5e1923c8eef9","name":"wojtek","__v":0}]

Adding AdminBro

Ok — so now we would like to add an admin UI with the ability to manage users. Of course, we will be using AdminBro in order to do that.

First, let’s install all the dependencies. We are using mongoose so we will have to install admin-bro-mongoose database adapter. Also, we use expressjs, that is why we will need an admin-bro-expressjs plugin:

npm install admin-bro admin-bro-mongoose admin-bro-expressjs

So now we have to use those modules. We will:

This is how it will look like:

const AdminBro = require('admin-bro')
const AdminBroExpressjs = require('admin-bro-expressjs')
// We have to tell AdminBro that we will manage mongoose resources with it
AdminBro.registerAdapter(require('admin-bro-mongoose'))
// Pass all configuration settings to AdminBro
const adminBro = new AdminBro({
resources: [User],
rootPath: '/admin',
})
// Build and use a router which will handle all AdminBro routes
const router = AdminBroExpressjs.buildRouter(adminBro)
app.use(adminBro.options.rootPath, router)

Full application in one file

This is an entire Express server with AdminBro managing Mongoose User Resource:

// ==========  server.js ==============
// Requirements
const mongoose = require('mongoose')
const express = require('express')
const bodyParser = require('body-parser')
const AdminBro = require('admin-bro')
const AdminBroExpressjs = require('admin-bro-expressjs')
// We have to tell AdminBro that we will manage mongoose resources with it
AdminBro.registerAdapter(require('admin-bro-mongoose'))
// express server definition
const app = express()
app.use(bodyParser.json())
// Resources definitions
const User = mongoose.model('User', { name: String, email: String, surname: String })
// Routes definitions
app.get('/', (req, res) => res.send('Hello World!'))
// Route which returns last 100 users from the database
app.get('/users', async (req, res) => {
const users = await User.find({}).limit(10)
res.send(users)
})
// Route which creates new user
app.post('/users', async (req, res) => {
const user = await new User(req.body.user).save()
res.send(user)
})
// Pass all configuration settings to AdminBro
const adminBro = new AdminBro({
resources: [User],
rootPath: '/admin',
})
// Build and use a router which will handle all AdminBro routes
const router = AdminBroExpressjs.buildRouter(adminBro)
app.use(adminBro.options.rootPath, router)
// Running the server
const run = async () => {
await mongoose.connect('mongodb://localhost:27017/test', { useNewUrlParser: true })
await app.listen(8080, () => console.log(`Example app listening on port 8080!`))
}
run()

To run it simply write:

node server.js

and, under localhost:8080/admin, you should see something like this:

Summary

And now you can manage all Users in the database. If your app will grow with new resources — they will appear in the Admin Panel.

AdminBro has lots of options so you can easily adjust it to your needs.

Check out the documentation and give it a try.