December 06, 2023
Kevin Montgomery
|
With the recent release of Search UI Kit it’s even easier to build engaging and effective site search functionality in a dynamic front end or native app. SearchStax Studio already includes site search REST APIs – but our new Search UI Components for React handle backend interaction and authentication so you can start building without having to implement another API.
Let’s look at how to rebuild our own SearchStax Studio Documentation site into a React and Drupal-powered headless platform including site search. Here are the different platforms, frameworks, and modules used in the build.
You can build your own headless environment by cloning our SearchStax Docs Headless repo. This repo includes a Docker environment for Drupal and React development that’s preloaded with the headless front end and Drupal instance with documentation content.
React has become one of the dominant front end frameworks especially when delivering dynamic and engaging front end experiences. While building with React can be quicker and offer highly interactive interfaces – it lacks many of the core features needed to deliver “standard” static website content like those of Drupal, WordPress, Sitecore, and other content management systems. Like many front end frameworks, React is often backed by a REST or GraphQL backend that delivers highly structured JSON as opposed to fully formatted HTML.
Going headless with your CMS, however, can give you the publishing features of a CMS without the drawbacks of server side state management and rendering. Your development team can deliver better features with higher release velocity by decoupling content editing and front end feature deployment so that both processes can proceed at their own pace.
Let’s take a look at how Drupal and React can work together along with SearchStax Studio site search for an interactive and easy to manage technical documentation site.
Going headless typically means that the front end will need to manage user state separately from the back end (as opposed to using parameters, cookies, request headers, or other methods to indicate user state during a URL request). Using the JSON:API module with Drupal exposes several endpoints for site menus and navigation, URL aliases, and nodes of content.
When the React app initially loads it’ll request the various menus from Drupal as well as the URL aliases so that it can build the base site navigation and then load the appropriate content for the requested URL. React can then request the full page content, process any inline tags, and render and update the interface.
SearchStax Studio can index content from Drupal via the native integration and also supports crawling so other content sources and sites can be included in the index. Site search features can be built in React using our Search UI Components so site search features can be used and shown throughout the app.
Drupal is an excellent platform for backing a headless site since it offers easy editing, menu building, and high availability to act as your content API for your front end. Content editors can still securely access and edit content within Drupal and configure site navigation with menus with updates immediately available in the React front end.
Using the Drupal APIs for content and site configuration simplifies the front end and avoids having to hardcode things like link text, URLs, or long form content.
SearchStax Studio integrates natively with Drupal so search indexes are updated immediately when content is added or updated. SearchStax Studio includes search customization including customized relevance modeling, auto complete and related search suggestions, search faceting, filtering, and sorting, and analytics. These features are all directly implemented in the Search UI Components for Reach package and can be completely customized, styled, and extended in React.
React encourages reusability and component-based development that differs from fully formatted server-side rendered HTML that was simply injected into an area of a webpage. React does not easily allow loading HTML from an API into a component due to security issues as well as potential interference when rendering or responding to the virtual DOM.
Using the html-to-react package allows interception of specific HTML tags from the Drupal API so that they can be essentially modified into React components. This addresses any issues with malformed HTML and ensures that React is fully aware of all elements that exist within the app.
The React app in our example follows similar conventions to Drupal’s block layout – main navigation, left hand sub-navigation, and site footer wrapped around page content.
<div className="App">
<ThemeProvider theme={theme}>
<AppBar position="fixed">
<Toolbar>
<Link to="/">
<Box
component="img"
src="https://www.searchstax.com/wp-content/uploads/2022/02/logo.svg"
/>
</Link>
<SiteNav />
<SearchBar section={section} />
</Toolbar>
</AppBar>
<Routes>
<Route path="/">
<Route index element={<Docs url="/home" navMenu={navMenu} section={section} />} />
<Route path="search" element={<Search />} />
<Route path="*" element={<Docs url={location.pathname} navMenu={navMenu} section={section} />} />
</Route>
</Routes>
<Footer />
</ThemeProvider>
</div>
<SearchstaxWrapper
searchURL={config.searchURL}
suggesterURL={config.suggesterURL}
trackApiKey={config.trackApiKey}
searchAuth={config.searchAuth}
initialized={() => {}}
beforeSearch={beforeSearch}
afterSearch={afterSearch}
authType={config.authType}
router={{ enabled: true }}
language={config.language}
>
<Stack spacing={1}>
<InputWidget />
<RelatedSearchesWidget />
<Stack direction="row">
<OverviewWidget />
<SortingWidget />
</Stack>
<Stack direction="row">
<FacetsWidget />
<Stack>
<ExternalPromotionsWidget />
<ResultWidget />
</Stack>
</Stack>
<PaginationWidget />
</Stack>
</SearchstaxWrapper>
void fetchArticleFromID(drupalPath.attributes.path.replace('/node/','')).then((data: article) => {
document.title = data.data[0].attributes.title;
const htmlInput = data.data[0].attributes.body.value;
const isValidNode = () => { return true; };
const processNodeDefinitions = ProcessNodeDefinitions();
const processingInstructions = [
{
shouldProcessNode: (node: any) => { return node.name && node.name === 'a'; },
processNode: (node: any, _children: any, index: number) => {
return React.createElement(React.Fragment, {key: index,}, [
<a
key={index}
href={node.attribs.href}
onClick={(e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => { handleLink(e, node.attribs.href); }}
>{node.children[0].data}</a>
]);
}
},
{
shouldProcessNode: () => { return true; },
processNode: processNodeDefinitions.processDefaultNode,
},
];
setReactContent(Parser().parseWithInstructions(htmlInput, isValidNode, processingInstructions));
});
Using html-to-react allows for HTML content and formatting to live in Drupal itself while still rendering correctly in React. The html-to-react module also allows for interception of specific HTML tags from Drupal for modification in React.
While headless sites are inherently more complex they do offer some benefits that monolithic CMSs can’t match.
Moving to headless can be driven by many factors including enhanced features or interactivity, full featured “app” experiences, interacting and consuming data from multiple servers or sources, as well as availability on many different screen and device types.
Search UI Components for SearchStax Studio are available for React, Vue, Angular, and other JavaScript-powered front end frameworks so developers can get started today testing and building site search for headless apps.
Copyrights © SearchStax Inc.2014-2024. All Rights Reserved.
SearchStax Site Search solution is engineered to give marketers the agility they need to optimize site search outcomes. Get full visibility into search analytics and make real-time changes with one click.
close
SearchStax Managed Search service automates, manages and scales hosted Solr infrastructure in public or private clouds. Free up developers for value-added tasks and reduce costs with fewer incidents.
close
close