Introducing the Acquia Decoupled Starter Kit for React

April 9, 2018
3
Acquia Decoupled Starter Kit for React image

About the Decoupled Starter Kit

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 based on React-Slingshot, 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.

The applications were developed by Jason Enter & Steve Worley as open source projects and are ready to download today!

Why was the Decoupled Starter Kit created?   

The Decoupled Starter Kit was created to help developers kickstart their understanding of the technical benefits of harmonizing modern JavaScript technologies when using Drupal as an API content store. The architectures were intentionally designed to walk developers through common scenarios with modern-day technologies. Each of the examples aim to provide technical guidance and insights into different architectural approaches.  The components are broken out by functionality and the content subjects are targeted according to the purpose. The documentation also focuses on communicating the thought process as various methods were explored.
 

Which Headless Drupal scenarios are addressed?

Perform Drupal CRUD Operations with React applications 
The application 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 illustrates functionality when interacting with GraphQL as a proxy 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 GraphQL 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: JSON API from Drupal, Marvel API web service, and a comic book sales RESTful service.

Understanding Best Practices with API-first Drupal
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.

What technologies are used in the Decoupled Starter Kit?

React
Redux
React Router
GraphQL
Express
Apollo Client for React
GraphQL Tools
Babel
Webpack
Browsersync
Acquia BLT (Build and Launch Tool)
DrupalVM
Headless Lightning
OAuth 2.0 Authorization
Jest
TrackJS
ESLint
PostCSS
...and more

 

Where can I download and get more information?

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.

Open Feedback

We would love to hear your feedback on our features or approaches with the applications, just note in the repository issue queue. There is also current planning for new features in each of the applications, so please let us know what you would like to see and contributions are welcome.

Sign-up for our Developer Blog Newsletter

Thanks!

Add comment