Building search experiences is hard work. It can seem easy at a glance: build a search bar, put data into a database, then have user input fuel queries against the database. But there are many things to consider in the data modeling, underlying logic and — of course — the overall design and user experience.

We’ll walk through how to build excellent, React-based search experiences using Elastic’s open source Search UI library. It’ll take about 30 minutes, and afterwards you’ll be ready to bring search to any application which needs it.

But first, what is it that makes building search so challenging?

Search is hard

A great article made the rounds a few weeks ago titled Falsehoods Programmers Believe About Search. It contains an exhaustive list of false assumptions developers take into the development of search.

Among the many believed falsehoods:

“Customers who know what they are looking for will search for it in the way you expect.”
“You can write a query parser that will always parse the query successfully.”
“Once set up, search will work the same way for the next week.”
“Synonyms are easy.”
… And many others gems — you should give it a read!

The takeaway is that search has many challenges — and they aren’t just under-the-hood. You need to think about how to manage state, build components for filtering, faceting, sorting, pagination, synonyms, language processing, and much, much… much more. But, in summary:

Building great search requires two sophisticated parts: (1) the search engine, which provides APIs to power search and (2) the search library, which paints the search experience.

For the search engine, we’ll look at Elastic App Search.

For the search experience, we’ll introduce an OS search library: Search UI.

When we’re done, it’ll look just like this:

Search engine: Elastic App Search

App Search is available as either a paid, managed service, or a free, self-managed distribution. We’ll use the managed service for this tutorial, but remember that your team can use Search UI and App Search with a basic license at no cost if you host it yourself.

The plan: Index documents which represent the best video games of all time into a search engine, then design and optimize a search experience to search through them.
First, sign up for a 14-day trial — no credit card needed.
Create an Engine. You can pick from 13 different languages.
Let’s name it video-games and set the language to English.

Download the best video games data set and then upload it to App Search using the importer.
Next, click into the Engine, then select the Credentials tab.
Create a new Public Search Key with Limited Engine Access to only the video-games engine.
Retrieve the new Public Search Key and your Host Identifier.
Even though it didn’t look like much, we now have a fully functioning search engine that’s ready to search through our video game data using a refined search API.
Here’s what we’ve done so far:

Created a search engine

Ingested documents

Created a default schema

Retrieved a scoped, disposable credential that we can expose to the browser

That’s it for App Search, for now.
Let’s get to building our search experience using Search UI.
Search library: Search UI
We’re going to use the create-react-app scaffolding utility to create a React app:
npm install -g create-react-app create-react-app video-game-search --use-npm cd video-game-search
Within this foundation, we’ll install Search UI and the App Search connector:
npm install --save @elastic/react-search-ui @elastic/search-ui-app-search-connector
And start the app in development mode:
npm start
Open up src/App.js in your favorite text editor.
We’ll start with some boilerplate code, and then unpack it.
Mind the comments!
// Step #1, import statements import React from "react"; import AppSearchAPIConnector from "@elastic/search-ui-app-search-connector"; import { SearchProvider, Results, SearchBox } from "@elastic/react-search-ui"; import { Layout } from "@elastic/react-search-ui-views"; import "@elastic/react-search-ui-views/lib/styles/styles.css"; // Step #2, The connector const connector = new AppSearchAPIConnector({ searchKey: "[YOUR_SEARCH_KEY]", engineName: "video-games", hostIdentifier: "[YOUR_HOST_IDENTIFIER]" }); // Step #3: Configuration options const configurationOptions = { apiConnector: connector // Let's fill this in together. }; // Step #4, SearchProvider: The finishing touches export default function App() { return ( <SearchProvider config={configurationOptions}> <div className="App"> <Layout // Let's fill this in together. /> </div> </SearchProvider> ); }
Step 1: import statements
We’ll need to import our Search UI dependencies and React.
The core components, connector, and view components are contained within three different packages:

@elastic/search-ui-app-searc

Elastic for

App Search

Site Search

Enterprise Search

APM

Logs

Infrastructure

SIEM

Maps

Uptime

2019

january

february

march

april

may

june

july

2018

january

march

may

june

july

august

september

october

november

december

2017

april

september

november

Sign up for product updates!

Be in the know with the latest and greatest from Elastic.