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 AdminJS consist of 2 steps.
01. Install the framework plugin
Since AdminJS 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 AdminJS to an express framework. If you want to launch AdminJS by other framework - see its documentation (above)
Express installation
Install the AdminJS along with the express plugin
npm install adminjs @adminjs/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 @adminjs/express:
npm install express express-formidable
Now create an express router which will handle all AdminJS routes
const AdminJS = require('adminjs')
const AdminJSExpress = require('@adminjs/express')
const express = require('express')
const app = express()
const adminJs = new AdminJS({
databases: [],
rootPath: '/admin',
})
const router = AdminJSExpress.buildRouter(adminJs)
Use this router in express.js app
app.use(adminJs.options.rootPath, router)
app.listen(8080, () => console.log('AdminJS is under localhost:8080/admin'))
If you are adding AdminJS to an application which already has any other middleware, it is good to put the AdminJS setup on top.
This is because other middleware can transform requests so that AdminJS 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
AdminJS can be connected to many different types of resources. Right now we support:
To add resources to AdminJS you first have to register adapter for the resource you want to use.
Example for a mongoose setup:
Installation
npm install @adminjs/mongoose
Registration of the adapter
const AdminJS = require('adminjs')
const AdminJSMongoose = require('@adminjs/mongoose')
AdminJS.registerAdapter(AdminJSMongoose)
Pass resources to AdminJS like this (express example)
const User = mongoose.model('User', { name: String, email: String, surname: String })
const adminJsOptions = {
resources: [User],
}
const AdminJS = new AdminJS(adminJsOptions)
const router = AdminJSExpress.buildRouter(adminJs)
// and add router to express
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