This blog is the getting started guide for AdminBro, react based admin panel for node js application. In this blog, we are going to create a demo app where an admin can manipulate users’ and companies’ data using an admin panel created by AdminBro. I am going to divide this tutorial into different parts because of its length. The code for each part will be pushed to a separate branch on Github[https://github.com/zelalem-12/adminbro-tutorial].

Note: This blog is for those who are already familiar with node js with express framework, mongoose and react.

For the last couple of years, I have been working mostly on Node projects. Since then, I have been looking for a role-based admin panel for my node js applications. Recently, I came across AdminBro, which uses your existing framework to render its routes. It is really useful because it not only allowed me to add an admin panel in a very short time frame but also provided various customizing options. More importantly, AdminBro 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. As defined on AdminBro home page,

AdminBro is An automatic admin interface that can be plugged into your application. You, as a developer, provide database models (like posts, comments, stores, products, or whatever else your application uses), and AdminBro generates UI which allows you (or other trusted users) to manage content.

Why should you use it:

1. Supports both relational(Sequalize) and non relational(mongoose) Database Models
2. Built on the modern stack: Node.js, React.js, Styled-components
3. Supports heavy customization
4. Its awesome look

……………………………………………………………………………

In this part the blog, we will be able to

1. Create app and models using express and mongoose
2. Install and integrate AdminBro

In the next part, we will be doing more customization to our admin panel.

Create 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 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 }
})

module.exports = User = mongoose.model(‘User’, userSchema)

Add your models in your app and Connect to MongoDB

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

Import MongoDB

const mongoose = require(‘mongoose’)

// Connect to MongoDB
mongoose
.connect(YOUR_MONGODB_URI, { useNewUrlParser: true, useUnifiedTopology: true })
.then(() => console.log(‘? MongoDB Connected…’)
.catch(err => console.log(err))

Install and integrate AdminBro

Install the AdminBro and necessary adapter(s)

npm i admin-bro admin-bro-expressjs admin-bro-mongoose express-formidable

Create an 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(‘./model’)

AdminBro.registerAdapter(AdminBroMongoose)
const adminBro = new AdminBro({
rootPath: ‘/admin’
resources: [
{
resource: User,
options: {
// check the documentation for options you can use
}
}
],
})

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

Add the AdminBro Router

Add the AdminBro Router in your app.js

app.use(‘/admin’, require(‘./admin’))

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.

In this part, we are done with the introduction, setup, and integration. In the next part, we will add customizations that unlock best the features of AdminBro.

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

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

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