Do you want to build modern search apps with React or similar but still leverage the powerful module family Drupal Search API? We have contributed a new module that exposes the search functionality of Search API with an easy to understand API that lets you build engaging search experiences with the frontend technology of your choice.

First, we show how the Drupal module works and how you configure and extend it. All relevant configurations of Search API and Facet API are supported and are passed to the search app using DrupalSettings. The configurations are also used to generate the API for decoupled searches.

Then, we go over the API and show how to execute search queries and process responses. The API is similar to search frameworks like Elasticsearch with self-explanatory query responses, support for GET parameters to leverage Drupal caching and dynamic naming of response values according to the configuration.

Last, we show a search app working with the new API built with React, Web-Components, and Tailwind that is injected like any other Javascript library in Drupal’s theme layer. This app is flexible, it’s only focused on implementing the UI logic needed for the search widgets (input, facets, pager…) of the search configs and then injecting them wherever each config says using factories, portals, and context. After that, it’s all about consuming the URL, the config, and the endpoint and responding dynamically to them with hooks.

Attendees will learn:
- You will learn how to use Drupal Search API with decoupled Javascript applications.
- You will get a good overview of the advantages and considerations when deciding to build a decoupled search application.
- You will see an example of a search application in Drupal, whose architectural approach you can use for your own.

Session (45 minutes)

Experience level of the audience

Intermediate