Mr Treublaan 1-3
1097 DP Amsterdam
The Netherlands

Headless Drupal & Node.js | Part 1/3: Drupal 8 RESTful

22 Sep, 2015 Drupal

Home Blog Headless Drupal & Node.js...

Drupal headless

Recently we launched our new corporate website, built with a ‘headless’ Drupal cms as backend and Node.js & Express JS deployed at the frontend. The system is ‘decoupled’.

Why and how decoupled? Read this blog.

In these series of blogs I will explain how we implemented Node.js and Express JS as frontend framework, linked to a Drupal cms via a RESTful API. I am not discussing the design and development of the HTML, CSS and client-side Javascripts, which have already been developed and delivered.

Knowledge

I assume you already have some experience with online projects and contemporary web technologies. The most important ones are:

  • Drupal
  • Javascript
  • JSON
  • HTML/CSS

Node.js

Node.js is a web server that can serve up Javascript for a client, but that can also run Javascript on the server itself. The Javascript is doing the work that for example PHP is usually doing. You can install Node.js from here.

Express JS

We are also using the Express JS framework, which makes it easier to publish websites with Node.js:

  • Provides routing
  • Can be used with dynamic website applications
  • MVC based

Topics

Subjects I am going to discuss:

  1. Setting up a Drupal 8 RESTful API
  2. Routing from pages in Node.js / Express JS. And generating the pages using data from the Drupal 8 RESTful API
  3. Working with dynamic data, templates and partials in Node.js / Express JS.

I will do this in three separate blogs, of which this one is the first.

Wanna stay informed?

Monthly Newsletter →

 

1) Setting up a Drupal 8 RESTful API

 

1.1) Installing and configuring Drupal core

We need a relatively simple 'GET only' REST API. The Drupal 8 core contains a RESTful API that allows you to implement the GETs relatively quickly. When you are also dealing with POST, PUT and DELETE, then you will probably have to write additional modules to fully meet your desired requirements. Download Drupal 8 and select a ‘minimal’ installation, since we only need the API and some additional modules, and preferably as little overhead as possible.

After the installation of Drupal 8 is completed, you will first activate the Drupal administrative theme ‘Seven’ (/admin/appearance) in order to get a graphic backend:

Then install the module ‘Toolbar’ (/admin/modules) for easier navigation through the Drupal backend:

We also need the modules ‘Field UI’ and ‘Image’ in order to configure the content type.

And the module ‘Views UI’ to define the RESTful Web Service:

And last, our bread-and-butter, the ‘RESTful Web Services’ module:

 

Unnecessary blocks

Now we will perform a little clean-up: There are still 2 unnecessary blocks at the top of your page: Tools & Administration. These blocks can be removed under /admin/structure/block.

 

1.2) Setting up content type ‘blog’

I will use this blog as an example. So we will need a content type ‘Blog’ with the fields:

  • Title
  • Body
  • Image

For the sake of convenience I assume you know how to define a Drupal 8 content type and fields. For our blog we only need an ‘Image’ field since other required fields and data are already provided by the Drupal core. The result:

1.3) Configuring the Drupal 8 Web Service

Now that the content type is defined, we can create the required Web Service. First you create a new view (admin/structure/views/add):

We would like a ‘REST export’, so be sure to check that (2). Then I give it the name ‘Blogs JSON export’ (1) and the url ‘blogsexportall’ (2). When I click on ‘Save and edit’, the view will be initialized.

 

1.4) Configuring the Drupal 8 REST export view

Under ‘Show’ select ‘Fields’ instead of ‘Entity’ (1):

These are all the fields we need:

Explanation of each field:

Content: Title

  • Use the formatter ‘plain text’ and uncheck ‘link to content’:

Content: Authored on

  • With custom format ‘Y-m-d\TH:i:s+08:00’, as this is the right format for schema.org meta information, which we will use in the frontend.

Content: Blog image

  • Will be used for the large image on top of the blog.
  • ‘Image style: none’ and ‘Link image to: nothing’:

Content: Authored on (2e)

  • Will be used for the date of a blog item.
  • Use here custom date format ‘d Y M’:

Content: Body (teaser)

  • Will be used for the intro text on the summary page of the blog.
  • Use here the ‘trimmed’ version:

Content: Body

  • Will be used for the body text on the blog detail page.
  • All the default settings can be used.

Content: Authored by

  • Will be used for the name of the blogger.
  • All the default settings can be used.

Finally, we need some information from the Author. For this we first have to create a ‘Relationship' in the View. Click in the view under ‘Advanced’ at ‘Relationship’ on ‘Add’ and create the relation:

Now we can add the last two fields:

(author) User: Author image

  • Will be used to place the image of the blogger at the bottom of the blog.
  • All the default settings can be used.

(author) User: Author signature

  • Will be used to place the signature of the blogger next to his/her name, fully at the bottom of the blog.
  • All the default settings can be used.

 

The JSON Output

When you navigate to /blogsexportall you will see the JSON output:

 

End of part 1

Alright, we have performed a minimal installation of Drupal 8 and configured it in order to have a backend in which content managers can manage blogs. And that subsequently generates the data in a proper JSON format, so that we can link it to a front end framework.

In our case this will be Node JS + Express JS, but it could also be React or another frontend framework. It could even be an App for your smartphone, TV, watch and all other (future) devices. ‘Decoupled’ is scalable and future-oriented.

In the next blog in this series I will show you how to integrate this Drupal API in a Node.js / Express JS frontend.

Read more in part 2 >

Written by Joris Snoek | Sep 22, 2015
Let's Talk

Please tell me all about your project!
Mail , or send a message:

Got some more time?

Related content
09 May, 2023 Drupal

Save time, frustration, and potential content loss.


07 Jun, 2021 Drupal

Programmatically in multiple Views


02 Jun, 2021 Drupal