In-Context Preview for Gatsby with Crafter CMS
- SPA, Headless CMS, Progressive Apps, React, Tutorial, GatsbyJS, Static Site Generation, JAMStack, DevContentOps, GraphQL
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:
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.
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!
That said, SSGs have some common issues. The top three are:
Rendering complexity (size, dependencies etc)
Dynamic/transactional behavior support
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.
Crafter CMS provides the missing piece of the puzzle. Crafter CMS is a full-featured, enterprise-grade headless+ CMS with in-context editing, in-context preview, drag-and-drop, workflow and all of the other authoring features that content creators expect. Crafter CMS is a natural fit for Gatsby integration. Crafter CMS 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 Crafter CMS’s GraphQL server and integrated our authoring tool support. Like GatsbyJS, Crafter CMS 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:
Here’s a quick video that shows the installation and basic editing features.
Russ Danner is VP Products at Crafter Software and is responsible for product management, product development and support, and client and partner success. Russ brings over 20 years of software architecture, design, and implementation experience. Prior to Crafter Software, Russ was Web Experience Management Practice Director at Rivet Logic and project lead for the open source Crafter CMS project.