Creating Dynamic Admin Panels for Node.js with AdminBro
Written on
Chapter 1: Introduction to Admin Panels
When developing backend applications, it’s essential to verify that the data we manage is being stored correctly. Typically, this involves using a database query tool or simulating the API with tools like Postman or Swagger, which can be cumbersome.
For applications that require basic CRUD operations, such as e-commerce platforms, creating a separate admin panel can feel like an unnecessary effort. Fortunately, today we’ll explore how to set up an admin panel in mere minutes without the need to write any front-end code.
Section 1.1: What is the Solution?
Frameworks like Django provide built-in solutions for this requirement. However, for Node.js, there hasn't been an official offering. During my search for alternatives, I discovered AdminBro, a tool that allows you to create a comprehensive admin panel without boilerplate code.
Some of the key features include:
- CRUD Operations (naturally!)
- Authentication
- Navigation
- Validation
- Role Management
- And much more!
We’ll create a simple demo application using NestJS, with TypeORM for the ORM and any relational database of your preference.
Subsection 1.1.1: Prerequisites
To follow this tutorial, you should possess a basic understanding of:
- Setting up a backend project with Node.js
- Connecting to a database for querying
Section 1.2: Step-by-Step Setup
Step 1: Bootstrapping a Project with NestJS
To start a NestJS project, first, install the NestJS CLI globally:
npm install -g @nestjs/cli
Then, run the following command to create your project:
nest new project-name
This process is quite similar to using express-generator in Express.js.
Step 2: Installing Required Dependencies
Next, install the necessary dependencies for AdminBro:
yarn add admin-bro
You’ll also need the official NestJS plugin for AdminBro:
yarn add @admin-bro/nestjs
If you’re using Express under NestJS, install additional dependencies:
yarn add express express-formidable @admin-bro/express
Lastly, install the TypeORM module for AdminBro:
yarn add @admin-bro/typeorm
Step 3: Properly Model Your Entities
For AdminBro to function correctly, your entities should extend from BaseEntity, which can be imported from TypeORM.
Step 4: Initialization on Startup
Create a new file named setup-admin.ts and include the following code. Add your entities into the resources array and call the function in your main.ts file:
await setupAdminPanel(app);
Now, you’re ready! Open your browser and navigate to http://localhost:3000/admin/admin-bro to start adding or viewing your documents from the sidebar.
I hope you found this introduction helpful! Have a fantastic day!
Chapter 2: Video Tutorials
In the first video, titled "Adding Admin Panel to Node.js App - Customize Resources," viewers will learn how to effectively implement an admin panel for Node.js applications.
The second video, "How to Install a Node.js Admin Panel in 7 Minutes or Less," by Jonasz Wiącek, showcases a quick installation process for an admin panel in Node.js.