Building from the Base Up: Rethinking Starter Kits in AdonisJS
We have recently updated the Hypermedia Starter Kit for AdonisJS v7 . This release includes a set of base components — such as buttons, form fields, avatars, and layouts — along with a simple signup and login system to help you get started quickly.
In this article, we will first look at what's new, then discuss the philosophy behind these changes.
Base Components
Every AdonisJS app needs a handful of consistent building blocks, such as form fields, buttons, and layouts. These are simple elements, but they often take time to set up correctly when starting a new project.
The new starter kit provides unstyled components for these common cases. They focus on structure and semantics, leaving the visual layer entirely up to you.
Here's an example of how the new form components can be composed:
@form({ route: 'session.store', method: 'POST' })
<div>
@field.root({ name: 'email' })
@!field.label({ text: 'Email' })
@!input.control({ type: 'email' })
@!field.error()
@end
</div>
<div>
@field.root({ name: 'password' })
@!field.label({ text: 'Password' })
@!input.control({ type: 'password' })
@!field.error()
@end
</div>
<div>
@!button({ text: 'Login', type: 'submit' })
</div>
@endThere are a few details worth noting:
-
The
@formcomponent accepts both the route name and its parameters as props. This means you no longer need to use theurlForhelper to manually compute route URLs. -
CSRF protection is handled automatically — you don't need to include the token yourself.
-
Form method spoofing is also built in. When you set the method to
PUT,PATCH, orDELETE, the component will handle it internally. -
The
@!field.error()tag automatically reads and displays the validation error for its parent field defined using the@field.rootcomponent.
Login and Signup Flows
The starter kit includes minimal login and signup pages. They are intentionally simple, providing just enough to authenticate users and move forward with the rest of your application.
This approach lets you build the core features of your app first — since most of the app depends on a logged-in user, not a fully polished authentication system.
Security and edge cases can be improved later without blocking progress on the rest of the product.