Build a Production grade Search experience using Algolia & MongoDB. (No Webserver Required )

Obtaining Lightening fast search results is a dream come true for any dynamic website. This blog aims establishing production grade search capabilities “Without even building a Webserver !” . That is right , i am going to walk you through simple steps to make your website capable of displaying the content of your MongoDB database on your frontend website at lightening fast speed by using Algolia.

First of all we should understand what Algolia actually is ?

Algolia Official Logo

Algolia is a company which provides “search as a service” to its clients by providing an api for searching across a client’s website by using an externally hosted search engine which provides Lightening fast results !

So how are we going do it ?

For this basic tutorial i am going to use NoSQL MongoDB database , vanilla javascript and no webserver whatsoever. Generally if we add a webserver built using NodeJS , RubyOnRails etc. between our algolia indices and frontend stack the optimisation level can be improved up a notch but building a well organised backend webserver takes some time well at least for beginners, i will cover incorporating a webserver between the frontend and algolia indices in my upcoming blogs. This blog is focusing on generating results in matter of minutes, so all we need is our Frontend stack , algolia indices and MongoDB database.

Algolia Integration Official Integration pic

Step 1 : Create an algolia account and go to the dashboard. Go to indices section and then select Create Index option. Lets just name our first index “Experiment_1".

Creating an algolia Index

Now there is little bit problem that you might face while hitting search queries on your algolia indices. Algolia recommendation for indices search results is a pagination of 50 pages for optimum results but well we can change the pagination limit and hits per page in the configuration tab of an index.

Step 2 : Change the pagination limit in the Configuration > Pagination and Display > Pagination tab. In this case i have set the pagination limit to 4000 from the default 1000. The default configuration provides around 50 pages with 20 hits per page. Save and Update the changes.

Setting hits per page and pagination limit from algolia dashboard

Step 3: Move the content of your MongoDB database to your algolia index. For this i have written a simple python script nothing fancy.

You Can get the above code from my github : [ https://gist.github.com/arneesh/b8f5dd3d0bfecac6256af712a1c6cafd]

Just replace the “Your_Application_ID”, “Your_API_Key”, “Your_MongoDB_Connection_String”, “Your_MongoDB_Database” & “Your_MongoDB_Collection” in the code with your respective values for these variables.

Step 4 : Time to setup our frontend javascript file. For this tutorial i am creating three basic files index.html , styles.css & script.js .

The index.html and styles.css files can be designed as per your wish , i am going to cover the searchbox and hits container component of the index.html file in this tutorial. You need to import the basic header files of algolia javascript from the algolia documentation . Here is the link :

https://www.algolia.com/doc/guides/getting-started/quick-start/tutorials/quick-start-with-the-api-client/javascript/

There are two ways to incorporate algolia in your frontend stack , either using the CDN header files or by using npm , installation using npm and CDN header files can we found in the above official link and algolia javascript examples. All that is pretty basic stuff so i wont be covering that here.

Surviving In A Digital Age of Instability | Data Driven Investor

After importing all the required header files or installing using npm server . build the basic header & body components in the index.html file and create two div’s for search and hits. I will add pagination and index switching index.html divs along with their widget explanation in Step 5 of this tutorial.

<div class="searchbox-container" id="searchbox"></div>
<div id="hits"></div>

You can add tons of elements you desire in your html file , algolia provides various feature ready to use templates / widgets which can be added to improve the functionality of the website.

Step 5 : Lets move to the script.js file . This is the file where is actual magic happens , algolia provides us with an api key and application id and by accessing that we can set up of lightening fast search client base in a matter of minutes.

var search = instantsearch({
  indexName: 'Experiment_1',
  searchClient: algoliasearch('Your_Application_ID', 'Your_API_Key'),
  routing: true,
});

Algolia has made ready to use widgets for various website components like searchbox , pagination and so on , we are going to use some of them here.

Search Box Widget

search.addWidget(
  instantsearch.widgets.searchBox({
    container: '#searchbox',
    showReset: false,
    cssClasses: {
      root: 'root',
      form: 'form',
      input: 'input form-control',
      submit: 'btn btn-default',
      reset: 'btn btn-default',
    },
  })
);

Pagination Widget

search.addWidget(
  instantsearch.widgets.pagination({
    container: '#pagination',
    cssClasses: {
      root: 'root',
      list: 'pagination',
      disabledItem: 'disabledItem',
      selectedItem: 'selectedItem',
    },
  })
);

An essential component of a full fledged search experience is the ability to switch between indices . We can do that by tweaking the sort-by widget a little bit to fulfil our needs ; )

Sort By widget ( For switching between indices )

search.addWidget(
  instantsearch.widgets.sortBy({
    container: '#sort-by',
    items: [
      { value: 'Experiment_1', label: 'Experiment_1' },
      { value: 'Experiment_2', label: 'Experiment_2' },
      { value: 'Experiment_3', label: 'Experiment_3' },
],
    label: 'sort by',
  })
);

Create a simple div for switching between indices in your index.html file which is connected to the above javascript codebase.

<div class="sort-by"><div id="sort-by"></div></div>

The most important widget in this entire process is the hits widget and hits template.

Hits Widget & Configuring it

search.addWidget(
  instantsearch.widgets.hits({
    container: '#hits',
    hitsPerPage: 20,
    templates: {
      empty: noResultsTemplate,
      item: hitTemplate,
    },
    transformItems: function(items) {
      return items.map(function(item) {
        item.stars = [];
for (var i = 1; i <= 5; ++i) {
          item.stars.push(i <= item.rating);
        }
return item;
      });
    },
    cssClasses: {
      list: 'list',
    },
  })
);

Note : Although you can define some of your configuration of hits widget here but some of them cant be overridden from your script.js file . For example “hitsPerPage” , no matter what number of hits per page you set here , it wont give you results , for these essential components algolia will always use the settings which you have set in the dashboard so set the appropriate value of Pagination and hitsPerPage in the index dashboard itself. There is another way of overriding it but you will need a backend webserver for that , its but a couple of lines of code , i will add the code here but wont be covering the webserver part in this tutorial. So for now set the hitsPerPage and Pagination from the dashboard itself as i have explained in Step 2 of this tutorial.

NodeJS Server — ( Not Part of this tutorial )

index.search({
  query: 'query',
  hitsPerPage: 20
}).then(res => {
});

If you want to create a webserver, altering “hitsPerPage” is as easy as the above code snippet.

Hits Template — ( create as per your need)

Each component of the template needs to be encase between single quotes ( ‘ ) and each line ends with a connector to next line i.e ( + ) sign. A sample is provided below.

var hitTemplate =
  '<div class="hit media">' +
 '<div class="product_name"><h4><b>Name: {{Your_Json_Path_to_Required_Component}}</b></h4></div>'+
  '<hr/>'+
  '<div class="product_name"><h4 style="color:red;text-shadow: 2px 2px 4px #ffg;">Target Image</h4></div>'+
  '</div>';

Sample Traversal down json path :

{{response.query_item._source.name}}

You just need to provide the path to the object whose value you want to extract from the algolia index. Algolia index has values in the form of json. You can extract desired values from the json objects. I have attached a sample below. This can be found inside your algolia index. Click on the Edit button ( the little pencil icon at the lower right corner ) and you can view the json from there if your json object is very long.

A sample json object inside an algolia index contaning key values pairs ( erased keys from this image )

This is it , you are done with your basic, lightening fast and development time friendly search stack.

Thank You !
My LinkedIn : Visit Me on LinkedIn

Gain Access to Expert View — Subscribe to DDI Intel