Learn how to track and manage all of your web application data in a single, unified admin interface using Node.js and AdminBro.

Web applications are continually handling data from a variety of sources. Content streams in from a slew of different databases and repos, and keeping track of all these records can quickly become a challenge for administrators.

AdminBro strives to solve this problem by providing a unified admin interface that lets you manage all your data from a single panel.

What is AdminBro?

AdminBro is an open-source package from Software Brothers that adds an auto-generated admin panel to your Node.js application.

You can connect your various databases to the admin interface and perform standard CRUD operations (create, read, update, delete) on the records. This greatly simplifies and extends your ability to find, monitor, and update your app data across multiple sources.

About this tutorial

In this article, we’ll show you how to add an AdminBro admin panel to your app from start to finish. Here are the topics we’ll be covering:

1. Installing peer dependencies, and installing AdminBro with its framework plugin
2. Creating and setting up the router middleware
3. Connecting the resource database
4. Verifying and opening the admin panel

At the end of this tutorial, you’ll have a working admin interface that you can use to start managing your app data.

Prerequisites

To complete these steps, you need a standard web development stack that includes the following components:

• A web framework for Node.js. AdminBro works with these popular frameworks:
• Express
• Hapi
• Koa
• A resource database with an ODM/ORM. AdminBro currently supports the following ODM and ORMs:
• Mongoose for MongoDB
• Sequelize for Postgres, MySQL, MariaDB, SQLite, and Microsoft SQL Server
• TypeORM for MySQL, PostgreSQL, MariaDB, SQLite, Microsoft SQL Server, Oracle, SAP Hana, and WebSQL

Good to go? Let’s get started.

Creating the admin panel

In this tutorial, we’ll walk through the example steps for setting up an admin panel using the Express framework and MongoDB with the Mongoose ORM. The aim is to give you the general gist of the AdminBro setup process. You can easily adapt these instructions for a different framework and resource model as needed.

1. Install AdminBro with the framework plugin

First of all, make sure that you’ve installed your framework with its related modules that are peer dependencies of the AdminBro framework plugin. In our case, we want to install Express and the Express-formidable module for parsing form data:

npm install express express-formidable

Now we can install the AdminBro package with its Express plugin:

npm install admin-bro @admin-bro/express

In addition to supporting Express, AdminBro has documentation pages for its Hapi and Koa plugins, with guidance on writing the setup code if you want to use one of those frameworks. The docs will also tell you exactly which packages and modules you have to install as peer dependencies.

2. Build and set up the router middleware

Now we’ll create the Express router for handling AdminBro traffic. The following code does the trick:

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)

The next step is to set up the router as middleware using the Express.js app object:

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

Tip: It’s fine to perform this setup on an app that has an existing middleware stack. Just be sure to put AdminBro on the topmost layer. This will keep the admin panel in working order, as AdminBro can’t handle requests that have been processed and transformed by other middleware.

#node #javascript #web-development #programming #developer