How to add ReactJS in Drupal 8 with Composer

Tue, 08/09/2016 - 07:37 | 1266 Views

Inside the Drupal-verse the usage of Composer in our workflow is getting more and more popular.

To be honest, the immersion of composer in Drupal community hasn't been easy, but changes never are easy.

For the beginning of 2015, a new project sees the light Drupal Composer with the idea of modifying the way we do our development process in Drupal.

Drupal Composer project cover from install Drupal core, modules, themes, dependencies, patches and a long list of etc.

One of the elements that Drupal Composer it's going to replace is the famous *Drush Make*.

As I said the changes are not easy, and mostly everybody in our community is little lost (including me) regarding became familiar with this new way of doing our daily task in your jobs.

For that reason, I want to share with your, how to install ReactJS as a library to be used in our Drupal 8 Projects.

Maybe you could be thinking, well what is the fuss, and we could install ReactJS easily using Bower

But, the problem of use Bower is related with the fact of Bower doesn't know anything about Drupal, Bower doesn't have any idea where libraries in Drupal must be allocated, for that reason isn't the proper tool for our needs.

1. Drupal Installation.

In this example I will assume that did you install Drupal using *Drupal Composer* project, using an instruction similar to the following:

$ composer create-project drupal-composer/drupal-project:8.x-dev some-dir --stability dev --no-interaction

2. Adding repository

The library, ReactJS is not part of composer Packagist, but event that is possible to define a custom repository using ReactJS GitHub repository, adding a new composer repository in your composer.json file

"repositories": [
        {
            "type": "package",
            "package": {
                "version": "15.3.0",
                "name": "drupal-libraries/reactjs",
                "type": "drupal-library",
                "source": {
                    "url": "https://github.com/facebook/react.git",
                    "type": "git",
                    "reference": "15.3.0"
                },
                "dist": {
                    "url": "https://github.com/facebook/react/releases/download/v15.3.0/react-15.3.0.zip",
                    "type": "zip"
                }
            }
        }
    ]

As you can see, we provide the ReactJS information in two formats, the first one is the GitHub repo and the second is a zip file of a specific release, depends of composer options, ReactJS will be clones or just downloaded and extracted. 

3. Adding ReactJS  in your project 

With your new ReactJS repository correctly added in your composer.json file the only remaining task in download the code using the next instructions.

$ composer require drupal-libraries/reactjs 15.3.0
When this command finished we will get inside /web/libraries/reactjs the requires files
libraries
`-- reactjs
    |-- build
    |   |-- react-dom.js
    |   |-- react-dom.min.js
    |   |-- react-dom-server.js
    |   |-- react-dom-server.min.js
    |   |-- react.js
    |   |-- react.min.js
    |   |-- react-with-addons.js
    |   `-- react-with-addons.min.js
    |-- examples
    |   |-- basic
    |   |-- basic-click-counter
    |   |-- basic-commonjs
    |   |-- basic-jsx
    |   |-- basic-jsx-external
    |   |-- basic-jsx-harmony
    |   |-- basic-jsx-precompile
    |   |-- fiber
    |   |-- jquery-bootstrap
    |   |-- jquery-mobile
    |   |-- quadratic
    |   |-- README.md
    |   |-- shared
    |   |-- transitions
    |   `-- webcomponents
    `-- README.md

 

I recommend checking the slides Improving your Drupal 8 development workflow http://weknowinc.com/talks/2016/drupalgov-workflow for more references about how to use Composer in Drupal 8 projects

If you are interested in more tricks and tips related to the new workflow in Drupal 8, stay tuned because Jesus Olivas and I will propose a BOF in DrupalCon Dublin to talk about the subject.