- Published on
React and Drupal 8 with JSON API 1/3
- Christophe Jossart
Most content from this article might still be relevant but some sections can be outdated.
The goal of this serie of posts is to achieve quickly a simple museum Audioguide web app based on a React isomorphic boilerplate with a Drupal 8 backend that uses the latest standards.
The web app will be fully decoupled by being hosted on another domain than the Drupal one.
As a real world case, we want it to be fully multilingual.
This is the first post of a serie of 3. This first one focuses on having a Drupal and React setup that meets our requirements.
The second one defines a MVP that will just fetch the audioguides list and a detail view (GET operation), the last one will then add extra features like getting user feedback (POST operation).
The easiest way to get started with Drupal and Composer is the Composer template for Drupal projects.
Head to your favourite VM / Apache / Nginx and follow the installation.
composer create-project drupal-composer/drupal-project
A complete documentation is available on GitHub.
For the web service, we will use the contrib JSON API module, as a replacement of the core Rest module.
It produces a cleaner output and is an "off of the Drupal island" approach by using a standard.
composer require drupal/jsonapi
To access to the JSON data from another domain (your localhost or the production web app domain), we will use the CORS module for simplicity.
composer require drupal/cors
Note that you can provide this configuration without this module, because it is now in core since Drupal 8.2. However, keeping simplicity in mind, let's go for the UI.
Then we want devel generate to provide some dummy content.
composer require drupal/devel
Enable the 3 modules
drush en jsonapi cors devel devel_generate -y
JSON API comes with zero configuration.
The CORS module can be configured under this page /admin/config/services/cors, just add this wildcard to get started and define the localhost with the port that will be used by the React app during development.
Cache rebuild is needed.
Then generate 20 articles.
drush genc 20 --types=article
Your articles should now be available as a JSON API output under http://yourdrupal.domain/jsonapi/node/article.
You can test the CORS setup and the JSON output via your IDE (e.g. PHPStorm), Postman or Curl.
React Starter Kit setup
Because a requirement is to have fully multilingual support, we will clone the feature/react-intl branch that integrates the Yahoo React-Intl library for internationalization.
Clone it in a separate directory than Drupal.
git clone -b feature/react-intl https://github.com/kriasoft/react-starter-kit.git
Make sure that you have Yarn installed then cd into the cloned directory.
The installation is quite straigthforward and faster than npm.
Start the Node.js server and Browsersync with HMR on top of it.
More documentation on the React Starter Kit getting started section.
And voila ready to code!
See you soon for the next part.
- Drupal.org : JSON API documentation
- DrupalCon Baltimore 2017 : Advanced Web Services with JSON API
- Four Kitchens : API First Drupal 8, React, and You!
- Acquia : Decoupled Drupal with Ember: Introducing Ember and JSON API
- Smashing Magazine : json-api-normalizer: An Easy Way To Integrate The JSON API And Redux