Jan 18 2019
Jan 18

By Eduardo GarcíaCTO | January 18, 2019

By Eduardo GarcíaCTO | January 18, 2019

Last month I attended my second Drupal South in Canberra, the capital of Australia. Yep! the capital is Canberra, not Sydney.

In my first Drupal South in 2016 I was invited to present a keynote. I also did a Drupal 8 training and a regular session.

This time my experience was completely different, since I am a local resident in Australia now. I had the opportunity of presenting too, and enjoyed the conference from a different perspective.  I definitely learned a lot from Australian colleagues whom now I can call my peers (plus, this time I get to understand the local jokes). Finding someone who knows Drupal in Australia is not that easy, and even more difficult in Tasmania. Events like this help train developers interested in adopting this technology.

What I Shared during Drupal South

The last few months in our company (weKnow) we have been working in projects involving what I call “Offline Headless Drupal”, where we use Gatsby to create a React Application using Drupal 8 as the source of content.

My session was “How to keep Drupal relevant in the API-driven and git-based CMS era”.

In this architecture, Gatsby blends all content into React and puts it into a CDN, which not only improves UX and accelerates performance but also serves as the starting point for new integrations with modern tools of third-party providers.

You can see my session slides here.

What caught my eye

This year I was very interested in sessions related to GovCMS. Here are a few I enjoyed:

GovCMS distribution and platform hosting is getting to the next level, especially with thei latest updates in their infrastructure and the incorporation of Drupal 8 to the distro.

The future looks brilliant for Drupal in Australian Government and the number of Drupal sites in the next 24 months will increase significantly without a doubt. The new version supports Drupal 8 which has more features that make it possible to make better sites. Perhaps the biggest challenge for the community at this moment is to be able to find the talent to work on those new projects.

Hosting more events like this will definitely help local Australians with valuable training that will enable them to participate in projects both in Australia and overseas. Remote work is a solution that can benefit programmers all over the world, and we could take great advantage from it too.

Things are going south!


In Australia, this expression doesn’t necessarily have a negative connotation; after all, we are in the extreme south!

If you thought we could not go further down; yes we can and we will. I’m glad to be part of the team that will be hosting Drupal South 2019 in Hobart, Tasmania, the place that I call home nowadays.

We will put in all the effort to organize the best event we can. Come and enjoy Drupal, walk through the fantastic trails that Tasmania has to offer, and of course don’t miss the opportunity to meet the Iconic Tasmanian devil! See you there!

Jan 22 2018
Jan 22

Despite being on the market for over a decade, to many, MongoDB still carries a mythical tone with a hint of ‘wizardry’.

The popular misconception is that MongoDB is only suitable for hip startups and former startups that are still considered ‘hip’ and out of the box, such as AirBnB.

Even with all the buzz and talk around MongoDB, the adoption rate remains relatively low in comparison with other ‘standard’ relational database technologies. Not many seem to understand that to be successful in the world of code you must approach everything new with an open mind.

Besides bearing an open mind, you need to incorporate an avenue to test and learn new technologies and tools. Personally, I choose to learn how to use new tools by trying to accomplish routine tasks.

In this blog I’ll explain to backup and restore data between different MongoDB environments. A simple yet critical task that we to do all too often.

Basic tools for MongoDB backup and restore

First things first, we need to include the CLI tools needed to access and operate our mongo databases. These tools are usually available in the same package that contains the mongo CLI client.

Installation on Mac is a piece of cake using [brew] using the following command.

$ brew install mongodb

