Utiliser des chemins de fichiers Twig absolus avec Fastify

Fastify est un framework web basé sur Node.js, inspiré d’Express, qui offre une excellente expérience de développement grâce à son architecture de plugins.

Ayant longtemps travaillé avec Express, j’utilise désormais Fastify exclusivement pour le développement d’API ou d’applications web lorsque JavaScript est la solution la plus adaptée au projet.

Dans le cas du développement d’une application web avec rendu de templates, je privilégie Twig, mon moteur de templating préféré. J’ai acquis une solide expérience avec ce moteur, notamment grâce à son utilisation dans Drupal et WordPress (via Timber).

Utiliser Twig avec Fastify

Pour utiliser Twig avec Fastify, il suffit de créer un plugin comme celui-ci :

import path from 'path';

import FastifyPlugin from 'fastify-plugin';
import FastifyView from '@fastify/view';

import twig from 'twig';

// À modifier selon votre structure de fichiers
const viewsFolder = path.join(__dirname, '../views');

const plugin = FastifyPlugin(async (fastify, options) => {
  fastify.register(FastifyView, {
    engine: { twig },
    root: viewsFolder,
  });
});

export default plugin;

Il ne reste plus qu'à ajouter ce plugin à Fastify via fastify.register ou en utilisant le module @fastify/autoload. Une fois configuré, vous pouvez rendre des templates Twig avec reply.view(<chemin_vers_votre_template>).

Le problème des chemins relatifs

Si, comme moi, vous êtes habitué à utiliser Twig dans des environnements où il est intégré nativement, vous remarquerez peut-être un petit inconvénient avec cette implémentation : lors de l’inclusion ou de l’héritage de templates, les chemins doivent être déclarés relativement au fichier courant.

{# Fonctionne #}
{% extends '../../layouts/base.twig' %}

{# Ne fonctionne pas #}
{% extends 'layouts/base.twig' %}

Ajouter un chemin de base au moteur Twig

Pour permettre l’utilisation de chemins absolus, il est possible de surcharger la fonction twig exportée par le module Twig, en ajoutant simplement un paramètre base pointant vers le répertoire de templates.

Voici comment intégrer ce changement dans notre plugin :

import path from 'path';

import FastifyPlugin from 'fastify-plugin';
import FastifyView from '@fastify/view';

import twig from 'twig';

// À modifier selon votre structure de fichiers
const viewsFolder = path.join(__dirname, '../views');

// Surcharge de la fonction twig pour inclure un chemin de base
const originalTwig = twig.twig;
twig.twig = (params: twig.Parameters) => {
  return originalTwig({ ...params, base: viewsFolder });
};

const plugin = FastifyPlugin(async (fastify, options) => {
  fastify.register(FastifyView, {
    engine: { twig },
    root: viewsFolder,
  });
});

export default plugin;