AdminBro version 3

AdminBro - an automated admin interface for Node.js apps with React UI on the frontend has just got a version 3.0.

It’s been quite a busy couple of weeks at SoftwareBrothers, finalised with a 24h coding challenge, where we added lots of things to AdminBro. Some of them we’ve just released in v3, the rest will be released soon.

These are the 3 most exciting things which are waiting for you in admin-bro@3.0.0:

@admin-bro npm organization

We’ve moved all the adapters and plugins to @admin-bro organization in NPM. So in order to download the latest version make sure to update your package.json

These are the officially supported packages:

Spoiler alert.
These are the integrations we are working on right now: @admin-bro/koa, @admin-bro/nestjs and @admin-bro/firebase (both authentication and firestore)
  • @admin-bro/hasura

@admin-bro/design-system go their separate way

In AdminBro@v2 we rewrote almost the entire UI to our internal components library. It was so robust that we even started using it outside the AdminBro ecosystem. That is why in version 3.0 we extracted the entire Design System to an external package, so you can do the same thing.

Resources:

@admin-bro/design-system can be found here

all Atoms and Molecules are described in admin-bro documentation

finally, there is a Storybook running online

Possible Use Cases:

you need to create a custom signup/login page similar to what is inside the AdminBro panel.

you want to use only the frontend part of AdminBro, which is the case when you want to connect with an API instead of fetching the data right from the supported ODMs/ORMs

AdminBro Features™ (TM)

The last thing is AdminBro Features.

We use AdminBro a lot. And we very often share solutions among different resources. I believe that every project needs to have some password hashing logic, file upload or even an entire blog engine.

Sharing all these hooks and properties was problematic so we invented AdminBro Features.

Let me give you an example of adding a file upload and a blog engine in the world of AdminBro Features:

/** @type {AdminBroOptions} */
const options = {
  resources: [{
    resource: Article,
    options: {/** your regular options */},
    features: [
      blogEngine(),
      fileUpload({
         propertyName: ‘file’
         aws: {/** your S3 credentials */}
      })
    ]
  }]
}

So what we’ve done in admin-bro@v3 - we’ve added an interface for attaching features to resources. And there is a tutorial on how to create your own features. I hope that the open-source community will start working on new features and we will soon have a very versatile add-on ecosystem.

We are working on the first 2 features right now:

  • password hashing
  • file upload

Minor updates

We’ve also fixed some minor issues found in our repositories, so make sure to check out the changelog here

What’s next?

Now we are working on the things I mentioned earlier:

  • new adapters
  • new framework plugins
  • and new Features

To stay up to date make sure to subscribe to our SoftwareBrohters OpenSource newsletter or follow me on twitter.