Getting Started with Algolia React InstantSearch

On a day-to-day basis, we encounter platforms like Flipkart and YouTube which have great search engines with hundreds of people behind them. As we are exposed to such great search engines, we expect to be able to search out on every site and application we use.

Why Algolia?

Not every company can afford an avid developer for searching only. This can be where Algolia comes in, it implements efficient, flexible searches on sites and applications.
Parts of Algolia:

• Search implementation

• Analytics

The various implementation tools make it easier for developers to create and maintain great search experiences for their users.

Format and Structure Your Data

Before you will be able to search your content with Algolia, you need to send your data to Algolia. Algolia doesn’t search in your original database, but with the data you import, which is hosted on its servers.

Here’s what the info workflow looks like:

1. You fetch data from your data source

2. You transform that data into JSON records.

3. You send the records to Algolia. This can be considered the indexing step.

Algolia doesn’t search from your database, instead you have to send the data to the Algolia engine. You don’t want to extract everything, only the records you need to build a great search engine.

Algolia doesn’t consider all data types, it has to be a certain data type i.e, JSON records. When turning your data into JSON records, you must refine them further.

For now, before sending our data to Algolia, let’s create an Algolia account and build an Algolia index.

Visit the Algolia official website link, sign up, and head to the dashboard. For this article, let’s make a sample index name algolia with sample data.

An Algolia record is a set of key-value pairs called attributes.
Below is an example of a record:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
  "post_id": 6982,
  "post_title": "Amazon: searches per month",
  "post_date": 1510219443,
  "post_date_formatted": "Nov 9th 2017",
  "author_name": "Haroen Viaene",
  "author_image_url": "https://secure.gravatar.com/avatar/48ff3c037bd28b8fccabe52751e9700f?s=40&d=mm&r=g",
  "permalink": "https://blog.algolia.com/yarn-search-javascript-packages/",
  "categories": [
    "Technology"
  ],
  "image": "https://blog.algolia.com/wp-content/uploads/2017/11/2017-11_Yarn-Algolia-360x200.png",
  "time_to_read": 11,
  "content": "... some random content....",
  "record_index": 2,
  "objectID": "media-sample-data-99"
}

All attributes are searchable by default, which allows you to search in your records right from the beginning. For better performance, you may wish to be more selective by setting just some attributes as searchable. You’ll try this with the searchable attribute feature.

Pushing Data to an Algolia Index

Algolia uses its servers to search your data.

Pushing your data to an Algolia index:

• Using Algolia API clients.

• Using Algolia dashboard by sending a JSON file.

You need an application id and a valid API key to push your data, which you can find in the dashboard section of your Algolia profile. Application ID gives us access to indices and API keys give us the right to perform indexing operations.

React InstantSearch

Now that we have some decent knowledge about Algolia in its framework, let’s move on to InstantSearch for building Search UI.

Setting Up

InstantSearch has multiple versions. No matter what your front-end stack is, React InstantSearch is one of them.

You can find React InstantSearch in the npm registry.

> npm i react-instantsearch-dom algoliasearch

Getting Started

You can add an instant search component to your app using the code below.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
import algoliasearch from 'algoliasearch/lite';
import React, {
  Component
} from 'react';
import {
  InstantSearch,
  Hits,
  SearchBox,
  Pagination,
  Highlight,
  ClearRefinements,
  RefinementList,
  Configure,
} from 'react-instantsearch-dom';
import PropTypes from 'prop-types';
import './App.css';

const searchClient = algoliasearch(
  'B1G2GM9NG0',
  'aadef574be1f9252bb48d4ea09b5cfe5'
);

class App extends Component {
  render() {
    return (
      <div className="ais-InstantSearch">
        <h1>React InstantSearch e-commerce demo</h1>
        <InstantSearch indexName="demo_ecommerce" searchClient={searchClient}>
          <div className="left-panel">
            <ClearRefinements />
            <h2>Brands</h2>
            <RefinementList attribute="brand" />
            <Configure hitsPerPage={8} />
          </div>
          <div className="right-panel">
            <SearchBox />
            <Hits hitComponent={Hit} />
            <Pagination />
          </div>
        </InstantSearch>
      </div>
    );
  }
}

For our demonstration, we have added some CSS to our web app, src/App.css.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
body {
  font - family: sans - serif;
  padding: 1 em;
}

.ais - SearchBox {
    margin: 1 em 0;
  }

  .ais - Pagination {
    margin - top: 1 em;
  }

  .left - panel {
    float: left;
    width: 250 px;
  }

  .right - panel {
    margin - left: 260 px;
  }

  .ais - InstantSearch {
    max - width: 960 px;
    overflow: hidden;
    margin: 0 auto;
  }

  .ais - Hits - item {
    margin - bottom: 1 em;
    width: calc(50 % -1 rem);
  }

  .ais - Hits - item img {
    margin - right: 1 em;
  }

  .hit - name {
    margin - bottom: 0.5 em;
  }

  .hit - description {
    color: #888;
font-size: 14px;
margin-bottom: 0.5em;
}

As we have to manage the results we get and show them to the user, we can use HIT which renders the data according to the search query.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function Hit(props) {
  return (
    <div>
      <img src={props.hit.image} align="left" alt={props.hit.name} />
      <div className="hit-name">
        <Highlight attribute="name" hit={props.hit} />
      </div>
      <div className="hit-description">
        <Highlight attribute="description" hit={props.hit} />
      </div>
      <div className="hit-price">{props.hit.price}</div>
    </div>
  );
}

Hit.propTypes = {
  hit: PropTypes.object.isRequired,
};

Now it’s time to run our project and see the search UI.

> npm start

Then, open your browser and navigate to http://localhost:3000.
The browser should display:

Differences between Elasticsearch and Algolia

Both Elasticsearch and Algolia have some similarities and differences. Below we discuss some of those parameters.

Elasticsearch vs Algolia - Speed

As we know the major factor used to compare has to be speed, both provide a fast response on a real-time basis. Elasticsearch works great for document-related search but providing other user-friendly features takes a lot of effort, whereas Algolia is great at reducing latency. If we compare the speed of both, Algolia is about 200x faster than Elasticsearch.

Elasticsearch vs Algolia - Customers

Both Elaticsearcha and Algolia provide great features and are widely used in the tech industry. Elasticsearch has several popular customers, such as Adobe and Netflix.
Note: One can only add JSON data types to Algolia. As we know while uploading your data to Algolia it has to be formatted into JSON records.