A single path from pnpm create adonisjs to a blog back office that an editor
could actually use: a posts table with search, filters and sorting; a form with
an author picker, tags, a cover image and a slug that writes itself; and a
Bouncer policy that lets authors manage their own posts and nobody else’s.
Every snippet on these pages is copied out of
examples/blog-admin,
the app this repository runs its own end-to-end tests against, and each one
names the file it came from. When a page says “the panel does X”, there is a
test in examples/blog-admin/tests/functional/adonia_tutorial.spec.ts asserting
X against a running server — the last chapter shows you how to run it.
The chapters
| # | Page | What you end up with |
|---|---|---|
| 1 | Install | node ace add @adonia/core, and a panel at /admin |
| 2 | The Post resource | A generated resource, reshaped into a real form |
| 3 | Validation | Server-compiled rules and the inputErrorsBag flow |
| 4 | The index table | Columns, sorting, search and filters |
| 5 | Authorization | A Bouncer policy enforced at every gate |
| 6 | Relations and media | belongsTo author, belongsToMany tags, a cover image |
| 7 | Reactivity | live(), slugify, and fields that appear when they should |
| 8 | Theming and tests | Panel chrome in your brand, and a green test suite |
Follow them in order — each chapter edits the file the previous one left behind. Total time is about an hour, less if you skim.
Before you start
You need an AdonisJS v7 application with Lucid and Inertia + React. If you do not have one:
npm init adonisjs@latest blog-admin -- --kit=inertia --adapter=react --db=sqlite --auth-guard=session
cd blog-adminAdonia needs all four of those:
| Requirement | Why |
|---|---|
| AdonisJS v7 | The provider registers panel routes in boot(), which only v7 allows |
@adonisjs/lucid |
A resource is a Lucid model plus a schema |
@adonisjs/inertia + React 19 |
Panel pages are Inertia pages rendered by @adonia/ui |
| A session guard | Panels sit behind a guard; the packaged login page signs users in through it |
Optional peers you will meet later: @adonisjs/bouncer (chapter 5) and
@adonisjs/drive (chapter 6). Both degrade gracefully — without Bouncer no
policy is ever consulted, and a file field only needs Drive when somebody
uploads something.
The tutorial assumes a Post model with title, subtitle, slug, body,
status, published_at, cover_image, author_id and category_id, plus
Category, Tag and User models and a post_tag pivot. The blog-admin
example ships those migrations; if you are following along in your own app,
create them first with node ace make:model -m.
What this tutorial is not
It is a path, not a reference. Where a chapter shows one way to do something, the reference page for that subsystem shows the rest — resources, schema components, the fields reference, table columns, filters and search, validation, authorization, theming and testing. The action, widget, lens, relation-manager, domain, and locking APIs are covered by those reference guides. Continue with tenancy and nested resources for scoped routing.
Start with Install.