Orluk Photography

Orluk Photography

15 août 2019 | 3 mins de lecture

Explication

MEAN Stack est mort, vive JAM Stack !

Orluk Photography est un projet ambitieux de création d'un blog de A à Z basé sur l'architecture JAM Stack.

JAM Stack, C'est Quoi !?

Selon Mathias Biilmann (PDG et Co-Fondateur @ Netlify), JAM Stack est "une architecture de développement Web moderne basée sur JavaScript côté client, des APIs réutilisables et un balisage prédéfini".

Bon, une fois que vous savez cela, vous devez encore choisir vos outils... Je souhaitais développer ce blog avec React, j'ai donc dû choisir le framework GatsbyJS pour être conforme à l'architecture JAM Stack. Ce framework est vraiment très intéressant ! En effet, il permet de développer un site web performant qui respecte les bonnes pratiques du Web (notamment le référencement) et cela très rapidement (pas de quick-and-dirty). GatsbyJS est basé sur le design pattern PRPL et me permet de faire du PWA. Il repose sur quatre axes :

  • Pousser les ressources critiques pour la route URL initiale ;
  • Rendre l'itinéraire initial ;
  • Pré-cacher les routes restantes ;
  • Lazy-loader et créer des routes restantes à la demande ;

Bon, il reste à gérer les données ! GatbsyJS vous permet d'enrichir votre site web via GraphQL à partir de fichiers markdown, d'API ou d'un CMS. Là encore, j'ai dû faire un choix. Mon client n'étant pas fan du code, je ne me suis pas attardé longtemps à lui proposer l'édition d'articles à partir de fichiers markdown. J'ai donc choisi d'installer un CMS ! Mais lequel choisir... !? En cherchant un peu, j'ai trouvé une perle : Strapi. Strapi est un CMS prêt à l'emploi qui génère des API pour enrichir votre site web, et dans mon cas pour créer, éditer et supprimer des articles. Hop ! En interfaçant ce CMS avec une base de données NoSQL et un serveur web Nginx ; Mon backoffice a été rapidement mis en œuvre et mon client a commencé à le prendre en main.

Résumons : j'ai créé mon blog avec GatsbyJS et l'ai versionné avec GitLab (en dépôt privé, désolé...) ; J'ai monté mon CMS servant de backoffice sur un serveur virtuel et l'ai exposé à mon client via une résolution DNS facile à utiliser. Reste à exposer le front au Web ! Nouveau dilemme... Finalement, je me suis tourné vers Netlify. Ce dernier outil m'a permis en deux ou trois clics de construire mon projet directement depuis GitLab et de l'exposer sur le Web très facilement. Une petite configuration pour le DNS, pour l'ajout de webhooks (me permettant de reconstruire le site lorsque le CMS est mis à jour) et hop (encore) ! Orluk Photography est né !

Note

Avec le recul, Netlify possède son propre CMS (et GatbsyJS a les plugins nécessaires à sa mise en œuvre), j'aurais peut-être dû choisir cette même solution. Mais Strapi est vraiment une petite perle, et je vous invite vivement à faire un tour sur leur site !

Sources