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 fremework 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 those frameworks. If you want to know more - visit their corresponding pages (above).

Express

Install the AdminBro along with the express plugin

npm install admin-bro admin-bro-expressjs

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-expressjs:

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-expressjs')

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

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

Hapi

If you use Hapi framework instead of express - follow this installation instructions:

npm install admin-bro-hapijs boom inert

Register plugin and start server

const AdminBroPlugin = require('admin-bro-hapijs')
const Hapi = require('hapi')

const adminBroOptions = {
  resources: [],
  rootPath: '/admin',
}

const server = Hapi.server({ port: process.env.PORT || 8080 })
const start = async () => {
  await server.register({
    plugin: AdminBroPlugin,
    options: adminBroOptions,
  })

  await server.start()
}

start()

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

02. Install the Database Adapter and add resources

AdminBro can be connected to many different types of resources. Right now we support mongoose ODM and sequelize ORM.

To add resources to AdminBro you first have to register an adapter for the resource type you will be using.

Example for a mongoose setup:

Installation

npm install admin-bro-mongoose

Register 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?