Nicolas Leport - Blog personnel
Il ne peut plus rien nous arriver d'affreux maintenant
– Red is dead, La cité de la peur
  Temps de lecture estimé : 4 min
Application Isomorphique avec Nuxt.js et Directus : Intro

Application Isomorphique avec Nuxt.js et Directus : Intro

Dans cette série d'articles nous verrons comment mettre en place une stack moderne et performante grâce à un CMS headless et une SPA afin de créer un site web ou un blog. Pour cette première partie nous ferons un état des lieux de la stack utilisée, des contraintes, des avantages et des inconvénients et des liens vers les docs des différents outils afin de pouvoir entamer la suite en toute tranquillité.

Introduction

Le but de l'application ici est de proposer un blog léger, SEO friendly, propre et facilement déployable. Je pars sur l'exemple du blog car c'est ce que j'ai fais mais vous pouvez aisément adapter les différents morceaux de code pour créer un site simple. Je vous indiquerai lorsqu'il y a possibilité de rendre le code plus générique.

Ici nous utiliserons un CMS headless sur lequel nous pourrons administrer pages et articles et qui fournira le contenu via une API REST. Celle ci sera utilisée par notre site pour les afficher de manière dynamique. Nous hébergerons le tout sur un VPS, avec paramétrage du nom de domaine, du HTTPS et tout ce qui va avec !

Sounds good

Stack utilisée

Nous allons commencer par lister toutes les dépendances utiles et pourquoi elles ont été choisies.

Côté site

  • nuxt : partie essentielle du projet, elle contient toute la logique d'affichage et permet le rendu côté serveur et client. La particularité de notre projet est d'être un projet isomorphique nous avons donc besoin de librairies qui fonctionnent aussi bien côté client que côté serveur. C'est pourquoi nous privilégierons toujours les packages officiels nuxt.

    • @nuxtjs/axios : pour la récupération des données de notre API et l'affichage des informations sur nos pages. Package spécial pour l'intégration de axios dans nuxt.
    • @nuxtjs/feed : pour générer un fichier feed.xml dynamiquement permettant aux lecteurs RSS d'avoir notre contenu.
    • @nuxtjs/google-analytics : comme son nom l'indique, permet d'utiliser analytics sur notre site.
    • @nuxtjs/markdownit : notre contenu étant écrit en markdown sur notre CMS, nous avons besoin d'un parser pour l'afficher correctement.
    • @nuxtjs/moment : pour gérer les formats de date en fonction de la langue utilisée. Le plugin permet aussi de faire du tree-shaking sur les langues non utilisées et ne charger que la ou les langues paramétrées.
    • @nuxtjs/recaptcha : pour l'intégration du Google Recaptcha v3 sur notre formulaire de contact (ou tout autre formulaire). À noter : il est plus sur d'effectuer également une vérification côté serveur.
    • @nuxtjs/sitemap : génération dynamique d'un fichier sitemap.xml pour notre site.
  • cheerio : un genre de jQuery pour parser le HTML de notre CMS côté client et serveur afin de créer un sommaire dynamique en fonction de la hiérarchie des titres de la page.
  • firebase : afin de rendre fonctionnel le formulaire de contact et pouvoir s'envoyer un email lorsqu'une demande est faite. Cette partie est optionnelle et nous verrons comment utiliser nodemailer directement pour envoyer le mail, sans firebase.
  • highlight.js : pour la coloration syntaxique de notre code côté client.
  • striptags : pour supprimer tout le HTML de notre contenu une fois passer dans la moulinette markdown. Nous utiliserons ce plugin afin de calculer le temps de lecture des pages en fonction de la quantité de contenu.
  • vue-cookie-law : pour la petite popin d'information sur l'utilisation des cookies.

Côté administration du site

Pour le côté serveur et administration nous utiliserons :

  • directus : un CMS headless écrit en PHP qui nous permettra de gérer notre contenu de façon plus sympathique.

J'aurai préféré un CMS écrit en JS, mais je n'en avais pas encore trop testé/trouvé au commencement du projet. Entre temps j'ai découvert Strapi et ne manquerai pas de vous faire un retour dessus.

Avantages et inconvénients

Le côté isomorphique est une contrainte, un avantage mais aussi un inconvénient. En effet, le code devant tourner y compris côté serveur, nous ne pouvons pas manipuler le DOM de manière classique il nous faudra utiliser des plugins (ici Cheerio par exemple). Cela oblige donc à regarder si un plugin spécifique qui fait ce qu'on veut faire a déjà été développé par un confrère pour la librairie Nuxt, et, coup de chance, ils sont nombreux (confrères et plugins).

Le gros avantage de cette stack est un code propre et facile a comprendre. Le rendu côté serveur nous permet d'avoir un site très SEO friendly. Mais le plus gros avantage de Nuxt c'est bien évidemment sa communauté de passionnés : vous trouverez je pense tout ce qu'il vous faut dans les plugins Nuxt (voir la liste de ceux utilisés sur ce projet).

Dans la prochaine partie nous commencerons a développer et a créér tout ça from scratch.

Sommaire