Ricardo Henriques

February 23, 2024

Min Read

Node.js Admin Panels - Strapi and Express Admin Reviewed

Colorful JavaScript code with syntax highlighting for Node.js admin panels like Strapi and Express.

Lately, I’ve been researching for a fast and simple way to develop a back office in JavaScript, without the need to write everything from scratch. During my research, I found two great options – Strapi and Express Admin.

Looking at them upfront, we can see that the main difference regarding the build stack is that the Strapi admin interface is built with React JS. Each option deserves, however, much more thorough analysis to get to know their particularities. I’ll take this chance to also provide a bit of information on how to configure each and get them running smoothly in no time.

blue arrow to the left
Imaginary Cloud logo

Express Admin

Express Admin panel showing a car data form with theme and model dropdown menus and an open calendar date picker.

Express Admin lets you connect to MySQL, MariaDB, SQLite and PostgreSQL databases, but please note that it is relational database-oriented. Express Admin configurations are done through JSON manually created files.

Its main features are:• SQL table relationships - you can define all types of table relationships;• Internationalization is possible;• Ability to create custom views and events;• All kinds of browser-side libraries and controls;• Allows themes (Bootswatch).

How to get Express Admin up and running

I’ll assume that you already have both Node.js and NPM installed beforehand (I  would also suggest the use of NVM here):

To get the module

undefined

To create a project

undefined

Running this command will prompt for database type, port, user, database name, password, admin user and admin password. Please note that Admin Express requires you to have an existing database with data.

Terminal output showing Express Admin setup with MySQL database configuration and the server listening on port 3000.

As you can notice, your admin interface is now up and running! Just go to your browser and access to localhost:3000.

Express Admin panel login screen featuring username and password input fields.

Login to enter the main screen:

Express Admin panel interface for site administration showing a tables section with a link to products.

My database has only one table (products), but from here you can add new entries, delete them or update the existing ones. You have a full crud.

Express Admin panel interface showing a products selection page with a table for product ID and description.

Express Admin is able to read your schema and map it into a JSON configuration file. This is part of the settings.json file that was

generated by admin:

JSON code snippet defining database schema for products, used for configuring a Node.js admin panel.

As you can see, all the table fields are defined here. This is how Express Admin builds the crud for each table. As for the database access configurations, they are stored inside the config.json.

If you want to know more about the Express Admin configuration, just go to this page and follow the listed steps.

Express Admin main features

SQL Relationships

Express Admin also allows you to configure relationships between tables to automatically create the proper fields. You can have one to many, many to many, many to one and one to one relationships. Just go to settings.json and change it according to your needs. The following image shows an example of one to many relationships:

undefined

To know more about relationships, just scan through here.

Customisation (views for instance)

Yes, it’s possible, since you have a custom.json file where you can configure your custom code:

undefined

Just create your custom app.js and a view file. To know more about this just follow this page.

My thoughts on Express Admin

If you need only an admin interface with the CRUD functionalities and some level of customization, Express Admin is a good solution. As we saw before, it allows relationships between tables, supports custom views and works with multiple databases (relational only – MySQL, MariaDB, SQLite and PostgreSQL databases). In my opinion, Express Admin is a great option to pick due to its simplicity and customisation.

Some further type of customisation for the dashboard is missing, but you can always fork the code and modify it according to your needs.

blue arrow to the left
Imaginary Cloud logo

Strapi

As you've certainly noticed, Express Admin is a good admin interface and very good for what it stands. Now imagine that you could have all those features and also be able to generate an API, and other features such as user authorization and authentication. That would be great, right? Well, it's possible with Strapi!

Next I’ll give you an overview of how Strapi works and how to get started with it. For further information check the Strapi documentation.

Let’s start by installing Strapi:

undefined

undefined

Afterwards, create a new project. You’ll be prompted for database type, database name and access data.

undefined

undefined

Terminal showing Strapi project initialization, database configuration, and successful Node.js plugin installation logs.

Before starting the project, you have to run the NPM run setup. Then, you’re ready to go.

undefined

If you access localhost:1337/admin you should be able to see the admin user creation screen:

Strapi admin panels setup screen showing a form to create the root admin user with username and password fields.

Just create your admin user and, afterwards, you’ll be redirected to the dashboard:

Strapi admin panels dashboard featuring sidebar navigation, welcome message, and a quick start tutorial button.

Strapi Main Features:

Content Creation (content-types)

Let’s jump right to the good stuff and cover how you can create content. You can either use the “Content Type Builder” on the left menu or generators. I’ll explain here how to use the content type builder, but don’t forget to give the generators a try as well.

Content types are simply the models (and API) connected to your MySQL database that are used by Strapi in order to generate the CRUD screens. So, let’s add a new content type:

Add New Content Type screen in a Strapi admin panel showing name, connection, and description input fields.

As for the fields, when you click on add new field you’ll get this:

Strapi admin panel interface titled Add New Field showing options for String, Text, Number, and JSON data types.

Strapi allows you to choose the data type, which consists in one of its most interesting features. Let’s add 2 fields (description and price) and click save. This is when things get really interesting. Just look at the generated files:

Strapi project structure in a code editor showing an admin directory and a routes.json file for a Node.js application.

Awesome, isn’t it? Strapi just generated the service, the model and the controller for your API, and of course, you can always customise

them according to your needs.

Another interesting feature is the ability to create relationships within the content types. Let’s assume one more content type (category) that we want to associate with the product. When adding a field, we select relation type and then:

Strapi admin panel showing the Add New Relation interface where a Category has many Products.

You are able to choose from one to one, one to many and many to many relation types. So if you add a product, you’ll see that a category field shows up.

Strapi admin panel for Node.js showing a New Entry form with description, price, and category selection fields.

Building API's

The API is automatically generated and you can modify the code according to your needs.

Strapi project folder structure and Category.js controller code in a code editor for a Node.js admin panel.

Roles and Permissions

In order to give public access to the API, you can set the roles and permissions, which is another cool feature on Strapi. It comes out of the box with a roles / permissions management plugin.

The Strapi admin panel Roles and Permissions page listing user roles like Administrator, Authenticated, and Public.

To allow public access to the API you change the role:

Strapi admin panel interface displaying role details and permissions for a Node.js project.

My thoughts on Strapi

If you need an admin interface, but you’re also looking to build and serve an API, Strapi is an excellent choice for you. Strapi’s content-type generator is excellent and will fulfil almost every need you might have. If it doesn’t, you can always develop your own plugins. Another great feature is the roles / permissions.

Unfortunately, Strapi is still under development and presents some bugs on usage, but the community is growing and it's very active on GitHub, so we’re always expecting improvements on it.

Overview

Depending on what your requirements are, you can choose Express Admin if you just want to integrate an admin interface on your app in order to manage your data (simple CRUD interfaces) and some level of customisation.

If your needs include building an API, roles and users permissions, then Strapi should definitely be your choice.

So we can say that both options are excellent and the choice should be done according to your requirements.

UX Audit advertisement listing benefits to improve user experience and engagement, with 3D mobile app interface graphics.

Found this article interesting? You might like these ones too!

blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
Ricardo Henriques
Ricardo Henriques

Developer @Imaginary Cloud, dedicated to crafting exceptional software solutions, committed to innovation and embracing cutting-edge technologies.

Read more posts by this author

People who read this post, also found these interesting:

Dropdown caret icon