Drupal-8 Headless Hello World

I will be writing a series of article on Drupal-8 Headless. This article will focus on simple headless hello world. We will first learn how to create a Hello World Module in Drupal-8. Oh! but this hello world page will return JSON Data :-) Then we will be creating a NodeJS+Express project which consume the JSON data from Drupal and display it.

Node JS

It’s like Apache server for PHP. Just like Drupal Application needs Apache or Nginx. For running a Javascript Application on Server we require Node JS to be installed. Read more about installing and using Node JS.

Express JS

Express JS is a server side Javascript framework that provides features including server side routing, MVC, etc.

1. Install a standard drupal-8 profile

   

2. Create hello world module
   Create a helloworld folder in modules directory.
   Create a file name helloworld.info.yml with content
   Create a file name helloworld.routing.yml with content
    

   name: helloworld
   type: module
   description: Hello World JSON Return
   core: 8.x
   package: Other
       
   

   Create new directories src and src/Controller. Create file src/Controller/DefaultController.php with below code

   headers->set('Content-Type', 'application/json');
       return $response;
     }
   
   }
   

    
3. Enable the Hello World Module in Drupal
4. Create a new Node Project (say meand8)
   From your terminal type:

   $ mkdir meand8
   $ cd meand8
   $ npm init # initiate the node project. Choose all default options. 
   $ npm install express —save # add dependency on express js.
   
   

   It will create a file named package.json with content similar to:

   {
   "name": "meand8",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "scripts": {
   "test": "echo \"Error: no test specified\"&& exit 1"
     },
   "author": "",
   "license": "ISC",
   "dependencies": {
   "express": "^4.13.3",
     }
   }
   

   Create new file index.js with following content

   var express = require('express');
   var http = require('http');
   var app = express();
   var http = require('http');
   
   /* Assuming that you can access your drupal via http://localhost/d8 
   Make a http get request to drupal hello world page, that returns a JSON */
   
   http.get("http://localhost/d8/helloworld", function(res) {
     console.log("Got response: " + res.statusCode);
     res.on("data", function(chunk) {
       http_req = "" + chunk;
     });
   }).on('error', function(e) {
     console.log("Got error: " + e.message);
   });
   
   /*Create the landing page of Express JS App and return the Content from Drupal Hello World Page
   app.get('/', function(req, res) {
       res.send(http_req);
   });
   
   app.listen(3000);
   console.log('Listening on port 3000...');
   
   

5. Start your node server

   In terminal type
   $ node index.js
   Listening on port 3000...
   Got response: 200
       
   

6. Check in browser http://localhost:3000

   

Author

Ankit Babbar

Ankit has been a Drupal developer for more than 4 years and also has extensive experience with cloud services from Digital Ocean, AWS, Rackspace, Google Compute Engine.