Using Algolia with Laravel Scout

Photo by Marin Tulard on Unsplash

What is Algolia?

Algolia is one of the most popular full-text search services.

They have the libraries for different programming languages to integrate full-text search to the your application:

• on the back-end (Symfony, Laravel, Django, etc.);
• on the front-end (VanillaJS, React, Vue, etc.).

For instance, you can implement the search page by Vue using the open-source library VueInstantSearch and at the same time implement a back-end using Laravel Scout to automatically add new entities to the Algolia.

For the Vue front-end, they have a lot of predefined components such as Search Box, Autocomplete, Refinement List, Range Slider, Hits, Pagination, etc. we will touch more detail on this a little further.

You can see a full Vue demo here.

Getting Algolia setup with Laravel

Laravel has its own package to support Algolia search engine, called Laravel Scout. This package simplifies the task of integrating Algolia search into your system.

To install the Laravel Scout do:

composer require laravel/scout
php artisan vendor:publish --provider="Laravel\Scout\ScoutServiceProvider"

Under the hood, the Laravel Scout doing a lot of work but you just need to use the Searchable trait in your Eloquent model which you want to map to Algolia index (the index in Algolia is like a database).

For example, make the Contact model as Algolia mapped entity:

<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
use Laravel\Scout\Searchable;
class Contact extends Model
{
    use Searchable;
}

You can also write your own search engine driver for the Laravel Scout, or for more information about it you can check the official documentation.

Using Algolia with Vue front-end

The VueInstantSearch is Algolia team’s built open-source UI library for Vue. The library contains different types of predefined components that can be easily extended if needed.

To use VueInstantSearch you should install it via npm:

npm install --save vue-instantsearch algoliasearch

Then register the InstantSearch in the resources/assets/js/app.js:

...
import InstantSearch from 'vue-instantsearch';
Vue.use(InstantSearch);
...

And create a new Vue component in the folder resources/assets/js with the required root component <ais-instant-search>:

<template>
    <ais-instant-search
      index-name="instant_search"
      :search-client="searchClient"
    >
      <!-- Put widgets here -->
</template>
<script>
    import algoliasearch from 'algoliasearch/lite';
    export default {
      data() {
        return {
          searchClient: algoliasearch(
            'YourApplicationID',
            'YourSearchOnlyAPIKey'
          ),
        };
      },
    };
</script>

The Algolia widgets should be added into the element <ais-instant-search>.

Out of the box, VueInstantSearch has the widgets:

• <ais-hits> - show the search results;
• <ais-infinite-hits> - the search results with the "Show more" button;
• <ais-pagination - the pagination of the search results;
• <ais-search-box> - the input search field;
• <ais-range-slider> - the range input, it's good to use as price range selector;
• <ais-refinement-list> - the list with the criteria checkboxes;
• <ais-sort-by> - sorting of results;
• etc.

Using ElasticSearch with Laravel

There are third party libraries to support ElasticSearch, we’ll cover this topic in the future articles.

Conclusion

In this article we hope that you learned a bit about using Laravel Scout and VueInstantSearch, to get you started integrating full text search into your existing application. Although there are a couple of options when it comes to search platforms, it is our belief that Algolia provides a lot easy wins, freeing up your time to spend building other important features into your application.