Node.js Headless CMS Building Blocks

According to the Stack Overflow 2017 Developer Survey, the most loved development framework is React, and the most wanted is Node.js.

Another hot discussion with digital experience developers is the need for a Headless CMS as a shared content service for React and JavaScript applications. Front-end frameworks such as React provide reusable presentation architecture and components implemented in JavaScript. React is ready to render on back-end (server) Node.js runtimes.

A Headless CMS, such as Acquia's Headless Lightning, provides a decoupled content repository to provide content editors a service for storing and governing structure content for any front-end React application. Together Node.js and a Headless CMS, as application services, are the standard back-end building blocks for your digital experience front-end and back-end development teams.

Content API and JSON to Node.js

Headless Lightning uses a Content API and JSON for Node.js applications to interact with the Drupal-managed content store.

Node.js services requests from React, so developers can continue to use JavaScript and JSON to execute content requests. The Content API and JSON can also be used to modify configuration and data models. Using relationships, the API is capable of serving multiple related pieces of content in a single request.

Here are the building blocks:

HTML data sourced from Drupal's content source

The following image shows a React application displaying and utilizing data which originated from API endpoints served from Drupal.

The same data referenced as the original JSON API code

The Drupal Headless Lightning sub-profile exposes the data as multiple JSON API services which are generated by the JSON API module and contributed extras.

The same data being viewed within the React application data store.

The following image shows the React application storing the API data by utilizing the Redux state method within the application.

Learn more about Acquia Cloud Node.js runtime