How To Create a Headless Drupal Site

Headless Drupal is an approach to building Drupal websites , in which Drupal services as backend content repository. The frontend built indifferent technologies and communicates with Drupal via an API.

Why Headless Drupal become a trend in a few past years ? First of all it make’s a developer life easier... backend and frontend teams can work seperately from each other. That’s where are the knowledge of a RESTFUL API from the previous article i will show you an example of a decoupled site. For the frontend part of an application we will using react and for the backend we will using Drupal.

Step 1: Create React App.

• Let’s create the React App, where the Decoupled websites originates. We will create a simple welcome page.
• With a simple folder structure as we create before further steps.

• You can use CDN to add React to your index.html file.

• Now add further details in index.html file.
• Add "div" after the script tag.
• Create a container part using "div".

• Create app.js file into the react -> js folder.
• Then write some code into the app.js file.

• Include babel to transform JSX syntax into ECMAScript.
• Include app.js file inside the index.html.

Note :- If you try to open the index.html file in your chrome browser ypu should have the “XMLHttpRequest” error. That means to use an HTTP server to make it work. The simplest way to start a new server is to use PHP 8.3 and later built in web server.

Now if you go to http://localhost:8000/ page you should see “React is Awesome”. It means that react works and we’er ready to go.

Step 2: Create Drupal API.

• Go to the Chrome and Install Drupal from DRUPAL.ORG.
• Currently You install the drupal of version 10.4.
• After installation setup the drupal admin panel.
• Add a new Content Type called “Blog”.
• Set the fieldset of that blog like : Title ; Body ; Image.
• Then create a few node of “Blogs” content type.

• Click the extend extended menu in the top of the navigation menu.
• Enable all the module under the web services.

• To create a required Web Service by adding a new view.
• I called it “Blogs API”.
• Click the “Provide a REST checkbox”.
• Enter REST export path.

• Added a filter for this view by content type “Blogs”.
• Gettings only blogs in API.
• Not other content types like an article and basic page.

• Go to api/blogs page you should see JSON DATA.

Step 3 : Integrate and display data.

• I choose the axios client for the server request instead of Jquery.
• We need only AJAX features.
• Don’t need to install or load the whole library (jquery).

• Write the content in app.js file.
• Display all the blogs nodes.

Step 4: Go and check on the localhost or browser.

Now go to http://localhost:8000/ and you should see something like this:

Note :- Decoupled Drupal isn't a magic elixir which will make your site super fast in a minute. In order to get a satisfying result, I'd recommend you to pay attention to a UI localization, search engines indexing problems (cannot properly index a website with client-side JS), less layout control by site builders, overhead and overlooked content. If you want to try something different and taste the future of Drupal it's your turn to face new challenges and try to solve them with this approach.