Building Business Apps with React-admin

When you think of it, most business apps mostly consist of basic database interactions. You have concepts (invoices, items, appointments etc), and you want to perform the usual CRUD (create, read, update, delete) operations.

Once you notice this, you start wondering whether there are web development frameworks that could automatically generate, from a database, an API, web pages and forms, django-admin style, or like ForestAdmin. This means you could code very quickly web apps like ERPs or any other basic web applications to digitalize corporate processes.

Problem is, when you actually try, you quickly notice that your company operations include more than basic CRUD operations, for example custom permissions management, workflows, and other stuff deeply specific to your own business context. This means that when you try database admin frameworks such as django-admin, which can generate automatically web forms on top of your database, it usually gets you started real quick, but very soon you hit limitations and then the progress curve is real steep, since you have to customize yourself stuff that was not designed to.

I recently rewrote from scratch a b2b web application for a client that had hired a bad digital agency. In the process, I came across the react-admin framework, and decided to use it for my mission (with great success).

React-admin basically lets you quickly build a web app, from your API. It comes with a set of standard adapters that you can choose from to plug your API. The framework will then detect your entities, and will generate a good-looking web app with the CRUD forms out of the box.

So far, so good, but other options (the mentioned django-admin or ForestAdmin) let you do that too. Where react-admin really shines is that they really nailed the perfect level of abstraction. Each time you need to do something custom or extend the features, react-admin lets you do it in a natural way, at just the right level of abstraction. You can replace almost all the framework react components by your own, as long as you respect the component APIs, which are clearly and thoroughly documented.

I was able to get started very quickly, and customize things where needed very easily. It’s the first time I use a framework that feels opinionated enough to go quick at first, and yet flexible enough to customize stuff without feeling you’re tearing things down.

Another good sign is that many features requests on github are chosen not to be acted upon, to prevent features creep and keep the code consistent.

I was able to very quickly hack together a hello world react-admin app, here is a docker-compose.yml:


version: '2'
services:
nginx-front:
image: nginx:stable
ports:
– "3000:80"
volumes:
– ./nginx-front.conf:/etc/nginx/nginx.conf
links:
– front
– back
front:
image: node:10
command: ["/bin/sh", "-c","cd /home/app && npm run start"]
ports:
– "3001:3000"
environment:
REACT_EDITOR: atom
volumes:
– ./front:/home/app
back:
image: node:10
command: ["/bin/sh", "-c","cd /home/app && npm run dev"]
volumes:
– ./back:/home/app
environment:
PGUSER: ${PG_USER}
PGPASSWORD: ${PG_PASSWORD}
PGDATABASE: ${PG_DATABASE}
PGHOST: postgres
links:
– postgres
postgres:
image: postgres:9.6
environment:
POSTGRES_DB: ${PG_DATABASE}
POSTGRES_USER: ${PG_USER}
POSTGRES_PASSWORD: ${PG_PASSWORD}
volumes:
– data:/var/lib/postgresql/data
– ./db:/init
pgweb:
image: sosedoff/pgweb
command: pgweb –readonly –bind=0.0.0.0 –listen=8081
ports: ["5000:8081"]
links:
– postgres:postgres
environment:
– DATABASE_URL=postgres://${PG_USER}:${PG_PASSWORD}@postgres:5432/${PG_DATABASE}?sslmode=disable
depends_on:
– postgres
volumes:
data: {}

The full github repo is here: https://github.com/francoisruty/fruty_react-admin

I heavily recommend you have a look at this framework, and consider it for your B2B web development projects!

2 thoughts on “Building Business Apps with React-admin

Leave a comment