Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Node.js Admin Panels - Strapi and Express Admin Reviewed

Ricardo Henriques

February 23, 2024

Min Read
Node.js Admin Panels - Strapi and Express Admin Reviewed
blue arrow to the left
Imaginary Cloud logo

Express Admin

Express Admin UI (www.github.com/simov/express-admin)

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

$ [sudo] npm install [-g] express-admin
# PostgreSQL only: run this inside the express-admin folder
$ npm install pg@2.8.2
# SQLite only: run this inside the express-admin folder
$ npm install sqlite3@2.2.0

To create a project

admin path/to/config/dir

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.

Express Admin building project

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

Express Admin Login

Login to enter the main screen:

Express Admin Main screen

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 Entity screen

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:

Express Admin settings.json configurations

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:


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:


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:

npm install strapi@alpha -g


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

strapi new my-project


Strapi building project

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

cd my-project
npm run setup
strapi start

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

Strapi Login

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

Strapi Main Screen

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:

Strapi Add new content type

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

Strapi Field type selection

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 API routing

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 Relating content type

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 Showing new relation with content type

Building API's

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

Strapi API code generated

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.

Strapi Roles and permissions

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

Strapi Roles and permissions changing

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.

 

Ready for a UX Audit? Book a free call

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
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:

arrow left
arrow to the right
Dropdown caret icon