Tutorial

01. Installation instructions

Prefer watching instead of reading?

check out this video tutorial which shows you how you can create an Admin Panel from scratch.

Installation of an AdminBro consist of 2 steps.

01. Install the framework plugin

Since AdminBro uses your existing framework to render its routes - you have to use one of our plugins.

There are plugins for:

In this tutorial I will present the simplest way of adding AdminBro to an express framework. If you want to launch AdminBro by other framework - see its documentation (above)

Express installation

Install the AdminBro along with the express plugin

npm install admin-bro @admin-bro/express

If you don't have express or express-formidable already installed, you will have to add that too. This is because they are peerDependencies of @admin-bro/express:

npm install express express-formidable

Now create an express router which will handle all AdminBro routes

const AdminBro = require('admin-bro')
const AdminBroExpress = require('@admin-bro/express')

const express = require('express')
const app = express()

const adminBro = new AdminBro({
  databases: [],
  rootPath: '/admin',
})

const router = AdminBroExpress.buildRouter(adminBro)

Use this router in express.js app

app.use(adminBro.options.rootPath, router)
app.listen(8080, () => console.log('AdminBro is under localhost:8080/admin'))

If you are adding AdminBro to an application which already has any other middleware, it is good to put the AdminBro setup on top.

This is because other middleware can transform requests so that AdminBro wont be able to handle it.

To see how to add an authentication or other modifications - visit the Express Plugin documentation.

02. Install the Database Adapter and add resources

AdminBro can be connected to many different types of resources. Right now we support:

To add resources to AdminBro you first have to register adapter for the resource you want to use.

Example for a mongoose setup:

Installation

npm install @admin-bro/mongoose

Registration of the adapter

const AdminBro = require('admin-bro')
const AdminBroMongoose = require('@admin-bro/mongoose')

AdminBro.registerAdapter(AdminBroMongoose)

Pass resources to AdminBro like this (express example)

const User = mongoose.model('User', { name: String, email: String, surname: String })
const AdminBroOptions = {
  resources: [User],
}
const AdminBro = new AdminBro(AdminBroOptions)
const router = AdminBroExpress.buildRouter(adminBro)
// and add router to express

What's next?