How To Hack Algolia Search To Enhance React

Modern Applications are getting more common these days to be used to help us live a convenient life. They are building blocks of features and components. Searching the applications’ data store is one of the feature they poses. While adding a search feature into existing applications seem to be easy and straight forward. However, accomplishing search feature with performance in mind is a challenge to achieve. There are many third party solutions available and a couple of them are Elastic Search and Algolia Search.

Therefore, in today’s blog post we are going to explore Algolia Search. Algolia is a powerful tool to make our application optimized to be searched. Algolia stores our data in indexes, which can be accessed via Algolia Dashboard. We can upload or manually enter data into Algolia Indexes.

Furthermore, Algolia comes with two parts i.e. implementation and analytics. With implementation we can easily integrate Algolia in our applications. On Analytics perspective, which helps our business to figure out what users expectations are. Therefore, it leads to improvements in our applications.

In addition, Algolia supports many different programming languages both on front end and backend. In this blog post we are going to use it with React library. It offers several widgets and components that can be easily put into our React components. Later, a few configuration to the root Algolia component would make the search happen.

Before proceeding with this blog post, I would like to mention if your application has a requirement of connecting to a database. Then I explained that in one of my blog post which is AWS DynamoDB & Nextjs Building Real World App.

Let’s move on with our today’s topic. Below is how I will approach with this blog post.

Algolia Search Development Approach

1. Create Algolia Application
2. Make Sample Algolia Search Index
3. Create React Project
4. Install Dependencies to React Project
5. Setup Algolia Search Hook
6. Add Algolia Search Widget
7. Algolia Search Configuration

Create Algolia Application

To create a new Algolia application, we need to login to Algolia dashboard. Therefore, we need to have Algolia account. It is very easy to setup and register. Simply create an Algolia account by registering your details. Once you have them then login to Algolia which will lead you to its dashboard page.

The dashboard page will look something like above screenshot. Go ahead and Application Name at the top of the screen. Then, click on Create Application link from the dropdown menu. This will take you to the following page.

First enter the name for your application. I entered AlgoliaSearchAndReactjs as it fits with the context of our blog post. Secondly, select free version as that is what we are going to be using. Finally, click on Next Step: Data Center button. This will take us to the next page.

Since we are on the data center page. On this page we need to choose the geographic location of the data center that saves our data. Since Singapore is way more closer to my location. Therefore, I decided to choose that for now.

Next click on Review Application Details button. Which will take us to the page below.

Review your details you provided on previous pages. Then click Create Application once satisfied.

Make Sample Algolia Search Index

As we already have the application created. It is time to add some sample data in our index. Therefore, on the page above click on Load Sample Index button. This will load some sample data as shown below.

Phew. Now we have everything setup on Algolia’s dashboard perspective. Next, let’s move on to the next step i.e. Creating React project. Therefore, head to the next section.

Create React Project

To create react project or application, we will use the all famous create-react-app tool. Therefore, open your terminal first. Then execute below command in your list of projects folder.

npx create-react-app react-algolia

Above command should create a folder with the name of react-algolia. cd into that folder with command below.

cd react-algolia

Since we are in the root folder of our application therefore, we can install our dependencies from here onwards.

Install Dependencies to React Project

First, we need to have yarn installed on our system. Go ahead install it using npm install yarn -g. However, if it is already installed then execute commands below.

yarn add algoliasearch react-instantsearch-hooks-web

Above command should install algoliasearch and react-instantsearch-hooks-web. These packages are essential to make Algolia Search application work.

First dependency will help us configure Algolia search by providing Application Key and Application ID. In addition, we also need the second package is where we are going to import our Algolia search widgets and props we need to pass to those widgets.

Setup Algolia Search Hook

Above we installed necessary dependencies. Now we need to put them into our code. First go ahead and open /src/App.js file in your favourite code editor. Next import algoliaSearch from algoliasearch/lite package. Finally, call algoliasearch function and pass Application ID and your Algolia account Key as parameters.

Replace existing code in you App.js file with the code below.

In above code you need to pass two parameters to algoliasearch function. Therefore, we need to get those information from our Algolia Dashboard. First is the Application ID. Go to your application dashboard as demonstrated below.

Above screenshot shows by clicking the name of the Application will show a menu. Below your application name, there should be an ID. Simply click on the copy icon to copy it to clipboard. Now we need API KEY. Therefore, follow the below process to get one.

Let’s click on your profile icon as shown above at the top right corner. It will show a drop down menu. Next click on the settings link. It will redirect us to the settings page.

