Pam Lu Tech writer and factotum

Create an admin panel with Node.js and AdminBro

3 min read 1097

AdminBro Node.js admin panel

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

We made a custom demo for .
No really. Click here to check it out.

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.

3. Connect resources

Now it’s time to seed the admin panel with data by connecting your resource databases. You’ll want to repeat this setup for each one of the ODM/ORMs that your app draws its data from.

Here we’ll show the example steps and code for Mongoose. If you’re looking to connect another supported resource model like Sequelize or TypeORM, you’ll need to follow the instructions on the documentation page for that ORM.

In our case, we start by installing AdminBro’s database adapter for Mongoose:

npm install @admin-bro/mongoose

Then we register the adapter so that it can be used in our project:

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

AdminBro.registerAdapter(AdminBroMongoose)

Now we’re ready to pass the whole database to the AdminBro ({}) options. Notice how you still need to put the model paths into the scope of your project even when passing a database in its entirety:

const mongoose = require(‘mongoose’)

require(‘path-to-your/mongoose-model1’)
require(‘path-to-your/mongoose-model2’)

const run = async () => {
    const connection = await mongoose.connect(‘mongodb://localhost:27017/test’, {
        useNewUrlParser: true,
    })
    const AdminBro = new AdminBro ({
        Database: [connection]
    }]
}
run()

Tip: Always establish the connection to the database before passing resources from it to the AdminBro ({}) options. This way, you ensure that AdminBro will be able to locate your resources.

Instead of passing an entire database to AdminBro, you can also pass resources individually. This alternative gives you more control over a range of different ResourceOptions. You can learn how to pass individual resources by reading the docs.

4. Check and open the admin panel

At this point, you’ve basically built the admin interface. To verify that you’ve done everything correctly, first make sure your database is up and then run the server:

node index.js

You’ll know you’re home free once you see this console log in the app terminal:

AdminBro is under localhost:8080/admin
AdminBro: bundle ready

Now you can access AdminBro by going to http://localhost:8080/admin.

AdminBro Local Host

Congratulations — you’ve just finished creating your own admin panel!

Summary

In brief, the steps for building an admin panel from scratch are:

  • Install the peer dependencies (the framework package with required modules)
  • Install AdminBro with its framework plugin
  • Build the router and set it up as middleware
  • Install and register the database adapter
  • Pass resources to AdminBro
  • Run the server and check the console log
  • Open the admin panel on port 8080

Once you’ve completed these steps, you’ll have a single, unified dashboard that you can use to view and manipulate your app data.

Next steps

With your new admin panel up and running, you can begin exploring the different capabilities that AdminBro has to offer. Here are just a few of the things you can do:

  • Customize the appearance of resources
  • Validate form fields
  • Set up action hooks on selected resources
  • Customize the dashboard with widgets
  • Configure role-based access control
  • Add external feature packages to extend AdminBro’s functionality

To find out more, check out the AdminBro docs.

200’s only Monitor failed and slow network requests in production

Deploying a Node-based web app or website is the easy part. Making sure your Node instance continues to serve resources to your app is where things get tougher. If you’re interested in ensuring requests to the backend or third party services are successful, try LogRocket. https://logrocket.com/signup/

LogRocket is like a DVR for web apps, recording literally everything that happens on your site. Instead of guessing why problems happen, you can aggregate and report on problematic network requests to quickly understand the root cause.

LogRocket instruments your app to record baseline performance timings such as page load time, time to first byte, slow network requests, and also logs Redux, NgRx, and Vuex actions/state. .
Pam Lu Tech writer and factotum

Leave a Reply