Headless Drupal or decoupled Drupal is when you use Drupal only as a storage for content and a frontend that gets the data from the Drupal backend via an API. The front end is usually a JavaScript framework like Angular or Vue. In this example, we use Angular 6 as a front end and we open up my website www.abhaisasidharan.xyz available as JSON objects via an API. This enabled me to create an Angular Single Page Application which pulls content from abhaisasidharan.xyz.
To read a comparison of React JS and Angular you can go here: https://www.abhaisasidharan.xyz/blog/angular-vs-react-better-head-headless-decoupled-drupal
Requirements :
- Nodejs 10 and npm
- JSON:API module: https://www.drupal.org/project/jsonapi
Assuming you already have a Drupal 8 site running, let us begin by installing nodejs and angular 6. I have used nodejs 10 and angular 6, which I then upgraded to 7. Install nodejs 10 by following instructions here https://github.com/nodesource/distributions/blob/master/README.md. To install angular globally run npm install -g @angular/cli. You may have to use sudo depending on your permissions. To install locally, you have to run npm install @angular/cli.
We have all our requirements now, we’ll start by enabling REST services in our Drupal 8 site. I have used two methods to get my content from the backend. One is enabling REST
services in Drupal 8 core and adding the endpoints for node list and view.
The other is by a module called JSON:API. This makes most of the content, taxonomy, and blocks available at the endpoint www.yoursitename.com/api. I have yet to enable the user/login and user/register endpoints; All in good time.
Just to understand the concept of Headless Drupal I got this image from the internet:
Image Courtesy: https://www.valuebound.com/resources/blog/integrating-headless-drupal-angularjs
You can also make your views RESTful just by going to your edit view page and duplicating the view as REST export as show here:
This means you can structure your content anyway in the backend without worrying about the frontend. Once you get the content as JSON or XML in the frontend, you can display it on your angular app with as much flexibility as one can hope for.
Here is the code for the Angular 6 app: https://github.com/codingsasi/abhaisasidharan-angular which uses the API. This is just an introductory article for simple Decoupled Single Page Angular Application. I will be writing more articles about creating an Angular app from scratch. You can test this and add improvements as well. Clone the repository and run npm install. Then run ng serve to run on http://localhost:4200. You will see an exact copy of ng.abhaisasidharan.xyz.
Future plans:
- Enable user/login user/registration endpoints.
- Enable login with google/facebook.
- Make an android application using the API; Just because. You know. IoT? Yeah.
- Convert the entire site to Angular SPA.
- Images are now being loaded directly from the drupal site. This is convenient now because Drupal provides responsive images. The image loading is a bit slow because of this. My solution for this is to make an angular module that manages all the files and stores them on the angular side.
- More content regarding this topic.
For any queries or suggestions please comment below. Thank you.
