Onlangs lanceerde we deze nieuwe website, gebouwd met een ‘headless’ Drupal cms als backend en Node.js & Express JS ingezet aan het frontend. Het systeem is ‘decoupled’.
Waarom decoupled? Omdat dit de toekomst is, lees ook dit blog waarom.
In deze blog reeks licht ik toe hoe wij Node.js en Express JS geïmplementeerd hebben als frontend framework, gekoppeld aan een Drupal cms via een RESTful API. Ik ga niet in op het design en ontwikkeling van de HTML, CSS en client-side Javascripts, die zijn al ontwikkeld en aangeleverd.
Als voorbeeld gebruik de blog sectie op deze website.
Kennis
Ik ga ervan uit dat je al enige tijd ervaring hebt in online projecten en hedendaagse webtechnieken. De belangrijkste:
- Drupal
- Javascript
- JSON
- HTML/CSS
Node.js
Node.js is een webserver die Javascript kan uitserveren voor een client, maar ook Javascript op de server zelf kan uitvoeren. Het Javascript doet het werk wat normaal bijvoorbeeld PHP doet. Je kunt Node.js vanuit hier installeren.
Express JS
Verder gebruiken we het Express JS framework, die het makkelijker maakt om websites te publiceren met Node.js:
- Voorziet in routing
- Inzetbaar bij singe page applicaties
- MVC gebaseerd
Topics
Wat ik ga behandelen:
- Het opzetten van een Drupal 8 RESTful API
- Het routeren van pagina’s in Node.js / Express JS. En het genereren van de pagina’s met behulp van data uit de Drupal 8 RESTful API
- Het werken met dynamische data, templates en partials in Node.js / Express JS.
Ik doe dit in drie afzonderlijke blogs, waarvan dit de eerste is.
1) Het opzetten van een Drupal 8 RESTful API
1.1) Installatie en configuratie Drupal core
We hebben een relatief eenvoudige 'GET only' REST API nodig. De Drupal 8 core bevat een RESTful API waarmee je relatief snel de GETs kunt implementeren. Wanneer je ook te maken krijgt met POST, PUT en DELETE dan zul je waarschijnlijk aavullende modules moeten schrijven om volledig aan je gewenste eisen te voldoen. Download Drupal 8 en kies tijdens installatie voor een ‘minimal’ installatie. We hebben namelijk alleen de API en enkele extra modules nodig, verder het liefst zo weinig mogelijk overhead.
Nadat de Drupal 8 installatie gedaan is, activeer als eerste het Drupal administratie theme ‘Seven’ (/admin/appearance), zodat we een grafisch backend krijgen:
Installeer vervolgens de module ‘Toolbar’ (/admin/modules), voor betere navigatie door het Drupal backend:
We hebben ook de modules ‘Field UI’ en ‘Image’ nodig, zodat we het content type kunnen configureren.
En de module ‘Views UI’, om de RESTful Web Service te definiëren:
En als laatste, ons bread-and-butter, de ‘RESTful Web Services’ module:
Overbodige blocks
Nog een kleine clean-up: er staan nog 2 overbodige blocks bovenaan je pagina nu: Tools & Administration. Deze blokken kan je weghalen onder /admin/structure/block.
1.2) Opzetten content type ‘blog’
Ik gebruik dit blog als voorbeeld. We zullen dus een content type ‘Blog’ nodig hebben, met de velden:
- Title
- Body
- Image
Ik ga er voor het gemak even van uit dat je weet hoe je een Drupal 8 content type en fields kan definiëren. Voor ons blog hebben we alleen een ‘Image’ field nodig, gezien overige benodigde fields en data al door de Drupal core worden geleverd. Het resultaat:
1.3) Het configureren van de Drupal 8 Web Service
Nu het content type is gedefinieerd kunnen we de benodigde Web Service aanmaken. Allereerst, maak een nieuwe view aan (admin/structure/views/add):
We willen graag een ‘REST export’, dus vink die aan (2). Verder geef ik hem de naam ‘Blogs JSON export’ (1) en de url ‘blogsexportall’ (2). Wanneer ik op ‘Save and edit’ klik wordt de view geïnitialiseerd.
1.4) Configureer de Drupal 8 REST export view
Kies bij ‘Show’ voor ‘Fields’ in plaats van ‘Entity’ (1):
Dit zijn vervolgens alle fields die we nodig hebben:
Een toelichting per field:
Content: Title
● Gebruik formatter ‘plain tekst’ en vink ‘link to content’ uit:
Content: Authored on
● Met als custom format ‘Y-m-d\TH:i:s+08:00’. Dit is namelijk meteen het juiste format voor schema.org meta informatie, die we gaan gebruiken in het frontend.
Content: Blog image
● Wordt gebruikt voor de grote afbeelding bovenaan het blog. ● ‘Image style: none’ en ‘Link image to: nothing’:
Content: Authored on (2e)
● Wordt gebruikt voor de datum van een blog-item. ● Gebruik hier custom date format ‘d Y M’:
Content: Body (teaser)
● Wordt gebruikt voor de intro-teksten op de blog overzichtspagina. ● Gebruik hier de ‘trimmed’ versie:
Content: Body
● Wordt gebruikt voor de volledige tekst op blog detail pagina. ● Gebruik hier alle standaard instellingen.
Content: Authored by
● Wordt gebruikt voor de naam van de blogger. ● Kan alle standaard instellingen behouden.
Relationship met Author
Als laatste hebben we nog enkele informatie nodig die bij de Author vandaan komt, hiervoor moeten we in de View eerst een ‘Relationship’ aanmaken. In de view, onder ‘Advanced’, klik op ‘Add’ bij ‘Relationship’ en maak de relation aan:
Nu kunnen we de twee laatste fields toevoegen:
(author) User: Author image
● Wordt gebruikt om de afbeelding van de blogger onderaan het blog te plaatsen. ● Alle instellingen kunnen standaard blijven
(author) User: Author signature
● Wordt gebruikt om de handtekening van de blogger naast zijn naam te plaatsen, geheel onder aan het blog. ● Alle instellingen kunnen standaard blijven.
De JSON Output
Wanneer je navigeert naar /blogsexportall zie je de JSON output:
End of part 1
Alright, we hebben Drupal 8 minimaal geïnstalleerd en geconfigureerd, zodat we nu een backend hebben waarin content managers blogs kunnen beheren. En die vervolgens de data in een juist JSON format genereert, zodat we die kunnen gaan binden aan een frontend framework.
In ons geval wordt dat Node JS + Express JS, maar dat zou net zo goed React kunnen zijn, of een ander frontend framework. Het zou zelfs een App kunnen zijn voor je smartphone, TV, watch en alle andere (toekomstige) apparaten. ‘Decoupled’ is schaalbaar en toekomstgericht.
In het volgende blog in deze reeks ga ik laten zien hoe je deze Drupal API kunt integreren in een Node.js / Express JS frontend.
Door naar Headless Drupal & Node.js | Part 2/3: Node.js introductie >>
