JavaScript CMS

Introduction

Legacy CMSes, step aside. There’s a good reason headless content management systems and content platforms are becoming increasingly popular among front-end developers. These content solutions decouple content and design, shipping stronger, more scalable websites and apps at impressive speeds. This decoupling also enables developers to build with the programming language and framework of their choice.In this article, we highlight what makes a headless CMS a great match for any JavaScript developer. We also throw in some resources to help streamline your first build with JS and Contentful.

The benefits of headless, API-first content solutions

In the past, the digital world was desktop-centric and content was hard content coded into each web page. This offered little flexibility in content reuse and design. While traditional CMSes like Wordpress or Drupal have become increasingly rich in comparison to their earliest versions (in large part due to plugins), their functionality remains the same — somewhat limited. Content and code are still combined in page-centric frameworks, making it difficult to adapt them for new, mainstay, and emerging digital channels including web apps, mobile apps, wearables, email, social media, AR/VR, and more.Headless CMSes take a different approach to content. Instead of tightly marrying content to a web page or app, headless CMSes provide greater flexibility for where and how you deliver your content. They decouple the back end (i.e., the content repository or “body”) from the front end (i.e., the presentation layer or “head”).With a headless CMS, you can use a single system to manage all of your content, no matter its final digital destination. Once ready for delivery, each piece of content is pulled into its endpoint via application programming interfaces (APIs). This process doesn’t change the original content but instead, streamlines content management workflows while simultaneously multiplying the reach of each piece of content.In short, headless CMSes empower you to use content more efficiently across your digital real estate — each piece of content works harder and reaches further. API-first systems, like headless CMSes are easier to use, more flexible and more adaptable than their monolithic counterparts. In modern times, they’re essential tools for delivering great omnichannel experiences.

Using Contentful as your JavaScript CMS platform

Contentful separates your content from code and is language and framework agnostic, catering to developers, whether their preference is JS or another language. As well as supporting JS-based front-end frameworks and technologies such as Angular, React, and Vue, developers can build on Contentful with pure JavaScript, should they choose to do so.One of the best things about Contentful is that it easily supports personal projects. Our Free plan gives you everything you need to make your project a success. The plan includes 25 different content types and allows you to create up to 25,000 records with two locales and three environments. It even lets you make up to 1 million API calls each month.Ready to roll up your sleeves and start building with JavaScript and Contentful? Check out our step-by-step tutorial — which comes in text and video. You can follow along with Contentful Developer Advocate Harshil Agrawal as he builds and deploys a simple cookbook app using Contentful and JavaScript, which he then deploys to Heroku.The entire process can be broken into six easy steps:

1. Clone the Github repository.

2. Sign up to Contentful and set up the content model.

3. Run the development server.

4. Push to GitHub.

5. Create a Heroku account.

6. Deploy to Heroku.

Sign up for a free Contentful account and start building with Javascript in minutes.

JavaScript example apps to start building with Contentful

Because the tutorial is for a cookbook web application and not everyone is a foodie, we’ve included other JavaScript example apps in our Developer Portal. Each one shows you how to start a JavaScript and Contentful project with example spaces. These example apps are a great way to start building with Contentful for any use case.The Node.js example app covers the basics of how to use Contentful as the CMS for open-source Node.js. It demonstrates how decoupling content from its presentation enables greater flexibility and facilitates shipping higher quality software quickly.The JavaScript product catalog example project shows you how to build a front-end JavaScript-based application with Contentful serving as the product catalog. There’s also an example app for building a photo gallery and one that demonstrates our File Upload API. You can try all of these examples apps for free and and view their project repos on Github.

Access Contentful APIs with JavaScript SDK client libraries

To make developing applications even easier when building with JavaScript, we’ve published JavaScript SDK client libraries. These offer a starting point for JS developers, providing access to our APIs and their features.The Content Delivery API client library interacts with the Content Delivery API, a read-only API for retrieving content from Contentful. All content, both JSON and binary, is fetched from the server closest to a user's location via our global CDN.

The Content Management API client library interacts with the Content Management API, and allows you to create, edit, manage, and publish content. The API also offers tools for managing editorial teams and collaborating.These SDKs are universal and simple to configure. They’re designed to work with a Node environment and in browsers.

• Content retrieval through our Content Delivery API and Content Preview API.

• Content management and retrieval through our Content Management API.

• Synchronization via the Sync API, which allows you to keep a local copy of all content in a space up-to-date via delta updates, or content that's changed.

• Localization support through locales. Locales are language-region pairings, which can be customized to fit specific business needs.

• Link resolution. Links are a powerful way to model relationships between content. You can use a URI query parameter with search to retrieve an entire chain of related content and display it in your application.

Additional resources to inform Contentful builds

If you have further questions about using JavaScript with Contentful, we’re happy to answer them. You can get in touch with us and other Contentful users via the Contentful Community Slack.

And remember, because Contentful is language and framework agnostic, it works with more than just JavaScript. To support any and all preferred languages, we’ve built out a library of quick start guides, videos, and templates for other languages and toolkits. Check out our quick start tutorials for Gatsby, GraphQL, Jamstack, or Next.js and break ground on your next build today.If you’re looking for resources that offer more engagement, we recommend our Developer Learning Path in the Contentful Learning Center. To learn more about the course and content featured in this pathway, check out the pathway overview. If you’re feeling confident, feel free to skip the overview and dive right into the course instead.