A guide to using JAMstack with Contentful

Using JAMstack to build your next app is a good way to ensure that your creation is easily deployable to scalable cloud solutions like Zeit or Netlify. But to make an app truly useful, you need to fill it with good content. This is where Contentful comes into the picture.

Using our APIs to show your content editor’s hard work in your JAMstack app is easy. This article will describe how you can focus on crafting high-quality code, while content editors concentrate on creating content.

JAM stack is short for JavaScript, APIs, and Markup. The term was coined by Mathias Biilmann to describe a modern approach to web development. The architecture is based on client-side JavaScript, reusable APIs, and pre built Markup. And the fact that the stack is JavaScript-based is a great bonus for web developers.

Delivering content is what we do. Much like a traditional CMS — Contentful can deliver content like text and images to web apps. But a fundamental difference between Contentful a CMS systems is that Contentful is API-based from the ground up. In other words — we are Content Infrastructure This means that no matter what kind of content you want your app to display, it can be pulled in via one of Contentful’s specialized APIs.

We currently have four APIs:

1. Content Delivery API
2. Content Preview API
3. Content Management API
4. Images API

1 - The Content Delivery API (CDA), available at cdn.contentful.com, is a read-only API for delivering content from Contentful to apps, websites and other media platforms. The content gets delivered as JSON, images, video or any other file type.

2 - In addition to the Content Delivery API for already published content, the Content Preview API is used for previewing drafts and about-to-be published assets. The Content Preview API has the same behavior and accepts the same parameters as the CDA.

3 - The Content Management API (CMA) helps you manage content in your spaces. To learn more about how to model your content, read our modeling guide.

4 - The Contentful Images API allows for the retrieval and manipulation of image files referenced from assets.

The traditional way for content editors to create editorial content for web apps was to use something like the built-in editor in WordPress or Drupal. As alternatives to these traditional CMSs evolved, we started seeing solutions where content editors had to create content using workflows that sometimes had a steep learning curve.

For example: creating and maintaining content using git might be perfect for developers, but prove too impractical for editors. Another example would be to require content contributors to use YAML files to structure their content.

With Contentful — editors can solely focus on writing great content using our WebApp. A key feature of the WebApp is the instant preview. This gives you a WYSIWYG feel when working on an article. And when the content editor is happy with her latest creation and pushes the publish button, a JAMstack app can quickly grab the content as JSON via an API call and display it in the app.

A key aspect of using Contentful for your JAMstack app is the real separation between content and presentation. This separation allows content editors to publish content without involving developers in the process. Long gone are the days when editors had to rely on developer oriented tools like git, or other version control systems, to submit a new article.

Since everything with Contentful is always just an API call away, developers can spend more time working on how content should be handled and displayed — rather than being involuntarily involved in the content creation and publication process. Having developers and editors focus on what they know best is a time saver.

Contentful delivers content of every imaginable form through API calls. This makes the Contentful platform highly suitable for JAMstack applications. Because as soon as your content editors click the publish button, your JAMstack app can pull that content into your app and show it to the world. This means that editors can ship content independently of developers.

Having that separation between code and content means that both developers and content creators can focus on their respective areas of expertise — with little or no overlap.

If you want to check out some code samples showing you how to incorporate your JAMstack app with Contentful, then read our JAMstack tutorial.

You should also have a look at our “Contentful in five minutes” guide to learn how easy it is to build and deploy your first Contentful-powered app.