If you are looking a more intuitive interface to interact with your Mongo Databases, I recommend using RoboMongo (even though it doesn't include backup features).

Connecting to the Database

Local database

As with any regular database, to connect, you need the server, port and database name (when using local setup). If you are connecting to a remote database, you need to provide a username, password, and authentication mode.

For example, to connect to a database named meteor inside your localhost, and running in port 3001, you would use the following command*.

$ mongo

*The client shell version and server versions don’t necessarily have to match. You can also see the warning generated in the image below.

Remote database

As previously mentioned connecting to a remote MongoDB database, requires more information, in this example, I'll use the server Mongo Cloud Atlas.

In addition, to being a None-SQL database, MongoDB is also a distributed database that automatically implements the replication concept, this is an incredibly significant feature. I still have nightmares from the first time I tried to implement that in MySQL.

To connect to the remote server, you need to provide the information of all replicas or nodes, as you can see in the following command.

$ mongo "mongodb://cluster0-shard-00-00-XXX.mongodb.net:27017,cluster0-shard-00-01-XXX.mongodb.net:27017,cluster0-shard-00-02-XXX.mongodb.net:27017/test?replicaSet=Cluster0-shard-0" --authenticationDatabase admin --ssl --username MYSUPERUSER --password MYSUPERPASS

In this case, MongoDB Cloud atlas utilizes different methods of authentication; the default method is using an internal database for users. Also, the method of connection we’ll use is SSL, it’s important to try to keep our information secure.

If everything went as expected, you now have access to a regular command line, and you can execute queries as usual as you do with your local database.


Backing up your Mongo database

To backup our database local or remote we’ll use the program mongodump

Local Database

Depending on your connection the order and format may differ a little, but the output folder containing your backup should be the same

$ mongodump --host -d meteor --port 3201 --out ~/Downloads/

After a successful execution, inside the output folder, a new folder with the name of the database will be created, in this example a ‘meteor’ folder.

Inside the folder, you will find two files per collection in database. One file with extension json which will contain your collection’s metadata about the structure and definitions, and another with extension bson, where b stands for binary which is where the data is stored.

Remote Database

mongodump --host cluster0-shard-00-00-XXX.mongodb.net --port 27017 -d MYDATABASE --username MYSUPERUSER --password MYSUPERPASS --authenticationDatabase admin --ssl --out ~/Downloads/

Just as we had done earlier in the connection step, we provide username, password and authentication method, ensuring that we use SSL for our connection.

We also provide the database we want to backup, in this case only one node is required, because in theory all of them are sync.

Restoring your Mongo Database.

To import our backup we will use the program **mongorestore**

Local Database

This command follows the same rules of mongodump, below you could find an example

$ mongorestore --host -d meteor ~/Downloads/meteor/

If we want to import only one specific collection, we just need to include the extra information for the particular collection as you can see below.

$ mongorestore --host -d meteor --collection mycollection ~/Downloads/meteor/mycollection.bson

Remote Database

Here again we need to provide all node replicas, check the following example

$ mongorestore --host "Cluster0-shard-0/cluster0-shard-00-00-XXX.mongodb.net:27017,cluster0-shard-00-01-XXX.mongodb.net:27017,cluster0-shard-00-02-XXX.mongodb.net:27017" -d MYDATABASE -u MYSUPERUSER -p 'MYSUPERPASS' --authenticationDatabase admin --nsExclude 'admin.system.users' --nsExclude 'admin.system.roles' --ssl ~/Downloads/meteor

You can clearly see that the fundamentals are not that far removed from any backup and restore in a SQL based DB. I hope this guide eliminates an excuse that has been holding you back from dipping your toes in MongoDB.

Happy NO-SQL queries!

Nov 16 2017
Nov 16

By Eduardo GarcíaCTO | November 16, 2017

By Eduardo GarcíaCTO | November 16, 2017

Before the existence of the Drupal Console as a project, it all began with an idea to make Drupal 8 better. Every great invention/innovation begins with an idea, and the Drupal transition from 7 to 8 came with massive changes to the fundamental operating procedures of yesterday. Symfony components were making a splash into Drupal Core.

Jesus and David, the initiators of Drupal Console project, came up with the idea of including the symfony console into the Drupal core. The same way that other symfony components were being included into the Drupal core.

People Working

Powering Though Frustration

As helpful as the Drupal Console project is nowadays, it wasn’t very widely accepted into the drupal community initially. In fact, it turned out to be a huge challenge to get anyone to listen to the idea. For Jesus and David, the primary objective to include the Symfony Console in Drupal was to have the option to have code generators, in the same way, the Symfony community does. Who wouldn’t want that? A way to automate the annoying redundancies that plague developers everywhere. So they decided to propose the idea to the Drupal core maintainers via the issue queue. That idea was however quickly dismissed.

After few attempts to request the inclusion and trying to collaborate into different drupal projects, it dawned on Jesus and David that inclusion and collaboration was not going to happen. They needed to regroup and find a better approach.

While at lunch at Drupalcamp Costa Rica, Jesus and David were casually discussing the frustrations they had encountered trying to bring innovation to Drupal and related projects, and Larry Garfield chimed in “someone needs to create a separate project that includes Symfony Console and code generation”. That sentence gave birth to the Drupal Console project as you know it today.

someone needs to create a separate project that includes Symfony Console and code generation.

Building A Community

Jesus stacked up his calendar with almost every Drupal event in the U.S. The goal was to talk about the project in sessions at all Drupal community gatherings he could physically attend, or at minimum, present the idea at BOFs where sessions were not possible. The code sprints helped him interact with developers and users forming a critical source of feedback.

Along the way, he convinced me to join the project as a maintainer. I also embarked on his outreach campaign to help spread the word. Only, my campaign was global because it was important to reach non-english speakers because they often feel left out of major open source projects. Currently, the Drupal Console project is available, with some variations, in the 18 languages listed below.

  • English

  • Spanish

  • Catalán

  • French

  • Korean

  • Hindi

  • Hungarian

  • Indonesian

  • Japanese

  • Marathi

  • Punjabi

  • Brazilian Portuguese

  • Romanian

  • Russian

  • Tagalog

  • Vietnamese

  • Chinese Simplified

  • Chinese Traditional

One Million Downloads! 

After four years of development in July 2017, we reached our first million downloads across different releases. This achievement is thanks to our more that 250 contributors across the globe.

This brought a great sense of validation for deciding to stick to our guns, do the right thing and most importantly... be globally inclusive.

Aug 17 2016
Aug 17

I bet many of you doesn't understand what is ES6, being honest I didn't know this term until a few days ago. 

ES6 stands for ECMAScript v6 or ES2015, but in simple words, is just Javascript; Correct Javascript as simple as that.

So, ES6 one of the latest version of Javascript specification, but is not supported by all browsers, because was released in June 2015, even worst in June 2016 we got ES7 and as you can imagine not supported yet.

Right now all browsers support ES5, then, if it's not compatible with all browsers, why ES6+ is a big thing? Because, now Javascript is more OOP, using classes, constants, and modules, enabling to create more complex and organized projects.

So, how we could use ES6 in our web projects like Drupal, to avoid to have a particular version of our site based on our client's browser? The solution is Babel

Babel transforms your code to ES5 to be used in your web applications. 

Babel works using plugins that allow the transformation and enable to use a particular plugin based on the source of your code like React that requires an especial plugin to do the conversion.

Let me show an example that creates a simple ReactJS.

1. Install Node.js

The first thing we need to do is install Node.js in your system, the easy way to do that is downloading the proper installer for our platform from https://nodejs.org/en/download

We need to install Node.js because we are going to use the NPM which is a package manager for javascript libraries 

2.  Modify gitignore file

Drupal 8 projects include their own .gitignore file, but because we are about to include npm in our development process, we need to add some extra rules listed below:

# Node.js
# Logs

# Runtime data

# Directory for instrumented libs generated by jscoverage/JSCover

# Coverage directory used by tools like istanbul

# nyc test coverage

# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)

# node-waf configuration

# Compiled binary addons (http://nodejs.org/api/addons.html)

# Dependency directories

# Optional npm cache directory

# Optional REPL history

3. Create a package.json file

To be able to distribute later your javascript library you need to create a package.json file, you create that file in interactive mode using the command:

$ npm init

In the end, you will get a file similar to the following file.

  "name": "drupalreactform",
  "version": "1.0.0",
  "description": "ReactJS form to be embed in Drupal 8 Controller",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  "author": "enzo - Eduardo Garcia",
  "license": "ISC"

4. Install Webpack

To expose our library in Drupal we need to create a distribution package, for that purpose, we will use [Webpack](webpack.github.io) that is a module bundler which takes modules with dependencies to generates static assets by bundling them together.

$ npm install webpack --save

The command about will install webpack with all required libraries and modify our package.json, in the same way that we use in Composer the composer.json file.

5. Configuring Webpack & creating bundle

It's necessary to inform to Webpack using file webpack.config.js, how we can to create our bundle to be used Drupal, the following configuration assumes we have a custom module located in web/modules/custom/mysearch.

var webpack = require('webpack');
var path = require('path');

var MODULE_BUILD_DIR = path.resolve(__dirname, 'web/modules/custom/mysearch/js');
var MODULE_APP_DIR = path.resolve(__dirname, 'web/modules/custom/mysearch/js/es6');

var config = {
  entry: MODULE_APP_DIR + '/mysearch.form.jsx',
  output: {
    filename: 'mysearch.form.js'

module.exports = config;

With the configuration above, we are saying we will load the file mysearch.form.jsx and all included files in mysearch.form.js file

If you write something simple like

console.log('Hello ES6!');

You don't need any special transformation and you can create the bundle, for that propose you need to execute the following command:

$ ./node_modules/.bin/webpack -d

You will get an output similar to this image:

Webpack generation

The generation will work correctly because the source in ES5 and the output too; So, no transformation was required.

6. Testing transformation

I know I said we would embed the file generated in Drupal, but in a development process is faster if we could test first outside Drupal, for that, we could create a file named test/es62es5/index.htm inside module directory  with the following content.

    <meta charset="utf-8">
    <title>Testing transformation ES6 -> ES5</title>
    <div id="app" />
    <script src="http://www.anexusit.com/blog/how-to-use-es6-drupal-8/../js/mysearch.form.js" type="text/javascript"></script>

Opening that file in our browser would enable any possible error and reduce the change to blame Drupal 8 for a malfunction in our code.

7. Use Babel to transform ES6

Now we need to install Babel and Babel loaders to be able to transform our ReactJS form into ES5; the next command installs the required packages.

$ npm install babel-loader babel-preset-es2015 babel-preset-react --save

Also, we need to create a .babelrc file, to inform to Babel what presents will be used in transformation, check and example of that file below:

  "presets" : ["es2015", "react"]

Finally, we need to modify out webpack configuration to report what loader we are going to use in our transformation, the new aspect of webpack.config.js will be like this:

var webpack = require('webpack');
var path = require('path');

var MODULE_BUILD_DIR = path.resolve(__dirname, 'web/modules/custom/mysearch/js');
var MODULE_APP_DIR = path.resolve(__dirname, 'web/modules/custom/mysearch/js/es6');

var config = {
    entry: MODULE_APP_DIR + '/mysearch.form.jsx',
    output: {
        path: MODULE_BUILD_DIR,
        filename: 'mysearch.form.js'
    module : {
        loaders : [
                test : /\.jsx?/,
                include : MODULE_APP_DIR,
                loader : 'babel'

8. Create React form

Before to create the form we need to install some libraries to build our form.

$ npm install react react-dom antd --save

If we plan to embed CSS or LESS files in our app, need to install loaders for that using the following instructions, and register the loader in webpack

$ npm install css-loader less less-loader style-loader  --save-dev

The code of our form will be an example form React created in a previous blog post:

import React, { PropTypes } from 'react';
import ReactDOM from 'react-dom';

var Search = React.createClass({

    render: function(){
        return (
            React.createElement('form', {onSubmit: this.onSubmit, className: 'SearchForm', noValidate: true},
                React.createElement('input', {
                    type: 'text',
                    placeholder: 'Search'
                React.createElement("select", { placeholder: 'Category', value: '', onChange: this.changeHandler },
                    React.createElement("option", { value: 1 }, "Software"),
                    React.createElement("option", { value: 2 }, "Movie")
                React.createElement('button', {type: 'submit'}, "Go")

ReactDOM.render(React.createElement(Search),  document.getElementById("app"));

Of course, you can create a more advanced form, importing other libraries.

9. Include form in a Drupal controller

After "compile" our form in one file, the remaining step is to include it in a Drupal Controller, to do that you just need to follow the blog entry www.anexusit.com/blog/how-to-load-js-and-css-libraries-a-drupal-8-controller.

I hope did you find this blog entry useful.

Aug 11 2016
Aug 11

In the blog entry http://www.anexusit.com/blog/how-to-add-reactjs-drupal-8-composer, I show you how to add into Drupal 8 any library globally using composer.

But, that library is just there, because the library isn't used for any module or theme. For that reason, I am going to show you how to use a library in a controller.

In my example, I will include ReactJS inside a controller to be able to create react elements in that controller, to show how to use I will create a simple ReactJS form.

0. Setting your environment

I strongly recommend to set your environment in developer mode; that means to enable all debugs possible and disable all caches, the easy way to do that is using the Drupal Console project with the following command:

$ drupal site:mode dev

1. Create a module

Using the Drupal Console we could create a module using the following instruction:

$ drupal generate:module  --module="MySearch" --machine-name="mysearch" --module-path="/modules/custom" --description="My custom search using react" --core="8.x" --package="Anexus" --module-file --composer -n

2. Create a controller

With our module generated, now we need to create a controller to, later on, add the ReactJS library, again using the Drupal Console commands we will make the controller.

$ drupal generate:controller  --module="mysearch" --class="ReactJSFormController" --routes="title:MySearch name:mysearch.react_j_s_form_controller_form method:form path:/mysearch" 

3. Including library in our module

To enable libraries in our module, we need to create a file named mysearch.libraries.yml, below could you find an example

  version: VERSION
    /libraries/reactjs/build/react.min.js: {}

  version: VERSION
    /libraries/reactjs/build/react.js: {}

  version: VERSION
    /libraries/reactjs/build/react-dom.min.js: {}

The keys react.min, react and react.dom.min are arbitrary strings; you could change for any identifier do you prefer. 

Maybe you are wondering about the empty curly brackets {}, the idea is like each module could load the same library with different properties, like CSS could have media info, or js could be declared to be minified or report that library is an external file.

I included the minify version of React to being used when you push this module in prod and min version could be utilized in development to facilitate the debugging.

The property version is supposed to be the library version, but if you are not sure about the proper value you could use the "constant" VERSION, this constant contains the Drupal version and is used to generate the URL to include the library resource as you can see below.

<script src="http://www.anexusit.com/libraries/reactjs/build/react.min.js?v=8.1.9-dev"></script>

In my case, I was using Drupal 8.1.9-dev.

4. Install your module

Using the Drupal Console we could install our module

$ drupal module:install mysearch

5. Updating our controller

The controller that was generated its pretty simple as you could see in the following snippet of code:


namespace Drupal\mysearch\Controller;

use Drupal\Core\Controller\ControllerBase;

 * Class ReactJSFormController.
 * @package Drupal\mysearch\Controller
class ReactJSFormController extends ControllerBase {

   * Form.
   * @return string
   *   Return Hello string.
  public function form() {
    return [
      '#type' => 'markup',
      '#markup' => $this->t('Implement method: form')


If you use the module Webprofiler you can validate how many JS were loaded in your controller, in my case 69 JS files as you could appreciate in the following image.

Webprofiler no reactjs

Let me change a little bit, to include our ReactJS library.

   * Form.
   * @return string
   *   Return Hello string.
  public function form() {
    return [
        '#markup' => $this->t('Implement method: index'),
        '#attached' => array(
            'library' =>  array(

If you remember, the library was registered as react.min, but we need to include the module name first, to avoid conflict with other modules that use the same key.

Sometimes you need to clear your cache to see the changes; you can do that with Drupal Console

$ drupal cache:rebuild all

After that, you could verify that you have one extra JS file, only for this particular controller.

Webprofiler with reactjs

6. Including ReactJS form

The objective of this example was to demonstrate how to render a ReactJS form in Drupal 8

The first thing I need to do is register a local library to load JS and CSS for our form, as you can check in the following example:

  version: VERSION
    js/mysearch.form.js: {}
      css/mysearch.form.css: {}

As you could notice the path is a little different, because doesn't start with "/" that means is a relative module path instead of Drupal Root relative.

When this new library has loaded both JS and CSS components are loaded.

The content of mysearch.form.css is listed below:

.SearchForm {
    padding: 8px 24px;
.SearchForm > input,
.SearchForm > textarea,
.SearchForm > select {
    display: block;
    width: 240px;
    padding: 4px 8px;
    margin-bottom: 8px;
    border-radius: 3px;
    border: 1px solid #888;
    font-size: 14px;

.ContactForm > input.ContactForm-error {
    border-color: #b30e2f;

And the JS for our ReactJS form 

var Search = React.createClass({

    render: function(){
        return (
            React.createElement('form', {onSubmit: this.onSubmit, className: 'SearchForm', noValidate: true},
                React.createElement('input', {
                    type: 'text',
                    placeholder: 'Search'
                React.createElement("select", { placeholder: 'Category', value: '', onChange: this.changeHandler },
                    React.createElement("option", { value: 1 }, "Software"),
                    React.createElement("option", { value: 2 }, "Movie")
                React.createElement('button', {type: 'submit'}, "Go")

ReactDOM.render(React.createElement(Search),  document.getElementById("content"));

The result will be a simple form, but with a lot of possibilities to implemented.

Drupal ReactJS form

This form doesn't process anything, handle submits and request results via an API will be explaining in a further blog entry.

You can download a full and functional copy of this example from http://github.com/enzolutions/drupal-8-reactjs-form

Aug 10 2016
Aug 10

How I mentioned in my previous post How to add ReactJS in Drupal 8 with Composer, Composer is a fundamental part of Drupal 8 development workflow.

Like any open source projects, contributions are the core of Drupal, and those contributions are included in Drupal modules and themes and event Drupal core via Patches.

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-interact

2. Installing module to patch.

I will use the module Address to demonstrate how to patch a module.

Using the following module we could install the Address module in our Drupal 8 project.

$ composer require "drupal/address ~8.1"

3. Patching the module.

The Address module works pretty well, but there is an issue related to full configuration import in a site, this issue was reported and fixed in https://www.drupal.org/node/2663412. But at the moment of this article that solution wasn't included in the stable release of Address module.

Including composer lingua, we could say module and themes are packages and their difference remains in package type. To patch a package is need to edit put composer.json file to provide the patch instructions as you can see in the following snippet of code.

"extra": {
        "installer-paths": {
            "web/core": ["type:drupal-core"],
            "web/libraries/{$name}": ["type:drupal-library"],
            "web/modules/contrib/{$name}": ["type:drupal-module"],
            "web/profiles/contrib/{$name}": ["type:drupal-profile"],
            "web/themes/contrib/{$name}": ["type:drupal-theme"],
            "drush/contrib/{$name}": ["type:drupal-drush"]
        "patches": {
            "drupal/address": {
                "Drupal Addess fix default syncing": "https://www.drupal.org/files/issues/address_syncing.patch"     

As you could see, the format is a straightforward entry in patches group, providing the package to patch and the URL of the patch to be download with a human comment.

4. Applying your patches.

The next time do you run *composer install* or *composer update*; your patches will be applied, and you will get an output similar to the next image.

Applying patches

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

Aug 09 2016
Aug 09

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

Jun 17 2016
Jun 17

A few days ago I completed the adventure of travel around the world to learn and share with Drupal communities in Asia and Oceania.

First things first, a big thank you to my business partner at Anexus, Kenny Abarca because without him this trip wouldn't have been possible, enabling me and the company to have a global impact in the Drupal community.

Here's the insight statistics of the tour.


To be honest, these numbers doesn't reflect properly the thousands of experiences I lived, what I saw, all the happiness I had alone and with friends, definitely I collect a lot of miles in my heart and mind.

After 124 days on the road, I can confirm that we share almost the same problems in comparison with Drupal Communities in Latin America.

Link with the community

In general, I found that the efforts coming from the Drupal Association in terms of generating engagement with current user and newcomers is not good enough and don't impact local communities in countries outside the US/Canadá.

People say it is because it's not dynamic enough in comparison with other social applications available today and in other cases they mentioned that the g.d.o pages don't work the way they communicate each others in a specific area or region.

Language Barrier

It's true that Drupal as a product is multilingual, but  selling Drupal in Asia to non-English speakers is particularly hard, reasons I heard the most is that DO website is in English so it scares away people from the application / support and that lowest down their level of empathy.

Having the homepage and some of the sections like case studies in other languages would be really useful for those communities in terms of understanding and feeling welcome to the technology.

Also, language represents another dilemma "Who's first, the community or the market?"; as I said before the current status or our homepage in drupal.org doesn't help to create a market. The community has a problem with documentation because there is not a public and community repository in their language were they can find documentation in their language in an 'official' way. Also, when people have the courage to ask something in a language other than English, almost immediate they are repealed for it. Again, that doesn't help in the process of creating community in emerging markets for Drupal.

Being a "knowmad" and share experiences with Drupal Communities 

Nowadays connection between people is everything if you don't believe that check the LinkedIn deal with Microsoft. Our Drupal Community is global and we have a lot of travelers, but for those guys, there is not an easy way to try to be in contact with local communities in an effective way.

I have some ideas to try to improve our ecosystem and they will be shared in a session that hopefully will be accepted :) in DrupalCon Dublin. 

N.B: I want to thanks to Kanshu Wu a.k.a qingkong for his contribution in creating the poster and infographic about my Drupal Tour. If you like his work and you want to hire him in China or the USA you can contact him at Vi Sure

Feb 22 2016
Feb 22

One of the most frequent task in development for Drupal is debugging elements that are about to be printed, the most fundamental method to get the debug values is using functions print and print_r

However, with the arrival of Drupal 8 everything change and the usage of that functions is not possible. To resolve that problem with could use the implementation of Kint in Drupal 8.

1. Installing Kint

Using the project Drupal Console, we will download and enable Kint module. Kint module implementation is a submodule of devel module.

Let me show you how to do that with Drupal Console.

$ drupal module:download devel --latest
$ drupal module:install kint 

2. Enabling twig debug

Before to try to use Kint in our templates, we need to disable the twig cache, which is the default status in a Drupal installation, to facilitate that process we will use the Drupal Console project again as you can see below.

$ chmod 755 sites/default/
$ drupal site:mode dev

3. Debugging twig templates.

For example purpose, I will use the Bartik theme included in Drupal 8 core. Editing the file located at core/themes/bartik/templates/page.html.twig adding the following instruction before page wrapper.

{{ kint(page) }}

As a result we will see at the top of the page a Kint section will all information of page but collapsed.

Kint collapsed

It's possible to see the full list clicking in [+] symbol to toggle the JS render for page object.

Kind expanded

It's necessary to remark that Kint is not a PHP function, it's a Twig function, so please don't try to use other PHP function in your twig template, because those function can't be interpreted.

I hope do you find this article useful.

Jan 25 2016
Jan 25

One of the most popular modules in Drupal worlds is Elysia Cron, because allow us to have a granular control over cron function execution process.

Therefore, the uncomfortable question nowadays is when we will have a version of Drupal 8 of Elysia Cron, because, for some websites this module is critical to publish a website in production.

I heard some people that say, due modules like Elysia are not ported yet to Drupal 8 yet, Drupal 8 couldn't be considered for production sites.

I totally disagree with that, and I will show you how to get the same level of granularity we got in the past with Elysia Cron, but without Elysia Cron.

To provide a solution I will use the Drupal Console project.

Drupal 8 core provide a way to run cron implementation accessing the URL http://example.com/ /cron/<hash>, you can get the full URL from Status report page https://example.com/admin/reports/status. But, this approach executes all cron implementation in sequence, and most of the times, that is a bad idea, due some implementations could take too much time in their execution and the last implementations are never executed.

Let me explain how cron command in Drupal Console works. Firstly, we have a command to list all cron implementations as you can see below

$ drupal cron:debug

Cron Debug

As you can imagine or suffer in the past search and node cron implementations could take forever if you have a big amount of content on your website, the image above is the output of a fresh Drupal 8 installation, you will get module contrib and module custom implementations in a regular website.

In order to execute all cron implementation you can use the command execute as you can see below

$ drupal cron:execute all

Cron execute all

Off course, this execution doesn't provide any change respect with the system cron execution but using a different set of options I can accomplish what I promise at the beginning of this article.

If we want to execute only one or more cron implementations we just need to replace all for required module implementation, let me show you an example.

$drupal cron:execute search update

Cron execute partial

Using this trick we can skip that cron implementation with problems of execution and just focus in what we need.

To automatize oue Drupal cron execution, we can implement a cron job. For Linux and mac users you can do setting in you cron something like this

45 * * * * /usr/local/bin/drupal cron:execute search 
30 * * * * / usr /local/bin/drupal  cron :execute node

If you are a windows user you can follow this guide Configuring cron jobs with Windows or use the service http://cronless.com/

I hope do you found this article useful.

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web