Create an Admin Panel with Node.js and Admin Bro

Cover Image

In this blog, I am presenting how to create an admin panel that automatically performs the CRUD operations based on our models.

To do that, I am using Admin Bro which is an automatic UI generator that generates UI based on the models.

1. Creating a Node JS Project
2. Creating Models
3. Creating Admin Panel

1. Creating a Node.js project

Create a new directory and initialize node with the command npm init.

mkdir expresstemplate
cd expresstemplate/
npm init -y
npm i nodemon

Express JS is an open-source web framework for node JS. The below command installs express to our project.

npm install express --save

Installing

package.json

"scripts": {
  "start": "nodemon index.js",
  "test": "echo \"Error: no test specified\" && exit 1"
},

index.js

const express = require('express')
var app = express()
app.get('/', function(req,res){
  res.send('Hello world')
})
app.listen(8000,function(){
  console.log('Listening to PORT 8000')
})

2. Creating Models

Now install mongoose which is an Object Data Modeling library for MongoDB and Node.js. It manages relationships between data and provides schema validation. The command installs mongoose.

npm i mongoose

After installing mongoose, connect MongoDB to Node.js. The connection can be achieved just by passing the MongoDB connecting string to the mongoose.

index.js

var express = require('express');
var app = express();
const mongoose = require('mongoose');//Routes
app.get('/', function (req, res) {
    res.send('Hello World!');
});
//Database
mongoose.connect('mongodb://localhost/test', {useNewUrlParser: true});
mongoose.connection.once('open',function(){
    console.log('Database connected Successfully');
}).on('error',function(err){
    console.log('Error', err);
})
app.listen(8000, function () {
    console.log('Listening to Port 8000');
});

After successfully connecting node with MongoDB, create a folder named Models where all Schemas will be kept. Inside the Models folder, create a file named emp.js. Inside this file, create a schema named empSchema and declare all the fields you want. Finally, export the schema.

Models/emp.js

const mongoose = require('mongoose');const empSchema = new mongoose.Schema({
  empName: {
    type: String,
    required: true,
  },  empEmail: {
    type: String,
    required: true,
  },
})module.exports = mongoose.model('Emp',empSchema)

3. Creating Admin Panel

Now, let’s start creating our Admin panel. To do that, we need to install Admin bro to our project.

An Auto-generated Admin Panel for your Node.js Application

npm install admin-bro @admin-bro/express
npm install express-formidable
npm install @admin-bro/mongoose

The above commands install Admin bro and other required dependencies that make Admin bro work.

After installation, copy the below code in the index.js file.

index.js

var express = require('express');
const Emp = require('./Models/emp')
const AdminBro = require('admin-bro')
const AdminBroMongoose = require('@admin-bro/mongoose')
const AdminBroExpress = require('@admin-bro/express')
var app = express();
const mongoose = require('mongoose');//Routes
app.get('/', function (req, res) {
    res.send('Hello World!');
});
//Database
mongoose.connect('mongodb://localhost/test', {useNewUrlParser: true});
mongoose.connection.once('open',function(){
    console.log('Database connected Successfully');
}).on('error',function(err){
    console.log('Error', err);
})
//Admin Bro
AdminBro.registerAdapter(AdminBroMongoose)
const User = mongoose.model('User', { name: String, email: String, surname: String })
const AdminBroOptions = {
  resources: [User, Emp],
}
const adminBro = new AdminBro(AdminBroOptions)
const router = AdminBroExpress.buildRouter(adminBro)
app.use(adminBro.options.rootPath, router)
app.listen(8000, function () {
    console.log('Listening to Port 8000');
});

Once done, navigate to http://localhost:8000/admin. There you will see something like the below one.

Admin Bro Demonstration

Also, check my previous blog wherein I have explained about the template engines with node js.

Feel free to contact me for any queries. Email: sjlouji10@gmail.com Linkedin: https://www.linkedin.com/in/sjlouji/

Complete code on my GitHub:

sjlouji/Node-JS-Basics---Medium

Happy coding!