How to integrate a relevant search into Strapi v4 using Meilisearch
Tags: tutorial, meilisearch, strapi, webdev
Published: 2022-06-13 16:42:25

This tutorial will show you how to integrate Meilisearch with Strapi v4 to create a search-based web app.

## Introducing our tools

### Strapi
[Strapi](https://strapi.io/) is a headless CMS. It provides a quick way to create a back-end where we can add and store data. The data is then available through a REST or GraphQL API without having to code anything or configure our database.

### Meilisearch
[Meilisearch](https://docs.meilisearch.com/learn/what_is_meilisearch/overview.html#what-is-meilisearch) is a fast, open-source search engine that's easy to use and deploy. The aim of Meilisearch is to create an out-of-the-box relevant search experience in very few steps, with no configuration needed.

## Requirements
To be able to follow this tutorial, you'll need the following:
- An open [terminal or command prompt](https://www.ionos.com/help/email/troubleshooting-mail-basicmail-business/access-the-command-prompt-or-terminal)
- [Node.js](https://nodejs.org/en/download/) >= 12 <= 16
- NPM and NPX (v6 only) (installed with Node.js): package managers that help you access and use JS libraries

## Create a directory for our app
Let’s create a directory called `my-app` where we will add our back and front-end parts of the application.
```bash
mkdir my-app
cd my-app
```

## Create a back-end using Strapi
Our first step is to generate a back-end API using Strapi. Go to your open terminal window and run the following command:
```bash 
npx create-strapi-app@latest back --quickstart
```

This command creates a Strapi app in a new directory called `back` and opens the admin dashboard. Create an account or log in so that you have access to it.

<img alt="Strapi signup form" src="https://blog.meilisearch.com/content/images/2022/04/Capture-d-e-cran-2022-04-08-a--11.27.18-1.png" style="max-width: 100%; height: auto" />

Once you have created your account, you should be redirected to Strapi's admin dashboard. This is where we will configure our back-end API.

Our next step is to create a new collection type. A collection is like a blueprint of your content—in this case, it'll be a collection of restaurants. We will create another collection called "Category" to organize our restaurants later.

![Capture-d-e-cran-2022-04-08-a--11.34.17-2--1](https://blog.meilisearch.com/content/images/2022/04/Capture-d-e-cran-2022-04-08-a--11.34.17-2--1.png)

To follow along, complete the first 4 steps of "Part B: Build your content" from [Strapi's quick start guide](https://docs.strapi.io/developer-docs/latest/getting-started/quick-start.html). These will include:
- creating collection types
- creating new entries
- setting roles & permissions
- publishing the content

After finishing step 4 of Strapi's quick start guide, two new collections named `Restaurant` and `Category` should have appeared under `Content Manager` > `Collection Types`. If we click on `Restaurant`, we can see that there is only one. Let's add more by clicking the `+ Create new entry` button in the upper-right corner of the dashboard!

![Capture-d-e-cran-2022-04-08-a--18.27.41---copie-1--1](https://blog.meilisearch.com/content/images/2022/04/Capture-d-e-cran-2022-04-08-a--18.27.41---copie-1--1.png)

We’ll add three restaurants, one by one. For each restaurant, you need to press `Save` and then `Publish`.
- Name: `The Butter Biscotte.` Description: `All about butter, nothing about health.`
 Let’s add the `French food` category on the bottom right corner of the page 👇
 
 ![Capture-d-e-cran-2022-04-08-a--18.33.44-2](https://blog.meilisearch.com/content/images/2022/04/Capture-d-e-cran-2022-04-08-a--18.33.44-2.png)

- Name: `The Slimy Snail` Description: `Gastronomy is made of garlic and butter.` Category: `French food`

- Name: `The Smell of Blue` Description: `Blue Cheese is not expired, it is how you eat it. With a bit of butter and a lot of happiness.` Category: `French food`

Once the three restaurants have been added, you should end up with the following page:

![Capture-d-e-cran-2022-04-08-a--18.42.35-1](https://blog.meilisearch.com/content/images/2022/04/Capture-d-e-cran-2022-04-08-a--18.42.35-1.png)

Our Strapi back-end is now up and running! Strapi automatically creates a REST API for our `Restaurants` collection. Check out Strapi's documentation for all available [API endpoints](https://strapi.io/documentation/developer-docs/latest/developer-resources/content-api/content-api.html#api-endpoints).

Now, it's time to bring Meilisearch into the mix.

## Launch and start Meilisearch
There are multiple ways to [download and run a Meilisearch instance](https://docs.meilisearch.com/learn/getting_started/installation.html#download-and-launch), we will be using [Docker](https://www.docker.com/) here.

Want to avoid a local installation? To quickly create a best-in-class search experience, we offer the convenience of [Meilisearch Cloud](https://cloud.meilisearch.com/), a hosted and fully‑managed version of Meilisearch. If you would like to try it, you can still [register on the waiting list](https://meilisearch.typeform.com/to/FtnzvZfh?typeform-source=www.meilisearch.com) or wait for the public release planned a few weeks from now.

**Open a second terminal window** and move to the `my-app` directory. This window will be used to run Meilisearch. Execute the command below to download and install Meilisearch with Docker. If Docker doesn't work for you, consider trying one of the [many other methods](https://docs.meilisearch.com/learn/getting_started/installation.html#download-and-launch).

```bash
# Fetch the latest version of Meilisearch image from DockerHub
docker pull getmeili/meilisearch:latest

# Launch Meilisearch
docker run -it --rm \
    -p 7700:7700 \
    -v $(pwd)/data.ms:/data.ms \
    getmeili/meilisearch:latest
```
You should see a big chunk of text (including some ASCII art) confirming that Meilisearch is up and running.

![Capture-d-e-cran-2022-04-08-a--18.44.16-1](https://blog.meilisearch.com/content/images/2022/04/Capture-d-e-cran-2022-04-08-a--18.44.16-1.png)

Find the line titled `Server listening on`. This lets us know where Meilisearch is being served. Once you've found it, open this address in your browser.

![Capture-d-e-cran-2022-04-08-a--18.47.49-1](https://blog.meilisearch.com/content/images/2022/04/Capture-d-e-cran-2022-04-08-a--18.47.49-1.png)

This is the Meilisearch [search preview](https://docs.meilisearch.com/learn/what_is_meilisearch/search_preview.html). It will remain empty until we add some data to our Meilisearch instance.

It’s time to connect Strapi and Meilisearch and start searching through our data.

## Connect Strapi and Meilisearch
In order to add the Meilisearch plugin to Strapi, we need to quit our Strapi app. Go to the terminal window running Strapi (*make sure it's not the one running Meilisearch!*) and push `Ctrl+C` to kill the process.

Once you've done that, install the plugin in the `back` directory.

```
cd back
npm install strapi-plugin-meilisearch
```

After the installation, we have to rebuild our Strapi app before starting it again in development mode, since it makes configuration easier.
```
npm run build
npm run develop
```

At this point, our Strapi app should be running once again on the default address: [http://localhost:1337/admin/](http://localhost:1337/admin/). Visiting it in your browser, you should see an admin sign-in page; enter the same credentials as before.

Once connected, you should see the new `meilisearch` plugin on the left side of the screen. 

![Capture-d-e-cran-2022-04-08-a--19.01.53-1](https://blog.meilisearch.com/content/images/2022/04/Capture-d-e-cran-2022-04-08-a--19.01.53-1.png)

To add your Meilisearch credentials, click on the `Settings` tab on the meilisearch plugin page so that Strapi knows where to send our data.

For example, using the credentials from the **Launch and start Meilisearch** section above, add the address serving Meilisearch in the `Meilisearch Host` field, then click the `Save` button.

![Capture-d-e-cran-2022-04-08-a--19.06.13-1](https://blog.meilisearch.com/content/images/2022/04/Capture-d-e-cran-2022-04-08-a--19.06.13-1.png)

Note that we leave `Meilisearch API Key` blank because we launched Meilisearch without a [master key](https://docs.meilisearch.com/reference/features/configuration.html#master-key).

Now it's time to add your Strapi collection to Meilisearch. In the `Collections` tab on the `meilisearch` plugin page, you should see the `restaurant` and `category` content-types.

By clicking on the checkbox next to `restaurant`, the content-type is automatically indexed in Meilisearch.

![strapi-gif](https://blog.meilisearch.com/content/images/2022/04/strapi-gif.gif)

As you can see in the GIF above, the word “Hooked” appears when you click on the restaurant's checkbox in the `Collections` tab. This means that each time you add, update or delete an entry in your restaurant content-types, Meilisearch is automatically updated!

Once the indexing finishes, your restaurants are in Meilisearch. We can now go back to our Meilisearch host address: [http://127.0.0.1:7700](http://127.0.0.1:7700). After refreshing, you should observe that the page is no longer empty. Try typing “butter” in the search bar and see what happens 😉

![butter-gif](https://blog.meilisearch.com/content/images/2022/04/butter-gif.gif)

As you can see, your Strapi entries are sent to Meilisearch as is. You can modify the data before sending it to Meilisearch, for instance by removing a field. Check out all the customization options on the [strapi-plugin-meilisearch](https://github.com/meilisearch/strapi-plugin-meilisearch/#customisation) page.

## What’s next?
Now that you have your Strapi collections in Meilisearch, you can [start searching](https://docs.meilisearch.com/reference/api/search.html)!

Learn how to [set up instant-meilisearch](https://blog.meilisearch.com/instant-meilisearch/) to integrate a search-as-you-type experience into your front end in no time at all!

If you have any questions, please join us on [Slack](https://meilicommunity.slack.com/). If you like Meilisearch, [a star on GitHub](https://github.com/meilisearch/meilisearch) means a lot.