A JAMstack-ready CMS

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 or 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 that 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, decreases security risks and it's 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 at some point have to pull in additional data from external sources. 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 the image format for you on the fly and much more.

You can also say that Contentful is a headless CMS, or in this case a headless JAMstack CMS. But unlike traditional CMSs such as Drupal and WordPress, we have built our solution 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 called developer_bookshelf. A space is like a data bucket, or a container, where the information we want is stored.

The HTML

So consider the following HTML code. It does four things:

1. Grab the latest version of the Contentful SDK
2. Create a client that we’ll use to get the data we want
3. Point out the space id
4. Specify our personal access token value (for this demo we use a public access token)

The JavaScript

In turn, the following code will then send a request for a specific entry from the space that we pointed out earlier.

The result

As you can see, the request returns information on Larry Wall’s book An introduction to regular expressions. Which by the way is a great read.

Summary

In just under a minute we managed to put our simple but fully functional JAM stack example together like so:

• Grab the latest version of the Contentful 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
• Get the content of entry id 5PeGS2SoZGSa4GuiQsigQu from the developer_bookshelf space.
• 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 that we won't 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.