Introduction

The Views layer of AdonisJS is powered by a homegrown template engine called Edge . Edge is a logical and batteries included template engine for Node.js. It can render any text-based format, whether is HTML, Markdown or plain text files.

We created Edge as an alternative to other existing template engines and address the pain points with them.

Edge vs. Pug

Unlike Pug, we don't re-invent the way you write the HTML. Edge is not even tied to HTML in the first place, and it can render any text-based files.

h1= title
p Written with love by #{author}
p This will be safe: #{theGreat}

<h1> {{ title }} </h1>
<p> Written with love by {{ author }} </p>
<p> This will be safe: {{ theGreat }} </p>

Edge vs. Nunjucks

Unlike Nunjucks, Edge feels like writing JavaScript and not Python. As a result, the Edge has a small learning curve, is quicker to type, and supports all JavaScript expressions.

{% if happy and hungry %}
  I am happy *and* hungry; both are true.
{% endif %}

{{ "true" if foo else "false" }}

@if(happy && hungry)
  I am happy *and* hungry; both are true.
@endif

{{ foo ? "true" : "false" }}

Edge vs. Handlebars

Unlike Handlebars, Edge is not restrictive. For example, you can use any JavaScript expression inside your templates, and we parse them using a spec-compliant JavaScript parser.

Whereas in Handlebars, you have to define custom helpers for every little thing. The story gets even worse when using multiple helpers together.

Handlebars.registerHelper('upperCase', function (aString) {
  return aString.toUpperCase()
})

{{upperCase lastname}}

In comparison to Handlebars, Edge doubles down on native JavaScript capabilities.

{{ lastname.toUpperCase() }}

Setup

Edge comes pre-configured with the web starter template. However, installing and configuring it is also relatively straightforward.

Open the .adonisrc.json file and check if @adonisjs/view is mentioned inside the providers array list. IF NOT, then continue with the following steps:

npm i @adonisjs/view

Run the following ace command to configure the package.

node ace configure @adonisjs/view

# UPDATE: .env { "CACHE_VIEWS = false" }
# UPDATE: .adonisrc.json { providers += "@adonisjs/view" }
# UPDATE: .adonisrc.json { metaFiles += "resources/views/**/*.edge" }

Basic example

Let's begin by creating a route that renders a given template file.

Route.get('/', async ({ view }) => {
  return view.render('home')
})

The next step is to create the home.edge template. You can manually create a file inside the views folder or use the following Ace command to create one.

node ace make:view home

# CREATE: resources/views/home.edge

Let's open the newly created file and paste the following code snippet inside it.

<p> Hello world. You are viewing the {{ request.url() }} page </p>

Make sure to start the development server by running node ace serve --watch and visit http://localhost:3333 to view the contents of the template file.

Views directory

AdonisJS registers the resources/views as the default directory for finding the Edge templates. However, you can register a custom path by modifying the .adonisrc.json file.

After the following change, Edge will find templates inside the ./app/views directory.

{
  "directories": {
    "views": "./app/views"
  }
}

Also, make sure to update the metaFiles array in the same file to tell @adonisjs/assembler to copy the templates when creating the production build.

{
  "metaFiles": [
    {
      "pattern": "resources/views/**/*.edge",
      "pattern": "app/views/**/*.edge",
      "reloadServer": false
    }
  ],  
}

Editor extensions

The syntax highlighting extensions are available for the following editors.

• VsCode
• Sublime Text
• Atom
• Vim

Edit this page on GitHub