GatsbyJS In-Context Preview and Edit with CrafterCMS

GatsbyJS is a very popular and significant Static Site Generator (SSG) and development framework for Single Page Applications (SPAs) that are built with ReactJS and GraphQL. Developers build their ReactJS code against Gatsby’s internal GraphQL store which can be populated by any number of data sources. There are two major benefits provided by GatsbyJS to React developers an ops (DevOps) teams: 

1. Developers work with the CMS in a headless (API-first) fashion using React and GraphQL. That’s awesome. You don’t really need CMS platform specific skills to be productive.
   

2. The app/website is deployed as static content to web server(s) or Content Distribution Network (CDN) like AWS S3+Cloudfront. This makes content delivery extremely fast, reliable and distributed. These are big wins!

Is SSG New?

Having worked in the content management space for a long time I’ve seen a lot of static site generation technology. In fact, if we go back to the early days, we’ll see that CMS started out with SSG technologies like Interwoven’s XML+Perl based platform. The long story made short on this is: SSG is not new, it’s not a silver bullet and it’s a great architecture for some use cases and a terrible one for others. The lines on this distinction move as technology and frameworks evolve. Modern Javascript frameworks combined with APIs and cheap CDN solutions have made SSG architectures a lot more interesting.

That said, SSGs have some common issues. The top three are:

1. Rendering complexity (size, dependencies etc) 

2. Dynamic/transactional behavior support

3. Authoring tooling 

User-Friendly Content Authoring 

In this blog, I want to focus on the third item: authoring tooling. If you follow our blogs you know that we often talk about DevContentOps. The essence of DevContentOps is that it takes 3 groups “to make a [digital experience] thing go right”, namely content creators, developers and ops. GatsbyJS optimizes for developers and ops.  It’s a development framework that generates deployment artifacts that are drop dead simple to deploy and operate. What about the authors?

Gatsby is the rendering technology. Although Gatsby has a GraphQL-based “repository” abstraction to shield itself from specific store implementations, it’s not a CMS. It works with external headless CMS platforms. Your milage with Gatsby varies depending on the CMS you choose. Here's the thing: most headless CMS platforms don’t provide a good answer for in-context editing and preview. Instead authors get a clunky editing experience with content forms and a lot of waiting for publishing just to see what content will look like when it is finally approved. Ugh.

In order to make Gatsby a truly great static site generator for non-techical content creators it needs a seamless, ui-based, in-context authoring experience and a rich set of publishing tools. Period.

CrafterCMS for Gatsby Apps

CrafterCMS provides the missing piece of the puzzle. CrafterCMS is a full-featured, enterprise-grade headless "plus" CMS with in-context editing, in-context preview, drag-and-drop, workflow and all of the other authoring features that content creators expect. CrafterCMS is a natural fit for Gatsby integration. CrafterCMS is lightweight, headless and provides a native GraphQL server that pairs seamlessly with Gatsby. 

Want to learn more or try it for yourself? I’ve modified an existing Gatsby Starter site called the Lumen Blog to work with CrafterCMS’s GraphQL server and integrated our authoring tool support. Like GatsbyJS, CrafterCMS is 100% open source! Give it a try!

• You can quickly install it from our community marketplace
• Or through the Create Site from Remote Repository using this project:
• https://github.com/russdanner/Gatsby-Starter-Lumen-Blog-for-Crafter-CMS

Here’s a quick video that shows the installation and basic editing features.