Views and Templates

AdonisJS is an excellent fit for creating traditional server-rendered applications in Node.js. If you enjoy the simplicity of using a backend template engine that outputs HTML without any overhead of Virtual DOM and build tools, then this guide is for you.

The typical workflow of a server-rendered application in AdonisJS looks as follows.

Choose a template engine to render HTML dynamically.
Use Vite for bundling CSS and frontend JavaScript.
Optionally, you can opt for libraries like HTMX or Unpoly to progressively enhance your application and navigate like an SPA.

Choosing a template engine

The AdonisJS core team has created a framework-agnostic template engine called Edge.js. Following are some of the reasons for using Edge.

Edge is simple, modern, and a batteries-included template engine in the Node.js ecosystem.
It has support for Components with features like slots and context API.
Integration with Iconify to render SVG icons.

AdonisJS does not force you to use Edge, and you can pick any other template engine of your choice, be it Pug, Nunjucks, and so on.

Using Edge

Install and configure Edge using the following command.

Rendering your first template

Once the configuration is completed, you can use Edge to render templates. Let's create a welcome.edge file inside the resources/views directory.

node ace make:view welcome

Open the newly created file and write the following markup inside it.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <h1>
    Hello world from {{ request.url() }} endpoint
  </h1>
</body>
</html>

Finally, let's register a route to render the template.

import router from '@adonisjs/core/services/router'

router.get('/', async ({ view }) => {
  return view.render('welcome')
})

You can also use the router.on.render method to render a template without assigning a callback to the route.

router.on('/').render('welcome')

Configuring Edge

You can use Edge plugins or add global helpers to Edge by creating a preload file inside the start directory.

node ace make:preload view

start/view.ts

import edge from 'edge.js'
import env from '#start/env'
import { edgeIconify } from 'edge-iconify'

/**
 * Register a plugin
 */
edge.use(edgeIconify)

/**
 * Define a global property
 */
edge.global('appUrl', env.get('APP_URL'))

Global helpers