By clicking on API Keys will redirect us to its respective page as shown below.

From above screenshot there are two tabs. First we click on All API Keys tab. Then it will list all the available API Keys. As our interest is in Search-only API Key. Therefore, copy the Search-only API Key and paste it in the code above inside App.js React component. By the way, we could also have copied the Application ID on this page too.

Add Algolia Widget

a. Algolia Search InstantSearch^[2]

Moving on from where we left, it is time to add Algolia Search widget into the play. Replace all of the content in you App.js React functional component with the contents below.

Here, we are importing InstantSearch React provider at line 2. Inside JSX we are using it by providing a couple of mandatory props. First indexName and second searchClient. The second prop help us connect with Algolia API. The index prop is the where all of our data is stored. This index will be searched based on users’ queries.

We can also add some additional props to Algolia Search provider. Those are listed below.

1. initialUiState
2. onStatechange
3. stalledSearchDelay
4. routing

initialUIState is where we provide initialState such as query, number of pages. We can provide complicated attributes to make the search more user friendly. Or it can be as simple as single attribute.

Secondly, onStateChange allows us to write custom logic and update the UI manually. For low performance network we can utilize stalledSearchDelay with value in ms. If we would like to have the search query appear in url in browsers’ address bar. Then routing attributes would do that job by setting its value to true.

As Algolia Search is connected to its API. And it is available to our App component. We can move on and import other components. One of the component is SearchBox.

b. Algolia Search SearchBox^[1]

SearchBox is the main component where users type their query. Replace App.js contents with below code.

At line 2, I am importing SearchBox React component. Inside JSX, I am using it by providing placeholder prop to it. It is that simple. We can add some additional props to it to make it more customize. Let’s add few of them.

If we would like to alter users’ query we can use queryHook props. Which is a function. It accepts two arguments. The user query and search function. After altering the query, we have to call the search function. And pass the altered query as parameter to it.

By default, the search will trigger as users begin typing their query. We can pass a boolean prop i.e. searchAsYouType and set it false. This would trigger the search only when user click on search button. autoFocus would focus SearchBox on page load. Be default, the search button is an icon and we can customize it. submitIconComponent prop does that for us.

There are tons of props that we can add to which can be found on this page.

Now our App.js component looks like below.

c. Hits Component^[3]

Searching is doing great for now on business perspective. As we are understanding our users behaviour. Which gives us information about their expectations from our service. However, users would need their results to be displayed too on their screens. Which will make this feature valuable for them too. Algolia Search API provides Hits component for exact that reason. It renders the search results on our search page.

We are going to make use of hitComponent prop that it accepts optionally. hitComponent accepts a React component value which returns JSX. In our case, we will simply return the JSON format of our results. Therefore, our hitComponent is fairly simple.

Replace the contents of App.js file with the code below.

First I am importing Hits component at Line 2. Then using it after the SearchBox in JSX at Line 29 by providing hitComponent prop. At Line 6 I am creating a React functional component which returns hit search results in JSON format.

In addition to above, we can also create our own custom hit component and design it however, we want to. Let’s give that a try. This can be possible with the useHits reactjs hook. Let’s update our App.js react component as below.

I am importing useHits hook at Line 3. At Line 11, I am creating CustomHits reactjs functional component. Inside that functional component I am using useHits hook and returning JSX with the search results data.

Later in JSX at line 45, I am using that react component.

Algolia Configuration

The basics are done. Let’s play around with Algolia Search a bit more in its dashboard. If you open the main index page in dashboard like below.

Now click on Configuration tab as shown above. You should land ono configuration page.

You should be able to configure your Algolia search however, you want to. Rather than for me to go through each configuration. Go ahead and play with them use them with your likings.

Conclusion

In blog post, we created a simple Algolia Search page using Algolia Search API and Reactjs. We also went through some of its core components and their props. Later in the blog post, I showed the configuration part of Algolia on its dashboard. It is fairly easy to integrate however, you might need to dig more deep for complex use cases.

About Author

https://github.com/zafar-saleem

https://linkedin.com/in/zeesaleem

https://blog.logrocket.com/author/zafarsaleem/

Sources

^[1]https://www.algolia.com/doc/api-reference/widgets/search-box/react-hooks/

^[2]https://www.algolia.com/doc/api-reference/widgets/instantsearch/react-hooks/

^[3]https://www.algolia.com/doc/api-reference/widgets/hits/react-hooks/