Skip to main content

Decoupled Kit Overview

_Pantheon Front-End Sites

Decoupled Kit is an open source project built by Pantheon. These docs focus on using Decoupled Kit components locally or anywhere.

For more information on Pantheon Front-End Sites, see https://docs.pantheon.io/guides/decoupled/

Sections or documents that are related specifically to Pantheon will include this callout at the top of the section or page.

Decoupled Kit is a collection of utilities for building a decoupled frontend that sources data from a CMS backend. Conceptually, a “Kit” is a combination of a compatible CMS backend and JavaScript frontend. For example, we have kits with WordPress + Gatsby, WordPress + Next.js, and Drupal + Next.js.

At a slightly lower level, Decoupled Kit is a series of CMS starter projects, frontend starter kits, and developer documentation. Let’s take a closer look at each of these focus areas.

Frontend​

decoupled-kit-js Monorepo​

The decoupled-kit-js monorepo is home to all of the open source starter kits and npm packages which provide a starting point for developers who want an out-of-the-box experience for headless WordPress and Drupal powered by modern JavaScript/TypeScript tools.

Starter Kits​

To create a new starter kit locally, use the create-pantheon-decoupled-kit npm package. Follow the prompts to build your desired output. See create-pantheon-decoupled-kit for detailed information

The starters described below represent the output of the base generators, gatsby-wp, next-wp, and next-drupal + next-drupal-umami-addon. These starters include TailwindCSS for styling.

Read on for a brief overview of each starter. Check each starter's README.md for more detailed information.

Gatsby WordPress Starter​

The gatsby-wordpress-starter is a Gatsby app which consumes data from a WordPress backend with the WPGraphQL and WPGatsby plugins, and uses Gatsby as a Static Site Generator.

This starter implements:

Next Drupal Starter​

The next-drupal-starter is a Next.js app which consumes data from Drupal with the JSON:API module, as well as some Drupal modules managed by Pantheon (see Drupal below for more information) and uses Next's Server Side Rendering.

This starter implements:

Next WordPress Starter​

The next-wordpress-starter is a Next.js app which consumes data from a WordPress backend with the WPGraphQL plugin, and uses Next's Server Side Rendering.

This starter implements:

npm Packages​

To help fetch data, set headers, or style markup from the CMS, we have developed a set of open source tools that are published to npm. These tools are used in the starter kits, and can be imported into any project.

Packages can be installed with your node package manager of choice. The following example uses npm to install drupal-kit and nextjs-kit as production dependencies in a node project:

npm i @pantheon-systems/drupal-kit @pantheon-systems/nextjs-kit

Read on for a brief overview of each npm package. Please see the README.md in each package's repo for more detailed information.

cms-kit​

The cms-kit exports utilities used in both drupal-kit and wordpress-kit. Those utilities are re-exported from the CMS specific packages for use in the starters.

drupal-kit​

The drupal-kit utilizes @gdwc/drupal-state, a TypeScript library for fetching and storing data from Drupal's JSON:API. @gdwc/drupal-state lives on https://drupal.org, and is maintained by the Decoupled Kit team along with members of the Drupal community. Please visit https://www.drupal.org/project/drupal_state for more information on DrupalState.

drupal-kit exports a PantheonDrupalState class that utilizes some methods from cms-kit to efficiently fetch and cache data from Drupal on Pantheon.

wordpress-kit​

The wordpress-kit exports a light wrapper around graphql-request which is used to make GraphQL requests to a WordPress instances using the WPGraphQL plugin.

It also exports a tailwindcss plugin which maps WordPress Block Editor styles to tailwindcss classes. Import the plugin into your tailwindcss config to see the Block Editor styles on your content sourced from WordPress.

nextjs-kit​

The nextjs-kit exports shared components used in the Next.js based starter kits, as well as some shared helpers.

Backend​

To facilitate the Frontend Starter Kits, we also maintain WordPress and Drupal projects as starting points for the CMS side of things. These templates are open source and include community and Decoupled Kit managed WordPress plugins and Drupal modules.

Read on for a brief overview of each project. Please see the README.md in each project's repo for more detailed information.

WordPress​

Decoupled WordPress Composer Managed​

Decoupled WordPress Composer Managed is a WordPress template designed to get you started with a headless WordPress instance. It includes a number of both community and Decoupled Kit maintained plugins including WPGraphQL, WPGatsby, and Pantheon Decoupled.

WordPress Pantheon Decoupled​

The WordPress Pantheon Decoupled plugin helps to enable headless WordPress without any extra configuration needed by the user. The required plugins are installed and some sample content is included, like a post with an image and an example menu.

(Pre-Release) WordPress Pantheon Decoupled Preview​

WordPress Pantheon Decoupled Preview enables preview of content on the frontend site with minimal configuration when used with our Next.js WordPress Starter. This plugin is in active development.

Drupal​

Drupal Composer Managed​

Drupal Composer Managed is a Drupal project meant to work with Pantheon's Integrated Composer build process.

Drupal Decoupled Preview​

Drupal Decoupled Preview enables preview of content on the frontend site with minimal configuration when used with our Next.js Drupal Starter.

Decoupled Drupal Tools​

Decoupled Drupal Tools include the pantheon_decoupled module and the pantheon_decoupled and pantheon_decoupled_umami_demo install profiles.