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

• Express
• Hapi
• Koa.js
• Nest.js

In this tutorial, I will present the simplest way of adding AdminBro to an express framework. If you want to launch AdminBro by a different 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 won't be able to handle it.

To see how to add 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:

• Mongoose
• Sequelize
• TypeORM

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

Example of 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

In the example above I assume that you already connected with the database. If not - you might need to wrap everything with the async function like this:

const User = mongoose.model('User', { name: String, email: String, surname: String })

const run = async () => {
  await mongoose.connect(...)
  const AdminBroOptions = {
    resources: [User],
  }
  const AdminBro = new AdminBro(AdminBroOptions)
}

run()

What's next?

• To find out more information about passing resources visit the 02. Adding resources tutorial
• See how you can customize resources: 03. Customize resources
• Or add custom actions: 04. Customize actions