Introduction

Learn about Pantheon's decoupled architecture using Front-End Sites

Contributors: Brian Perry, Coby Sher, Cyrus Kia.

Discuss in our Forum Discuss in Slack

 Early Access

Pantheon Front-End Sites are available for Early Access participants. Features for Pantheon Front-End Sites are in active development. Pantheon's development team is rolling out new functionality often while this product is in Early Access. To learn how you can enroll in our Early Access program, visit https://pantheon.io/features/decoupled-cms. Please review Pantheon's Software Evaluation Licensing Terms for more information about access to our software.

What is a Decoupled Site?

Decoupled sites separate the frontend and backend into distinct entities. This allows developers to separate backend functionality and databases from the front-end Markup and JavaScript content.

A traditional content management system (CMS) like Drupal or WordPress is hosted and served with the website every time a request for a page is made. With a traditional CMS the backend and frontend are bundled into a single application.

Decoupling is the process of separating the content system or services. By decoupling the services needed to operate a site, each component can become easier to independently work on, minimizing site interruptions and failures, and providing a more efficient and smoother WebOps experience.

Decoupled Architecture is a site architecture that combines the speed and agility of static sites with the editing ease of standard-model content management systems. Web teams can use tools and frameworks tailored to their areas of expertise. For example, Frontend Developers can use modern JavaScript-centric frameworks and libraries rather than the theming systems of older, monolithic systems like WordPress and Drupal.

What is a Front-End Site?

Pantheon Front-End Sites provide users with tools that improve the experience of building a decoupled frontend that sources data from a CMS backend.

With decoupled sites, a CMS site can be linked to a single decoupled site, multiple sites, or the user does not need a CMS at all and can link directly to a frontend application.

A Front-End Site allows you to connect to your Git repository and deploy a site with Gatsby, Next.js, or no CMS at all. When creating a new decoupled site, you can choose from select CMS backends and JavaScript frontends as a starting point, or start with a clean set up and connect your site account to an existing repository.

Decoupled Terminology

Site Options

With a Pantheon Front-End Site you can create sites from server-side rendering (SSR) or a static site generator (SSG). The following options exist for site creation using the Pantheon Front-End Site Early Access offering:

  • Import Repository: Connect your Git provider and select an existing repository. The CMS is optional for this configuration. Limited support is provided for this configuration.
  • Gatsby and WordPress: Create a decoupled site using a base Gatsby.js frontend template with WordPress as the CMS.
  • Next.js and Drupal: Create a decoupled site using a base Next.js frontend template with Drupal as the CMS.
  • Next.js and WordPress: Create a decoupled site using a base Next.js frontend template with WordPress as the CMS.

Currently, Pantheon Front-End Sites do not support SSR using Gatsby. Support for SSG with Next.js is available.

Other permutations for site development using a Front-End Site can be used, but are not supported and currently not recommended.

Create a Decoupled Site with Pantheon

You can build a decoupled site on Pantheon using several methods. The decoupled option must be enabled you can apply your own configuration or use a Pantheon developed start kit. The following workflows apply when starting your decoupled journey.

  • Without a Starter Kit (No Backend Configuration)
    1. Import a GitHub repository.
    2. Configure the frontend application.
    3. Connect to the Node.js frontend application.
    4. Push changes to trigger a site build.
  • Using a Starter Kit (With Backend Configuration)
    1. Configure the backend.
    2. Use the kit package to connect the backend to the frontend.
    3. Configure the frontend application.
    4. Connect repository to the Node.js frontend application.
    5. Push changes to trigger a site build.

Pantheon Front-End Site Starter Kits

Pantheon offers recommended decoupled starter kit templates that are preconfigured, and include the following:

  • A set of recommended modules or plugins for creating decoupled sites on Pantheon.

  • An example content integration showing content from your CMS backend rendered in your frontend application.

  • A live preview of content from your CMS backend rendered in your frontend application.

  • A development environment that supports communication between backend and frontend services.

See Also