Orluk Photography

Cover image

Explanation

MEAN Stack is dead, long live JAM Stack !

Orluk Photography is an ambitious project to create a blog from A to Z based on JAM Stack architecture.

WTF Is JAM Stack !?

According to Mathias Biilmann (CEO & Co-Founder @ Netlify), JAM Stack is "a modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup".

Okay, once you know this, you still have to choose your tools... I wanted to develop this blog with React, so I had to choose the GatsbyJS framework to comply with the JAM Stack architecture. This framework is really very interesting ! Indeed, it allows to develop a powerful website that respects the best practices of the Web (including SEO) and that very quickly (not quick-and-dirty). GatsbyJS is based on the PRPL design pattern and allows me to do PWA. It's based on four axes :

  • Push critical resources for the initial URL route ;
  • Render initial route ;
  • Pre-cache remaining routes ;
  • Lazy-load and create remaining routes on demand ;

Okay, it remains to manage the data ! GatbsyJS allows you to enrich your website via GraphQL from markdown files, APIs or a CMS. Here again, I had to make a choice. My client is not a fan of the code, I did not linger long to offer him the edition of article from markdown files. So I started on the idea of ​​CMS ! But which one to choose... !? Looking a little, I found a pearl : Strapi. Strapi is a ready-to-use CMS that generates APIs to enrich your website, and in my case for creating, editing and deleting articles. Hop ! By interfacing this CMS with a NoSQL database and a Nginx web server ; My backoffice was quickly in place and my client started to take it in hand.

Let's summarize : I created my blog with GatsbyJS and versioned it with GitLab (in private repository, sorry...) ; I mounted my CMS serving as backoffice on a virtual server and exposed this to my client through a user-friendly DNS resolution. It remains to expose the front to the Web ! New dilemma... Finally, I turned to Netlify. This last tool allowed me in two or three clicks to build my project directly from GitLab and expose it on the Web very easily. A little configuration for the DNS, for the addition of webhooks (allowing me to rebuild the site when the CMS is updated) and hop (again) ! Orluk Photography is alive !

Note

In hindsight, Netlify owns its own CMS (and GatbsyJS has the plugins necessary for its implementation), I may have had to choose that same solution. But Strapi is really a little pearl, and I urge you to have a look at their site !

Sources