A JAMstack-ready CMS

JAMing with Contentful to bake the perfect stack

JamStack

Table of Contents

Why JAMstack?

JAMstack stands for JavaScript, APIs, and Markup. The term was coined by Mathias Biilmann to describe a modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup.

The static nature of a JAMstack app makes scaling easy, and causes little to no dev-ops overhead. The JAMstack approach can also improve your app's security posture since static sites generally have a small attack vector.

Another benefit is a lot of functionality that was traditionally processed in the back-end, now takes place in the user's browser. And the fact that the stack is JavaScript-based is a great bonus for web developers.

A JAMstack example

Picture a CMS-based solution. For every visitor, the web app would have to generate a number of backend database queries to gather the information needed to generate a web page and send it back to the user.

With a JAMstack app, you serve generated HTML instead of rendering documents live on the server. This ensures faster loading times, reduces security risks and is a solution that is easy to integrate with a CDN.

But the real beauty of the JAMstack approach is perhaps how easy it is to pull in content from third-party APIs. Because no matter how well-crafted your pre-generated pages are, you will probably have to pull in additional data from external sources at some point. And this is where Contentful comes into the picture.

What is Contentful and what can we do for your JAMstack apps?

Contentful is all about content and APIs. We have designed a rock-solid CDN to make sure that your apps can always send an API call our way—and we’ll send you your content back in a flash.

Our platform is closely tied to JSON. This means that we’ll provide you with a future-proof and familiar format for any imaginable type of content. But what if my content also has images? No worries, we have a reliable Images API to take care of that. Our Images API can not only deliver images, it can also manipulate, crop and change formats of images for you on-the-fly and much more.

You can also say that Contentful is a Content Infrastructure, or in this case, content infrastructure for your JAMstack app. And unlike traditional CMSs such as Drupal and WordPress, our solution has been built with RESTful API architecture since the start.

Worth keeping in mind is that we have SDKs for all the major programming languages, which greatly simplifies building projects with Contentful.

Connecting your JAMstack app to Contentful in one minute

In this example, we'll be hooking up our JAMstack to a predefined space. With Contentful, a space is like a data bucket or container where the information we want is stored.

The HTML

All we define at this stage is a container for our content.

The JavaScript

Then we specify the space we want to grab data from, together with our personal read-only access token:

The result

As you can see, the request returns information on the various products in the example space:

Summary

In just under a minute, we've managed to put our simple but fully functional JAMstack example together with just a few simple steps:

  • Utilize the Contentful JavaScript SDK
  • Create a client that we’ll use to get the data we want
  • Point out the space id
  • Specify our personal access token value
  • Grab the content from Contentful via an API call
  • Print the returned result

What’s next

Now is a good time to sign-up for your free personal Contentful account. Don't worry, it only takes a minute and we promise to not spam you.

Furthermore, we have put together what we call the Contentful-in-five-minutes guide. It's a Node.js project that you can use as a base to statically generate HTML and deploy it to the cloud. By working your way through the guide, you will not only learn more about how easy Contentful is to use, but also how our platform works under the hood.

In the blink of an eye, we managed to make an API call to Contentful and get content back as JSON. Fast and simple. But we have barely scratched the surface of what Contentful is capable of. A way for you to move forward would be to head over to the Node.js demo and get your hands dirty with some server-side coding.

Also, we have a treasure chest of information for developers over at the Developer Center.

If you want to learn more about the idea behind JAMstack, we suggest you check out jamstack.org, and watch this presentation by Mathias Biilmann himself.

Discover Contentful

Learn how Contentful works

Read about our content management infrastructure, our flexible APIs and our global CDN.
View key features

See how our customers use Contentful

From apps and sites to digital signage and iBeacon campaigns — we deliver content everywhere.
Explore other customers