Introducing the Acquia Decoupled Starter Kit for React

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?

• React and GraphQL Github Repository - https://github.com/acquia-pso/decoupledkit-react
• Headless Lightning Drupal Github Repository - https://github.com/acquia-pso/decoupledkit-drupal
• Decoupled Starter Kit for React Documentation - http://decoupledkit-react.readthedocs.io

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.