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 !?
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 !
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 !
The PRPL Pattern: Pattern for structuring and serving Progressive Web Apps
GatsbyJS: Fast in every way that matters
Netlify: One workflow ; from local development, to global deployment
Strapi: The open source Headless CMS Front-End Developers love