Updates from April 2024

As we enter May, it's a great opportunity to reflect on the recent enhancements and updates made to AdonisJS last month.

Hot Module Replacement (HMR)

In April, we successfully implemented Hot Module Replacement (HMR) in AdonisJS with Hot Hook. HMR allows you to modify the code of your controllers, middleware, or services without needing to restart the entire server, significantly enhancing the developer experience (DX).

You can find more details on this in the article we recently published, which delves deeper into the specifics of this feature. Starter-kits now also include HMR by default. If you are working on an ongoing AdonisJS 6 project, be sure to check out the documentation to learn how to enable it!

• Documentation: https://adonisjs.com/blog/hmr-in-adonisjs

• Article: https://docs.adonisjs.com/guides/hmr

Transmit

We finally released the first 1.0.0 version of Transmit, our opinionated Server-Sent-Events library, designed to make it easy to send real-time updates to your front-end applications.

The documentation is now available and we plan to write an article about it in the coming weeks.

• Documentation: https://docs.adonisjs.com/guides/digging-deeper/transmit

Documentation improvements

Some weeks ago, we opened an issue on the documentation repo to discuss restructuring the docs. Many of you read and shared your ideas. We've incorporated your feedback and have started working on a new structure, that is now available and published.

This revamped structure is more organized and easier to follow, and we've also added some new sections. We also have added pretty OG images for each page :

Let us know what you think about the new structure and if you have any suggestions for further improvements.

• New Documentation: https://docs.adonisjs.com/

env:add command

We've introduced a new command in AdonisJS to help you add environment variables to your .env, .env.example, and start/env.ts files directly from the command line. This saves time from having to open three different files during development whenever you realize a new environment variable is needed.

You can now use the command with the following syntax:

node ace env:add MY_VARIABLE value --type=string

Or just run the command without any arguments to get prompted for the variable name, value, and type.

• Documentation: https://docs.adonisjs.com/guides/references/commands#envadd

InferPageProps in Inertia

We've shipped an utility type in @adonisjs/inertia that makes it easier to share types between your front-end and back-end.

export default class UsersController {
  async index({ inertia }: HttpContext) {
    const users = [
      { id: 1, name: 'John Doe', createdAt: new Date() }
    ]

    return inertia.render('users/index', { users })
  }
}

import type { InferPageProps } from '@adonisjs/inertia'
import type UsersController from '#controllers/users_controller'

function UsersList(
  props: InferPageProps<UsersController, 'index'>
) {
  props.users
  //      ^? { id: number, name: string, createdAt: string }[]
}

This feature should help save time and reduce typing errors in your Inertia applications. Note that the createdAt field is automatically converted to a string in your front-end component type, as Dates are serialized into strings when passed over the wire in JSON. This InferPageProps type performs this serialization at the type level automatically for you.

• Documentation: https://docs.adonisjs.com/guides/inertia#share-types

Published articles

• HMR in AdonisJS
  https://adonisjs.com/blog/hmr-in-adonisjs

In case you missed it

• A new package to manage permissions with ACLs in AdonisJS
  https://github.com/holoyan/adonisjs-permissions

• Meta-framework for building fullstack apps with AdonisJS and Remix.
  https://github.com/jarle/remix-adonisjs

• Package for background jobs based on node-resque
  https://github.com/shiny/adonis-resque

• Edge-Components (UI Kit based on DaisyUI and Alpine.js) updated for AdonisJS 6
  https://github.com/batosai/edge-components

Notable Releases