Colorfield logo

Drupalicious

Published on

React and Drupal 8 with JSON API 1/3

Authors
Drupal 8 and React logos

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).

Audioguide wireframe

Drupal setup

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.

*|http://localhost:3001

Cache rebuild is needed.

drush cr

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

The React Starter Kit isomorphic boilerplate will be used to speed up the process and avoid Javascript fatigue. It comes with wonderful documentation, is built on top of Node.js, Express, GraphQL and React, plus contains web development tools such as Webpack, Babel and Browsersync.

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.

yarn install

Start the Node.js server and Browsersync with HMR on top of it.

yarn start

More documentation on the React Starter Kit getting started section.

And voila ready to code!
See you soon for the next part.

Resources