Introduction to Admin-Bro

Admin-Bro is an open-source package for building modern and automated admin panels. It integrates seamlessly into various web frameworks and supports a wide range of databases. Whether you’re a developer working on a complex application or a startup looking to manage your data with ease, Admin-Bro has got you covered.

Getting Started with Admin-Bro

First, let’s set up Admin-Bro in your project. Here is a basic installation guide:

  npm install @admin-bro/core @admin-bro/express @admin-bro/mongoose

Once these packages are installed, you can initialize Admin-Bro in your Express application:

  const AdminBro = require('admin-bro');
  const AdminBroExpress = require('@admin-bro/express');
  const AdminBroMongoose = require('@admin-bro/mongoose');
  const express = require('express');
  const mongoose = require('mongoose');

   AdminBro.registerAdapter(AdminBroMongoose);

  const app = express();
  
  const adminBro = new AdminBro({
    databases: [mongoose.connection],
    rootPath: '/admin',
  });
  
  const router = AdminBroExpress.buildRouter(adminBro);
  
  app.use(adminBro.options.rootPath, router);

  app.listen(3000, () => console.log('Admin-Bro is running on port 3000'));

Key Features and APIs

Admin-Bro offers a multitude of features and APIs for customizing and enhancing your admin interface:

1. Resources Management

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

  const adminBro = new AdminBro({
    resources: [
      { resource: User, options: { properties: { encryptedPassword: { isVisible: false } } } }
    ],
    rootPath: '/admin',
  });

2. Dashboards

You can create a custom dashboard for a better overview of your data:

  adminBro.options.dashboard = {
    handler: async () => {
      return { some: 'output' };
    },
    component: AdminBro.bundle('./my-dashboard-component'),
  };

3. Custom Actions

Define custom actions to extend the functionality of your admin panel:

  adminBro.watch({
    actions: {
      myCustomAction: {
        actionType: 'record',
        handler: async (request, response, context) => {
          const { record } = context;
          // Custom logic here
          return { record: record.toJSON() };
        },
        component: AdminBro.bundle('./my-action-component'),
      },
    },
  });

Complete Example

Here’s a full example of setting up an Admin-Bro dashboard with custom resources and actions:

  const express = require('express');
  const mongoose = require('mongoose');
  const AdminBro = require('admin-bro');
  const AdminBroExpress = require('@admin-bro/express');
  const AdminBroMongoose = require('@admin-bro/mongoose');

  AdminBro.registerAdapter(AdminBroMongoose);

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

  const adminBro = new AdminBro({
    resources: [
      {
        resource: User,
        options: {
          properties: {
            password: { isVisible: false },
          },
          actions: {
            resetPassword: {
              actionType: 'record',
              handler: async (request, response, context) => {
                const { record } = context;
                record.update({ password: 'newpassword' });
                return { record: record.toJSON() };
              },
            },
          },
        },
      },
    ],
    rootPath: '/admin',
  });

  const router = AdminBroExpress.buildRouter(adminBro);

  app.use(adminBro.options.rootPath, router);

  mongoose.connect('mongodb://localhost/mydatabase', {
    useNewUrlParser: true,
    useUnifiedTopology: true,
  });

  app.listen(3000, () => console.log('Admin panel is running on port 3000'));

By leveraging these powerful features, you can create an efficient and user-friendly admin panel tailored to your needs.

---

Hash: 54585e158ad3cffe5b07706c09c199a631a030c0daf8bce2c9124cc35abfbedf