Acquia Decoupled Drupal Starter Kit for React

starterkit_image.png

Development Insights for Building Front-end Javascript Apps with Decoupled Drupal

The Acquia Decoupled Starter Kit for React provides a complete working environment for demonstrating and prototyping front-end digital experience applications coded in standard Javascript, utilizing decoupled Drupal as a content service.

This starter kit aims to provide technical guidance and insights for both Javascript and Drupal developers and is comprised of three separate applications:

  1. A Headless Lightning Drupal website
  2. A React application
  3. A GraphQL application.

Each of these applications work in tandem to illustrate patterned workflows when developing with each of the interconnected applications.

What’s Included (a more complete list):

  • Headless Lightning as a content storage repository
  • React as a front-end framework
  • Redux for state management
  • GraphQL as a data orchestration layer
  • Node.js as a server-side engine
  • Webpack for module bundling
  • Babel for ES6 compiling
  • Browsersync for hot reloading

Benefits

Perform Drupal CRUD Operations with React applications

The applications demonstrates workflows when interacting directly with JSON API endpoints served from a Headless Lightning Drupal instance. The functional tasks are broken out by traditional CRUD (Create, Read, Update, Delete) operations. This application seeks to understand workflows around interacting with API content.

Orchestrate Drupal JSON API Data with GraphQL

This architecture offers functionality when interacting with GraphQL as an proxy application in which JSON API data originates from Drupal. The code utilizes a Pokemon content type which is served by Drupal via GraphQL. The code and documentation walks the developer through the experience of abstracting and structuring data in GraphQL, and subsequent queries in React.

Synthesize Multiple API Sources in GraphQL for React

This functionality offers workflows when interacting with GraphQL as an orchestration application in which API data is abstracted from several sources. The architecture combines and structures: Drupal JSON API from Drupal, Marvel API web service, and a comic book sales RESTful service.

Implement API-first Architectures Best Practices

The application tackles the challenges of building an API-first architecture. Multiple methods are implemented to address API failover for unavailable web services or inconsistent connections such as the implementation and utilization of mock APIs within the standard development tasks. These techniques are displayed using existing API data from Drupal. Many examples are included with storing and leveraging API data within React, in addition to storing API data back into Drupal.

Let's Get Started...

1. Access the Starter Kit

The open source Decoupled Starter Kit is available on a public GitHub repository and includes the full documentation to download and develop locally.

2. Set Up Local Development

Download the applications locally, then use the instructions in each of the repositories’ homepages to set up. For more information, read the Decoupled Starter Kit for React Documentation.

3. Upload to Acquia Cloud

Each of the applications can be uploaded to an Acquia Cloud Node.js application service or a Drupal application service subscription. The applications provide the necessary Acquia Cloud CD pipelines files for deployment through the hosting subscriptions.

Credit

The React portion of this project was built using the excellent toolset provided in the React Slingshot by Cory House. We have included the primary readme documentation here. Be sure to also review the React Slingshot FAQs, as well as contributors and contributing.

Contact Us

To get access to Acquia Cloud hosting environments, talk to a sales representative by contacting [email protected]. To learn more about how Acquia can support your decoupled Drupal applications, visit the Acquia Developer Center's Decoupled page.


Acquia Decoupled Starter Kit Blog Posts

Introducing the Acquia Decoupled Starter Kit for React

The Professional Services team at Acquia is thrilled to announce the first release of the Acquia Decoupled Starter Kit for React. The Starter Kit includes three separate applications to demonstrate various Headless Drupal design patterns: a React application, a GraphQL application, and a Headless Lightning Drupal website. Each application was created to work in tandem with each other, but also as a collection of boilerplate tools for your personal applications.