Integrate Meilisearch with Statamic

April 17, 2024 · 3 min read

Are you looking to improve your Statamic site’s search and provide results faster? Meilisearch is a great choice. In this guide, we’ll show you how to add Meilisearch to Statamic so your users can find what they need easily.

Statamic Searching with Meilisearch

Before adding Meilisearch to your Statamic site, it’s important to understand how Statamic’s search works. We recommend reading our detailed explanation of Statamic Search first. Knowing this will help you use Meilisearch to improve your site’s search function.

Installing Meilisearch

Let’s install Meilisearch on your local machine. You need to have Homebrew installed and execute the following command in your terminal:

brew install meilisearch

Once installed, start Meilisearch with the command:

meilisearch

This will run Meilisearch on your system.

Meilisearch Statamic addon

With Meilisearch running, install the Meilisearch addon for Statamic. This addon lets Meilisearch work with your Statamic site. Install it with this command:

composer require statamic-rad-pack/meilisearch

Configure a new Search Driver

In your config/statamic/search.php config file, add a new Meilisearch driver to the drivers array. This configuration should include your Meilisearch host and secret, which you’ll reference from your environment variables for security and flexibility. We explain this in the following section.

Setup a new search index

We also need to define the Meilisearch index, set the news collection as the searchable content, and choose title and url as the fields for indexing. This will ensure the most relevant information is readily searchable. Now let’s edit the statamic search file config/statamic/search.php.

&lt;?php

return [

    /*
    |--------------------------------------------------------------------------
    | Default search index
    |--------------------------------------------------------------------------
    |
    | This option controls the search index that gets queried when performing
    | search functions without explicitly selecting another index.
    |
    */

    'default' => env('STATAMIC_DEFAULT_SEARCH_INDEX', 'default'),

    /*
    |--------------------------------------------------------------------------
    | Search Indexes
    |--------------------------------------------------------------------------
    |
    | Here you can define all of the available search indexes.
    |
    */

    'indexes' => [

        'default' => [
            'driver' => 'local',
            'searchables' => ['collection:posts'],
            'fields' => ['title', 'categories', 'tags'],
        ],

		'news' => [
			'driver' => 'meilisearch',
			'searchables' => 'collection:news',
			'fields' => ['title', 'url'],
		],

    ],

    /*
    |--------------------------------------------------------------------------
    | Driver Defaults
    |--------------------------------------------------------------------------
    |
    | Here you can specify default configuration to be applied to all indexes
    | that use the corresponding driver. For instance, if you have two
    | indexes that use the "local" driver, both of them can have the
    | same base configuration. You may override for each index.
    |
    */

    'drivers' => [

        'local' => [
            'path' => storage_path('statamic/search'),
        ],

		'meilisearch' => [
			'credentials' => [
				'url' => env('MEILISEARCH_HOST', 'http://localhost:7700'),
				'secret' => env('MEILISEARCH_KEY'),
			],
		],

    ],

    /*
    |--------------------------------------------------------------------------
    | Search Defaults
    |--------------------------------------------------------------------------
    |
    | Here you can specify default configuration to be applied to all indexes
    | regardless of the driver. You can override these per driver or per index.
    |
    */

    'defaults' => [
        'fields' => ['title'],
    ],

];

Refresh your news index

To synchronize your content with Meilisearch, use the following command to update your news index:

php please search:update name

This command will refresh the index with your latest content, making it immediately searchable.

Verify your setup locally

After indexing, navigate to your local Meilisearch web interface to confirm that your news collection entries populate the index. You can access it via:

http://localhost:7700

Seeing your content indexed confirms that you’re on the right track and ready for the next step.

Frontend searching with Alpine.js

For a better search experience on your site, use Meilisearch’s JavaScript library with Alpine.js. This lets you make a search component that gives quick and accurate results as users type.

Alpine.data("search", () => ({
    modalOpen: false,
    query: "",
    index: null,
    results: null,

    init() {
        const client = new MeiliSearch({
            host: process.env.MIX_MEILISEARCH_HOST,
            apiKey: process.env.MIX_MEILISEARCH_KEY,
        });

        this.index = client.index("news");
    },

    search() {
        this.$watch("query", async (query) => {
            if (query === "") return (this.results = null);

            this.results = await this.index.search(query, { limit: 10 });
        });
    },

    clear() {
        this.results = null;
        this.query = "";
        this.modalOpen = false;
    },
}));

And the template code:

<div x-data="search">
    <input placeholder="Search for news" type="text"
		   x-model="query" @click.outside="clear" @input="search">
    <template x-if="results">
        <template x-show="results.hits.length > 0" x-for="(hit, index) in results.hits">
            <a x-bind:href="hit.url">
                <h2 x-text="hit.title"></h2>
            </a>
        </template>
    </template>
</div>

Take Meilisearch to the Cloud

As you prepare to scale, sign up for a Meilisearch Cloud account and start a new project. After project activation, update your environment variables with the new Meilisearch host and key.

Make sure to update the search index again:

php please search:update news

Your documents are now searchable in the cloud, giving your Statamic site a scalable, professional search.

Conclusion

By following these steps, you’ve added Meilisearch to your Statamic site, giving your users a great search experience. Meilisearch makes sure your content is easy to find, whether you’re working locally or in the cloud.