Admin Bro

This blog is the getting started guide for AdminBro, react based admin panel for Node.js applications. In this blog, we are going to create a demo app where an admin can manipulate users and companies data using an admin panel created by AdminBro.

I am going to divide this tutorial into different parts because of its length. The code for each part will be pushed to a separate branch on GitHub [https://github.com/zelalem-12/adminbro-tutorial].Note: This blog is for those who are already familiar with Node.js with Express framework, Mongoose, and React. For the last couple of years, I have been working mostly on Node projects. Since then, I have been looking for a role-based admin panel for my Node.js applications.

Recently, I came across AdminBro, which uses your existing framework to render its routes. It is really useful because it not only allowed me to add an admin panel in a very short time frame but also provided various customizing options. More importantly, AdminBro allows you to manage your database resources. It supports Mongoose and Sequelize, and it works flawlessly with Express.js and Hapi.js. Not just that, AdminBro can be integrated with any Node.js Framework. Mongoose is an Object Data Modeling (ODM) library for MongoDB and Node.js. It manages relationships between data, provides schema validation, and is used to translate between objects in code and the representation of those objects in MongoDBSequelize is a promise-based Node.js object-relational mapping (ORM) for a relational database.  It features solid transaction support, relations, eager and lazy loading, read replication, and more. As defined on the AdminBro home page,
AdminBro is an automatic admin interface that can be plugged into your application. You, as a developer, provide database models (like posts, comments, stores, products, or whatever else your application uses), and AdminBro generates UI that allows you (or other trusted users) to manage content.

Why should you use it:

1. Supports both relational(Sequelize) and non-relational (Mongoose) Database Models
2. Built on the modern stack: Node.js, React.js, Styled-components
3. Supports heavy customization
4. Its awesome look,

in this part of the blog, we will be able to
1. Create app and models using express and mongoose
2. Install and integrate AdminBro. In the next part, we will add authentication and customization to our admin panel.

Create an app and models

zelalem-12/adminbro-tutorial Last updated a month agozelalem-12/adminbro-tutorial | Sep 6th | Added by GitHub12:44

Before starting with AdminBro, you must have an Express.js application with your models defined. So, in the first section, we are going to set up a Node.js Server with Express.js and also define our models in Mongoose.

# Create a simple Express application

const express = require('express')
const bodyParser = require('body-parser')const app = express()
app.use(bodyParser.json())app.get('/', (req, res) => {
res.send('Hello World')
})//...
// Your Routes
//...const PORT = 3000
app.listen(PORT, () => {
console.log(`:fire: Server started on PORT: ${PORT}`)
})# Create your database model To keep things simple we are just building a User Model in mongooseconst mongoose = require('mongoose')const userSchema = mongoose.Schema({
name: { type: String, required: true },
email: { type: String, required: true },
password: { type: String, required: true },
avatar_url: { type: String },
bio: { type: String }
})module.exports = User = mongoose.model('User', userSchema)# Add your models in your app and connect to MongoDB Connect to your MongoDB database in your app.js file. To do this, add the following code in your app.js#Import MongoDB
const mongoose = require('mongoose')// Connect to MongoDB
mongoose
.connect(YOUR_MONGODB_URI, { useNewUrlParser: true, useUnifiedTopology: true })
.then(() => console.log(':fire: MongoDB Connected...')
.catch(err => console.log(err))#  Install and integrate AdminBro
Install the AdminBro and necessary adapter(s): npm i admin-bro admin-bro-expressjs admin-bro-mongoose express-formidable2. Create an admin.js file to keep your AdminBro Configurationsconst AdminBro = require('admin-bro')
const AdminBroExpress = require('admin-bro-expressjs')
const AdminBroMongoose = require('admin-bro-mongoose')const User = require('./model')AdminBro.registerAdapter(AdminBroMongoose)
const adminBro = new AdminBro({
rootPath: '/admin'
resources: [
{
resource: User,
options: {
// We'll add this later
}
}
],
})module.exports = adminRouter = AdminBroExpress.buildRouter(adminBro)Add the AdminBro RouterAdd the AdminBro Router in your app.jsapp.use('/admin', require('./admin'))

# Start the server and testNow start your server and go to https://localhost:3000/admin or to your local server’s URL(If you’re using different configuration).You can see the AdminBro dashboard with your Models on the Left Sidebar. You can now perform all operations on your data with the AdminBro Panel.In this part, we are done with the introduction, setup and integration. On the next part, we will add authentication and customization which unlock best the features of AdminBro.Documentation: https://softwarebrothers.github.io/admin-bro-dev/GitHub: https://github.com/SoftwareBrothers/admin-broNPM: https://www.npmjs.com/package/admin-broSoftwareBrothers/admin-broAdminBro is an admin panel for apps written in node.jsWebsitehttp://adminbro.comStars2165SoftwareBrothers/admin-bro | Nov 24th, 2018 | Added by GitHubsoftwarebrothers.github.ioAn Auto-generated Admin Panel for your Node.js ApplicationYou, as a developer, provide database models, and AdminBro generates ReactJS UI which allows you (or other trusted users) to manage content. (321 kB)https://adminbro.com/splash/admin-bro.pngnpmadmin-broAdmin panel for apps written in node.js12:46The updated one with code highlighted