**Introduction**
----------------

If there's one feature Firebase is missing, it’s a good and efficient way for searching through data. Their [documentation](https://firebase.google.com/docs/firestore/solutions/search) suggests using a third-party solution:

> "Cloud Firestore doesn't support native indexing or search for text fields in documents. \[…\] To enable full-text search of your Cloud Firestore data, use a dedicated third-party search service."

[Firestore-meilisearch](https://github.com/meilisearch/firestore-meilisearch), Meilisearch’s official Firebase extension, synchronizes documents between a Cloud Firestore collection and a Meilisearch index, monitoring each time you create, update, or remove documents from that index. This ensures the data in Meilisearch mirrors your content in Cloud Firestore, effectively enabling you to create a fully-featured search experience.

In this tutorial, we'll show you how to install the `firestore-meilisearch` extension on your Firebase instance and add full-text search to your Cloud Firestore.

Tools
-----

*   **Firebase:** Firebase is a platform developed by Google to help developers create mobile and web applications. It is a fully managed back-end service that provides an infrastructure for web applications that handles everything from user authentication and server scaling to crash analytics and reliable testing environments.
*   **Meilisearch:** Meilisearch is a fast, open-source search engine that's a joy to use and deploy. Meilisearch allows you to create a relevant search experience out of the box in very few steps and with no configuration needed.

**Requirements**
----------------

**To run this project, you will need:**

*   A Google account with a billing profile set up
*   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/) {">= 14 && <= 17"}
*   [npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) >= v7

**Steps**
---------

Here's a summary of what we're going to do to create a nice search interface with Firebase and Meilisearch:

1.  Deploy Meilisearch
2.  Create a Firebase project
3.  Install Meilisearch’s Firebase extension
4.  Set up a search interface

**Deploy Meilisearch**
----------------------

For this tutorial, you will need a Meilisearch instance running on a cloud service. There are many ways [to deploy a Meilisearch instance](https://docs.meilisearch.com/learn/getting_started/quick_start.html#cloud-deploy). The easiest way to spawn a Meilisearch instance is using [Meilisearch Cloud](https://cloud.meilisearch.com/login), there's a free 14-day trial, no credit card required.

**Create Firebase project**
---------------------------

**Note:** you can skip this step if you already have a Firebase Project with a Firestore Database containing your documents.

Once we have our Meilisearch instance up and running, we can create a Firebase project, configure it, and add a Firestore database.

### Create **a project**

Follow the [Firebase documentation](https://firebase.google.com/docs/web/setup#create-project) to start your own project.

You should now have a project on your Firebase account that looks a bit like this:

![A look at a fresh new Firebase account settings](https://unable-actionable-car.media.strapiapp.com/Screenshot_2022_04_04_at_15_24_56_1_491fb374a2.png)

Once we have created a Firebase account and our project, we will need to add a Firestore Database to our project. Consult [Firebase’s documentation](https://firebase.google.com/docs/firestore/quickstart) for more instructions.

**Install Meilisearch extension**
---------------------------------

We now are ready to install the Meilisearch extension on our project.

### ⚠️  **Billing**

To install an extension, [your Firebase project must be on a special billing plan](https://github.com/meilisearch/firestore-meilisearch#billing) that will charge you at least 1 cent a month.

### Install and authorize `firestore-meilisearch`

To install the [`firestore-meilisearch`](https://github.com/meilisearch/firestore-meilisearch) extension on your Firebase project just follow this [link that will redirect you to your Firebase console](https://console.firebase.google.com/project/_/extensions/install?ref=meilisearch%2Ffirestore-meilisearch@0.1.3).

Select the project in which you want to install the extension. You will then have access to the installation panel. The panel consists of three main steps, with a final extension configuration section at the end:

1.  **Early Access Partner extension:** find `firestore-meilisearch` under Extensions Publisher Early Access Program, select it, and click on “Next”
2.  **Review billing and usage:** Firebase will inform you about the charges incurred by using extensions, which we recommend you read carefully. If Firebase offers the option, click on “Update project to continue;” otherwise, click on “Next”
3.  **Review APIs enabled and resources created:** Firebase will also give you more information about [Cloud Functions](https://firebase.google.com/docs/functions), a set of Firebase functionality we use in this extension. These instructions explain how Cloud Functions are triggered and their key capabilities

### **Configure `firestore-meilisearch`**

The fourth and final step for activating `firestore-meilisearch` is configuring it.

![Configuring the Meilisearch extension in Firebase](https://unable-actionable-car.media.strapiapp.com/Screenshot_2022_04_04_at_13_57_34_8e12fb4018.png)

1.  **Cloud Functions location:** select the region where the backend code will be called whenever a document is added, updated, or deleted from Firestore. We recommend selecting regions close to your users and your Meilisearch instance
2.  **Collection path:** the name of the Firestore collection you want to mirror in a Meilisearch index
3.  **Fields to index in Meilisearch (Optional):** optional setting gives you the possibility to only index some of the fields in the documents contained in your Firestore database
4.  **Meilisearch Index Name:** the name of the Meilisearch index containing your Firestore data. Meilisearch will automatically created this index if it doesn’t exist
5.  **Meilisearch host:** the URL of your Meilisearch instance
6.  **Meilisearch API key (Optional):** a Meilisearch API key with permission to perform actions on indexes. For more info on API keys, consult our [security guide](https://docs.meilisearch.com/learn/security/master_api_keys.html).

You can also install this extension via the command line. To do so, make sure you've got the [Firebase Command-Line tools installed](https://firebase.google.com/docs/cli), then run the following command:

```bash
firebase ext:install meilisearch/firestore-meilisearch --project=(your project ID)

```

### Check if everything is working!

Suppose we are creating an application that allows users to search through a database of movies. Our first step is to create a collection named `movies` in Firestore:

![Starting a collection on Firebase](https://unable-actionable-car.media.strapiapp.com/Screenshot_2022_04_21_at_18_49_25_c4de0afa47.png)

We can use Firestore Database’s access panel to manually add a movie document:

![Adding a document to Firebase](https://unable-actionable-car.media.strapiapp.com/Screenshot_2022_04_21_at_12_50_35_1_d5f5577498.png)

This is the data we are using in our example:

```raw
title
    The Hobbit: An Unexpected Journey

poster
    <https://image.tmdb.org/t/p/w500/yHA9Fc37VmpUA5UncTxxo3rTGVA.jpg>

overview
    Bilbo Baggins, a hobbit enjoying his quiet life, is swept into an epic quest by Gandalf the Grey and thirteen dwarves who seek to reclaim their mountain home from Smaug, the dragon.

release_date
    1353888000
```

Once you added this movie, you should be able to see it when accessing your instance’s [search preview](https://www.meilisearch.com/docs/learn/what_is_meilisearch/search_preview):

![Search preview of Meilisearch with a first document](https://unable-actionable-car.media.strapiapp.com/Screenshot_2022_04_21_at_12_51_45_2_7a422f3d42.png)

**Well done! You have successfully installed the Meilisearch Firestore extension!**

From now on, whenever you add, update, and delete documents from your Firestore collection they will be mirrored in the same way in your Meilisearch instance.

<Callout>
  This extension does not export all existing documents in Meilisearch unless they have been modified or created after its installation. You can run the import script provided by this extension to retrieve your dataset in Meilisearch with all documents present in your Firestore collection. For more information, check the [dedicated guide](https://github.com/meilisearch/firestore-meilisearch/blob/main/guides/IMPORT_EXISTING_DOCUMENTS.md) in our `firestore-meilisearch` repository.
</Callout>

### Managing your extension

To access the overview panel of the extension, first click on the “Extensions” tab on Firebase’s sidebar menu, then find the Meilisearch extension and click on “Manage.”

![Finding the Extensions tab in Firebase](https://unable-actionable-car.media.strapiapp.com/Screenshot_2022_04_04_at_18_42_52_58b56d1e77.png)

![Finding the Manage settings of meilisearch extension](https://unable-actionable-car.media.strapiapp.com/Screenshot_2022_04_04_at_18_29_51_1_c0cfafa489.png)

You will be directed to a page where you can access all the information about your extension, change its configuration, or even delete it.

![Configuring the Meilisearch extension for Firebase](https://unable-actionable-car.media.strapiapp.com/Screenshot_2022_04_04_at_18_30_06_e35e907ca8.png)

Accessing your logs allows you to monitor your cloud functions and obtain different levels of information. You may access an extension’s logs via the “Extensions” tab. Alternatively, you can also visit the “Functions” tab, then select “Logs,” as indicated in the image below.

![Finding the Functions tab in Firebase](https://unable-actionable-car.media.strapiapp.com/Screenshot_2022_04_04_at_18_34_39_3eee0c3654.png)

![Finding the Logs tab in the Function menu of Firebase](https://unable-actionable-car.media.strapiapp.com/Screenshot_2022_04_04_at_18_34_23_a40c6dba99.png)

![Looking at the logs to monitor Cloud Functions](https://unable-actionable-car.media.strapiapp.com/Screenshot_2022_04_04_at_18_33_57_561839c8a6.png)

![Isolating an interesting log of our Firebase extension](https://unable-actionable-car.media.strapiapp.com/Screenshot_2022_04_05_at_16_13_16_358ff97a54.png)

Set up a search interface
-------------------------

We are done with installing and configuring the `firestore-meilisearch` extension, but it's no fun if we don't get to try the search in an actual front-end application. In this optional part, we will see how to create a search bar for your project using [instant-meilisearch](https://github.com/meilisearch/meilisearch-js-plugins/tree/main/packages/instant-meilisearch).

### **Populating your Firestore collection with data**

The first thing we need to do is add more documents to our Firestore database. In our case, we are going to use this [collection of movies](https://www.meilisearch.com/movies.json). Consult Firebase documentation for more information on [how to add and manage data](https://firebase.google.com/docs/firestore/manage-data/add-data).

Once you are finished adding content to your Firestore database, visit your instance’s [search preview](https://www.meilisearch.com/docs/learn/what_is_meilisearch/search_preview) to check your documents have been successfully indexed by Meilisearch.

![Search preview of the Firestore database](https://unable-actionable-car.media.strapiapp.com/Screenshot_2022_04_04_at_18_10_11_4e741a00b9.png)

### **Search in your document**

Now let's create a great search experience! There are many ways to do this, but we’ll keep it simple this time and use `instant-meilisearch`, our plugin for the `instant-search` JavaScript library. Read our article on [instant-meilisearch](/blog/instant-meilisearch/)o learn more.

Create an`index.html`file in your preferred development environment. This HTML page should contain a search bar and a box to contain the returned search results:

```bash
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meilisearch demo</title>
    <link rel="stylesheet" href="<https://cdn.jsdelivr.net/npm/instantsearch.css/themes/algolia-min.css>" />
</head>
<body>
    <div>
        <div id="searchbox"></div>
        <div id="hits"></div>
      </div>
  
      <script src="<https://cdn.jsdelivr.net/npm/@meilisearch/instant-meilisearch/dist/instant-meilisearch.umd.min.js>"></script>
      <script src="<https://cdn.jsdelivr.net/npm/instantsearch.js@4>"></script>
      <script>
          const searchClient = instantMeiliSearch(
              'your Meilisearch url',
              'your Meilisearch API key'
            )
            const search = instantsearch({
              indexName: 'movies',
              searchClient
            })

            search.addWidgets([
              instantsearch.widgets.searchBox({
                container: '#searchbox',
              }),
              instantsearch.widgets.hits({
                container: '#hits',
                templates: {
                  item: `
                    <div style="text-align:center;">
                      <div class="hit-name">
                        {{#helpers.highlight}}{ "attribute": "title" }{{/helpers.highlight}}
                      </div>
                      </br>
                      <div>
                        <img src="{{poster}}" width="200px" />
                      </div>
                    </div>
                  `,
                },
              }),
            ])

            search.start()
      </script>
</body>
</html>

```

Don’t forget to replace the example’s configuration with your own data. This might include the `indexName`, if you named your index something other than `movies`, your instance’s URL, and your API key.

If everything went well, you should be able to access your `index.html` file and start searching right away:

![Showing how the search functionality works](https://unable-actionable-car.media.strapiapp.com/Apr_05_2022_12_55_55_66890e7900.gif)

**Congrats!** You have added full-text search capability to your Cloud Firestore. Your Firebase collection and your Meilisearch index will automatically stay in sync as long as the `firestore-meilisearch` extension is installed.

Thanks for following this little tutorial! Questions, comments, suggestions? Don't hesitate to [get in touch with us on GitHub](https://github.com/meilisearch/firestore-meilisearch)—trust us, we love your feedback.

Create a search interface with Firebase and Meilisearch

Oyez, oyez! A new version of Meilisearch is out and brings you a bunch of cool new features including a long-requested one: typo tolerance customization!

We have been receiving feedback from users on wanting to disable or fine-tune typo tolerance for some time. Meilisearch v0.21 introduced phrase search, which returns documents containing the exact query terms if they are enclosed within double-quotes like: `“african-american poet”`.

It was a big step towards meeting our users’ needs, but it was not enough. After carefully studying the matter, the time has come: **the customization of typo tolerance** is a reality 🎉

But hang on, what does custom typo tolerance really mean? And even more important, what does typo tolerance mean?

The good old default behavior
-----------------------------

Meilisearch is typo tolerant, meaning it understands your search even if there are typos. But with great power comes great responsibility, which means setting boundaries to keep results relevant. This translates into the following three rules:

1.  No typo is allowed if the query word is less than 5 characters long
2.  Only 1 typo is allowed if the query word is between 5 and 8 characters long
3.  2 typos are allowed if the query word is more than 8 characters long

So if you are looking for `lost` but accidentally type `last`, you wouldn't get the desired result because it’s 4 characters long.

But, typing `greeec`instead of `greece` would retrieve the expected documents because it’s 6 characters long, so one typo is allowed.

These rules are applied by default and are part of the out-of-the-box configuration of Meilisearch, providing a powerful and relevant search. Yet, as they say, rules are meant to be broken...

Customization: a new horizon of possibilities
---------------------------------------------

We know every project is different, and some users need to configure typo tolerance to suit their projects’ particularities. We hear you!

Let’s take a look at the new typo tolerance settings:

```json
"typoTolerance": {
    "enabled": true, 
    "minWordSizeForTypos": {
        "oneTypo": 5,
        "twoTypos": 10
    },
    "disableOnWords": [],
    "disableOnAttributes": []
}

```

Looking at the `typoTolerance` object above, you can now:

*   Disable typo tolerance entirely by setting `"enabled": false` 😱
*   Disable typo tolerance partially on a set of specific terms using `"disableOnWords"`
*   Disable typo tolerance on desired document attributes `"disableOnAttributes"`

You can also fine-tune the typo tolerance settings by modifying the minimum size of a word to accept one or two typos.

In sum, you have complete control of the feature.

<Callout>
  For more in-depth information on typo tolerance customization, you can read the [dedicated section](https://docs.meilisearch.com/learn/configuration/typo_tolerance.html) of the documentation.
</Callout>

Try it out and see
------------------

They say a picture is worth a thousand words (I can't stop with the catchphrases, sorry); that’s why I’ve created a demo to show how different typo tolerance configurations can impact the returned search results. **You can test it [here](https://typo-tolerance.meilisearch.com/).**

We will be using [Hakan Özler](https://github.com/ozlerhakan)'s [dataset of books](https://github.com/ozlerhakan/mongodb-json-files/blob/master/datasets/books.json). I made some changes to the original dataset for demo purposes, you can find the [transformed dataset](https://github.com/meilisearch/demos/blob/main/src/typo-tolerance/setup/books.json) on GitHub. You can search a book by its title, [ISBN](https://en.wikipedia.org/wiki/ISBN) (the ID of the book), author, or by the words in its description.

I have created two identical indexes with different typo tolerance settings. One index uses the out-of-the-box typo tolerance settings, whereas the other uses the following:

```JavaScript
const customTypoTolerance = {
    disableOnAttributes: ['isbn'],
    minWordSizeForTypos: {
        oneTypo: 2,
        twoTypos: 4
    }
}
```

Typo tolerance is disabled on `isbn`, and typos are allowed on shorter words: one typo for words that are 2 and 3 characters long, two typos for any longer word.

![Meilisearch returns different search results depending on the typo tolerance configuration for the same query](https://unable-actionable-car.media.strapiapp.com/typo_tolerance_1_gif_c23f105edf.gif)

It's usually better to provide the end-user with some results than with none. That’s why I set the threshold to the [minimum recommended](https://docs.meilisearch.com/learn/configuration/typo_tolerance.html#minwordsizefortypos). Try typing `flx` and see what happens!

Sometimes, however, it is preferable to return only exact matches. For example when searching documents by their unique identifier. The ISBN is precisely that: the ID of a book. Therefore, I disabled the typo tolerance on the `isbn` attribute.

Let’s try to find a book called “Well-Grounded Rubyist” by its ISBN; type `1933988657` into the search bar.

![When searching for an ISBN, Meilisearch returns only one document when typo tolerance has been disabled on the isbn field](https://unable-actionable-car.media.strapiapp.com/typo_tolerance_2_gif_0119353162.gif)

As you can see, we get the desired book with both settings. However, we get more than one result when typo tolerance is enabled. Searching for an invalid ISBN like `1933988676` still returns results when typo tolerance is enabled; this can be confusing and misleading.

Conclusion
----------

I didn’t disable the typo tolerance on any word because I did not deem it necessary given this dataset, did you? If you want to make some modifications and try to get more relevant results, be my guest: you can find [the code on GitHub](https://github.com/meilisearch/demos/tree/main/src/typo-tolerance).

But, if you like real challenges, I've got one for you. [Literal](https://literal.club/), an online platform for book readers, uses Meilisearch to search through bookshelves. They have been kind enough to share the recipe they've been using to deliver relevant search results:

```json
{
   "displayedAttributes":[
      "id",
      "title",
      "workId",
      "authors",
      "categories",
      "popularity"
   ],
   "searchableAttributes":[
      "authors",
      "title",
      "categories"
   ],
   "filterableAttributes":[
      "isbn10",
      "isbn13",
      "language"
   ],
   "distinctAttribute":"workId",
   "rankingRules":[
      "words",
      "typo",
      "popularity:desc",
      "proximity",
      "attribute",
      "sort",
      "exactness"
   ]
}

```

Can you come up with a better configuration? Can you think of the perfect typo tolerance settings to enhance the relevancy?

As you may have noticed, we take user feedback very seriously. Please don’t hesitate to check our [public roadmap](https://roadmap.meilisearch.com/) and upvote for any feature you'd like to see in future versions or submit a new feature idea. You can also check our [product repo](https://github.com/meilisearch/product/discussions) and make a suggestion or join an existing discussion on improving the product.

If you like Meilisearch and want to support us, a star on [GitHub](https://github.com/meilisearch/meilisearch) means a lot 🥰

Take control of Meilisearch's typo tolerance

This tutorial will show you how to integrate Meilisearch with Strapi v4 to create a search-based web app. We are going to use Strapi’s quick start guide to create a restaurant collection, and then use Meilisearch to search through our collection data.

Introducing our tools
---------------------

### What is 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.

### What is Meilisearch?

[Meilisearch](https://www.meilisearch.com/docs/learn/what_is_meilisearch/overview#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.

Pre-requisites for integrating Meilisearch and Strapi
-----------------------------------------------------

To be able to follow this tutorial on Strapi and Meilisearch integration, 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/) {">= 14 <= 18"}
*   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.

![Strapi signup form](https://unable-actionable-car.media.strapiapp.com/Capture_d_e_cran_2022_04_08_a_11_27_18_1_3e4dd92cf4.png)

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.

![Strapi dashboard with side menu 'Content-Type Builder' option circled](https://unable-actionable-car.media.strapiapp.com/Capture_d_e_cran_2022_04_08_a_11_34_17_2_1_2b9259cf7e.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!

![Strapi dashboard: Content manager side menu, arrow indicating the location of the Restaurant Collection Type ](https://unable-actionable-car.media.strapiapp.com/Capture_d_e_cran_2022_04_08_a_18_27_41_copie_1_1_70c8af5070.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 👇

![Strapi dashboard: create an entry form, arrow indicating the location of the categorie's location in the right side menu](https://unable-actionable-car.media.strapiapp.com/Capture_d_e_cran_2022_04_08_a_18_33_44_2_9695c0fc90.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:

![Strapi dashboard: list of the existing restaurant entries in the Restaurant Collection Type page](https://unable-actionable-car.media.strapiapp.com/Capture_d_e_cran_2022_04_08_a_18_42_35_1_0d0b1abef2.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.

Install and launch Meilisearch
------------------------------

To integrate Meilisearch into our Strapi-based web app, you first need to install Meilisearch. There are multiple ways to [download and run a Meilisearch instance](https://www.meilisearch.com/docs/learn/getting_started/installation#download-and-launch), we will be using [Docker](https://www.docker.com/) here.

If you want to avoid a local installation, **[try Meilisearch Cloud](https://www.meilisearch.com/pricing)**, a hosted and fully‑managed version of Meilisearch with a **free** 14-day trial, **no credit card required**.

**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](https://www.meilisearch.com/docs/learn/cookbooks/docker). If Docker doesn't work for you, consider trying one of the [many other methods](https://www.meilisearch.com/docs/learn/getting_started/installation#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 \
    -e MEILI_ENV='development' \
    -v $(pwd)/meili_data:/meili_data \
    getmeili/meilisearch:latest

```

You should see a big chunk of text (including some ASCII art) confirming that Meilisearch is up and running.

![Meilisearch startup message, arrow pointing the location of the address](https://unable-actionable-car.media.strapiapp.com/Screenshot_2023_02_23_at_15_02_41_e904f789b5.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.

![Meilisearch search preview, aka, mini-dashboard](https://unable-actionable-car.media.strapiapp.com/Screenshot_2023_02_23_at_15_08_38_b0c8b8b2a8.png)

This is the Meilisearch [search preview](https://www.meilisearch.com/docs/learn/what_is_meilisearch/search_preview). 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.

```json
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.

```json
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.

![Strapi dashboard with plugins side menu: arrow pointing at the 'meilisearch' option](https://unable-actionable-car.media.strapiapp.com/Capture_d_e_cran_2022_04_08_a_19_01_53_1_a30c95c406.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.

![Strapi dashboard with Meilisearch plugin selected: arrow pointing to the location of the settings tab](https://unable-actionable-car.media.strapiapp.com/Screenshot_2023_02_23_at_15_30_11_c882741ba9.png)

Note that we leave `Meilisearch API Key` blank because we launched Meilisearch without a [master key](https://www.meilisearch.com/docs/learn/configuration/instance_options#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.

![GIF showing the mouse clicking on 'restaurant' in the Meilisearch collections tab](https://unable-actionable-car.media.strapiapp.com/strapi_gif_ce383289e9.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://localhost:7700](http://localhost:7700). After refreshing, you should observe that the page is no longer empty. Try typing “butter” in the search bar and see what happens 😉

![GIF showing the word 'butter' being typed in the search bar and search results appearing instantly](https://unable-actionable-car.media.strapiapp.com/butter_1_72fa85eb2f.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/#-customization) page.

Next steps after integrating Strapi and Meilisearch
---------------------------------------------------

Now that you have successfully added your Strapi collections in Meilisearch, you can start using the [search capabilities](https://www.meilisearch.com/docs/learn/what_is_meilisearch/overview#features) to their full extent.

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

If you have any questions about integrating Meilisearch with Strapi, please join us on [Discord](https://discord.gg/meilisearch). If you like Meilisearch, [a star on GitHub](https://github.com/meilisearch/meilisearch) means a lot.

How to integrate a relevant search into Strapi v4 using Meilisearch

### \***\*What is multitenancy?\*\***

In software development, multitenancy means that multiple users - also called tenants - share the same computing resources but have different access to system-wide data. In Meilisearch, you might have one index containing data belonging to many distinct tenants. In such cases, your tenants must only be able to search through their own documents.

You can achieve this using tenant tokens.

### **Tenant Token**

Tenant tokens are small packages of encrypted data presenting proof a user can access a certain index. They contain security credentials and instructions on which documents within that index the user is allowed to see.

The primary use case for tenant tokens is to enforce restrictions based on user permissions.

A user can generate a tenant token using [Meilisearch SDKs](https://docs.meilisearch.com/learn/security/tenant_tokens.html#generating-tenant-tokens-with-an-sdk) or [custom code](https://docs.meilisearch.com/learn/security/tenant_tokens.html#generating-tenant-tokens-without-a-meilisearch-sdk).

**Tenant tokens** do not require you to configure any specific instance options or index settings. They are also meant to be short-lived—Meilisearch does not store nor keep track of generated tokens.

When using an SDK to generate a tenant token, you need four parameters:

- **Search rules**: Search rules are a set of instructions defining search parameters that will be enforced in every query made with a specific tenant token.
- **API key**: A token has access to the same indexes as the API key used to generate it.
- **API key uid**: The uid of the API key used to generate the token allows checking that the API key used is valid.
- **Expiration date**(optional): The expiration date of the tenant token

You can read more about the tenant token payload in the [documentation](https://docs.meilisearch.com/learn/security/tenant_tokens.html#tenant-token-payload-reference).

### \***\*Requirements\*\***

1.  [Node.js](https://nodejs.org/en/download/)
2.  [npm](https://www.npmjs.com/)
3.  [Meilisearch JavaScript SDK](https://github.com/meilisearch/meilisearch-js)

### \***\*Creating a tenant token\*\***

A **tenant token** can be created using the `generateTenantToken` function available in the Meilisearch Javascript SDK.

Here’s a simple example for creating a **tenant token** using the Meilisearch SDK

```jsx
client = new Meilisearch({
  host: "<http://localhost:7700>",
  apiKey: "masterKey",
});
// We have created a Meilisearch instance in JavaScript and we will use this to create the tenant token.

const apiKey =
  "rkDxFUHd02193e120218f72cc51a9db62729fdb4003e271f960d1631b54f3426fa8b2595";
const apiKeyUid = "85c3c2f9-bdd6-41f1-abd8-11fcf80e0f76";
const expiresAt = new Date("2025-01-01");
// Now we have declared the API Key, its uid, as well as the expiration date for the token.

searchRules = {
  "*": {
    filter: "user_id = 1",
  },
};
// Here we have defined the search rules that will apply restrictions on the search results.

tenantToken = client.generateTenantToken(apiKeyUid, searchRules, {
  expiresAt: expiresAt,
  apiKey: apiKey,
});
// Now the generateTenantToken function will create a tenant token and Meilisearch can validate this token with the apiKey.
```

When Meilisearch gets a search query with a tenant token, it decodes it and applies the search rules to the search request.

### **Application Usage**

Let's say we have a medical record system in a Meilisearch instance with the `patient_medical_record` index. This index contains a list of patients along with their details. We can use tenant tokens to restrict access to this data.

Sample dataset:

```json
[
  {
    "patient": "John",
    "description": "John is in room number 2 and is suffering from Covid",
    "roomNumber": 1,
    "isDoctorAppointed": true
  },
  {
    "patient": "Zia",
    "description": "Zia is in room number 3 and is suffering from Dengue",
    "roomNumber": 2,
    "isDoctorAppointed": true
  },
  {
    "patient": "Kevin",
    "description": "Kevin is in room number 4 and is suffering from Typhoid",
    "roomNumber": 3,
    "isDoctorAppointed": false
  }
]
```

In the above dataset, we have three patients: John, Zia, and Kevin. The aim is to restrict Zia from accessing Kevin and John's data. To achieve this, we need to create a **tenant token** for her with a set of search rules.

For this case, the search rules can be specified as:

```jsx
"searchRules": {
      "patient_medical_record": {
          "filter": "patient = Zia"
      }
  }
```

Zia's tenant token will be applied at the time of the search request, which returns:

```json
[
  {
    "patient": "Zia",
    "description": "Zia is in room number 3 and is suffering from Dengue",
    "roomNumber": 2,
    "isDoctorAppointed": true
  }
]
```

This is a simple use case, but we can modify the rule to meet more complex requirements.

### \***\*Integrating the multitenancy feature in your application\*\***

We will use the above example to create an [application](https://tenant-token.meilisearch.com/) for displaying patients in a Meilisearch index. We will then use multitenancy to restrict access to this data.

1.  **Download the application**

    Clone the boilerplate code for the demo application from the Meilisearch tutorials repository on Github.

    Use the following command:

```bash
git clone https://github.com/meilisearch/tutorials

```

    The boilerplate code exists in the `src/tenant-token-tutorial` directory.

```bash
cd src/tenant-token-tutorial

```

    This code contains a frontend application built in `React.js` and a backend server in `Express.js/Node.js`.

2.  **Start Meilisearch**

    There are multiple ways to [download and run a Meilisearch instance](https://docs.meilisearch.com/learn/getting_started/quick_start.html#download-and-launch). The easiest way to run a Meilisearch instance is using [Meilisearch Cloud](https://cloud.meilisearch.com/), there's a free 14-day trial, no credit card required. Meilisearch is open-source, in this demo, we'll run it locally using Docker:

```bash
   docker pull getmeili/meilisearch:v1.0


   docker run -it --rm \
       -p 7700:7700 \
       -e MEILI_MASTER_KEY='masterKey'\
       -v $(pwd)/meili_data:/meili_data \
       getmeili/meilisearch:v1.0 \
       meilisearch --env="development"
```

    _Don't forget to define a [master key](https://docs.meilisearch.com/learn/security/master_api_keys.html#protecting-a-meilisearch-instance) as shown above when launching Meilisearch. It will create the API keys needed to generate the tenant tokens._

    The Meilisearch instance will run on the IP address: `http://localhost:7700`.

3.  **Adding data to Meilisearch**

    There is a `data.json` file in the `seed` folder of the base directory with a list of 10 patients suffering from multiple conditions with 100 entries, each with a room number and some patient details. We'll enter the information into Meilisearch.

    Change the terminal directory to the `seed` folder and add the given data to the Meilisearch instance, using the following command:

```bash
npm install     #  This command will install node dependencies

npm start         # This command will add all the data from data.json to Meilisearch

```

4.  **Start frontend server**

    Navigate to the `frontend` folder, and install all the application dependencies, and Meilisearch Javascript SDK

```bash
npm install                # To install all the react application dependency

npm install meilisearch    # To install the Meilisearch SDK

```

    It can take a while to install all the dependencies of the project.

    Let's get the frontend React server up and running with the command:

```jsx
npm start

```

    The app will run on the IP address: `http://localhost:3000`.

![drawing](https://unable-actionable-car.media.strapiapp.com/tenant2_4cce8f78f6.png)

1.  **Adding the functionality to create tenant tokens**

    Navigate to the `backend` folder and install all dependencies using the following command:

```jsx
npm install

```

    In the `backend` folder, open the `index.js` file. It contains the APIs' route and logic.

    An endpoint is already defined for generating the **Tenant token**:

```jsx
app.get("/create-tenant-token", async (req, res) => {
  const { value: patientName } = req.query;

  /* Add functionality to create Tenant token */
});
```

    Now, we'll add the functionality below the comment in the function.

    We need an API Key, search rules, and an expiration date to generate a tenant token.

    The API Key can be obtained from the `getKeys` method in the Javascript SDK. The `getKeys` method returns a list of API Keys from which we can select one to use in the **tenant token** generation process. To do so, add the following code to the API method stated above:

```jsx
const { results } = await client.getKeys();
const apiKey = results.filter(
  (res) => res.name === "Default Search API Key"
)[0].key;
const apiKeyUid = results.filter(
  (res) => res.name === "Default Search API Key"
)[0].uid;
```

    We can also use the `createKey` function to generate a new API Key.

    You can read more on API keys in the [Meilisearch documentation](https://docs.meilisearch.com/reference/api/keys.html).

    By specifying search rules, we can now generate a payload. Use the following code to define a payload:

```jsx
const payload = {
  patient_medical_record: {
    filter: `patient = ${patientName}`,
  },
};
```

    If we need the token to expire after a year, we can set an expiration date when creating the token, as shown below.

```jsx
const expiresAt = new Date(
  new Date().setFullYear(new Date().getFullYear() + 1)
);
```

    To generate the token, we can now use the `generateTenantToken` function from the Meilisearch Javascript SDK, and return the generated token using `res.json(`) function.

```jsx
const tenantToken = client.generateTenantToken(apiKeyUid, payload, {
  apiKey,
  expiresAt,
});

return res.json({ token: tenantToken });
```

    This is how the endpoint should be implemented:

```jsx
app.get("/create-tenant-token", async (req, res) => {
  const { value: patientName } = req.query;

  /* Add functionality to create Tenant token */
  const { results } = await client.getKeys();
  const apiKey = results.filter(
    (res) => res.name === "Default Search API Key"
  )[0].key;
  const apiKeyUid = results.filter(
    (res) => res.name === "Default Search API Key"
  )[0].uid;

  const payload = {
    patient_medical_record: {
      filter: `patient = ${patientName}`,
    },
  };

  const expiresAt = new Date(
    new Date().setFullYear(new Date().getFullYear() + 1)
  );

  const tenantToken = client.generateTenantToken(apiKeyUid, payload, {
    apiKey,
    expiresAt,
  });

  return res.json({ token: tenantToken });
});
```

    The frontend requested endpoint will look like this:

```bash
http://localhost:5001/create-tenant-token?value=John

```

    A payload containing the search rules is created using the value `John` from the API.

    Let's use the `npm start` command to start the express API server. The server will run at `http://localhost:5001.`

2.  **Connect your APIs with the Frontend code**

    Enter the patient's name in the text box. On submitting the input form, an API call is sent to the backend, which should return a tenant token. We can pass this token to the Meilisearch instance when we need data on a certain patient.

    The frontend code must now be configured to request a tenant token from the server. We'll use the [axios library](https://www.npmjs.com/package/axios) to get the token from the `/create-tenant-token` API that we've developed, and we'll pass the patient name in the API's params.

    Open the file `index.js` in the `/src/utils` folder and look for the `getTenantToken` function. This function makes a request to the server and receives a tenant token back.

    Add the following code to the getTenantToken method:

```jsx
export const getTenantToken = async (patientName) => {
  const response = await axios({
    url: `${apiHost}/create-tenant-token`,
    method: "GET",
    params: {
      value: patientName,
    },
  });

  return response.data.token;
};
```

3.  **Test out the implemented functionality**

    Let's test the implementation; start by clicking the **`Create a Tenant token`** button.

    ![drawing](https://unable-actionable-car.media.strapiapp.com/tenant1_b0077452fb.png)

    Type the name `Kevin` in the given text box, and click **`Create a Tenant token` button**. This generates the tenant token.

    ![meili-create-token](https://unable-actionable-car.media.strapiapp.com/meili_create_token_76fc8c30f6.gif)

    Meilisearch will get data based on the tenant token provided by the patient, acting as an authenticator in the process.

### Conclusion

We have restricted access to medical records based on the names of the patients. Using Meilisearch's multitenancy capabilities, we were able to execute all of this with ease. This is a pretty basic use case scenario that comes to mind. The functionality can be as complex as you want it to be. For example, we can implement multitenancy in an e-banking application where the central authority is the bank and the customers are tenants having access to distinct bank accounts.

If you have any questions, please join us [on Discord](https://discord.gg/meilisearch). For more information on Meilisearch, check out our [Github repository](https://github.com/meilisearch/meilisearch/) and our official [documentation](https://docs.meilisearch.com/).


How to use Meilisearch in your multi-tenant application

[Nikita](https://nikita.js.org/current/guide/tutorial/) is a Node.js toolkit for automating deployment workflows. Even though we think it is great, we noticed Nikita's documentation website doesn’t really give users a way to quickly search and find the information they’re looking for. Nikita's content is open source and the documentation website is built with Gatsby, though, so we decided to take the opportunity to show you how to add a nice search interface to a Gatsby-based project.

In this tutorial we will install Meilisearch together with a few other dependencies. Then, we will clone Nikita’s Gatsby repository and index Nikita’s docs with Meilisearch. Finally, we’ll add a search UI to our local version of Nikita’s docs.

You can check the finalized code, including all content ready to be run in a server, [at this github repo](https://github.com/meilisearch/demos/tree/main/src/gatsby-plugin-guide).

Setup
=====

Before we begin, let’s take a quick look at everything you need to follow this tutorial.

Introducing our Tools
=====================

Gatsby
------

[Gatsby](https://www.gatsbyjs.com/) is a React-based open-source framework used for Static Site Generation (SSG). It combines the functionality of React, GraphQL and Webpack and provides great performance, scalability, and security right out of the box.

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/) {">= 14.15.X and <= 16.X"}: this makes it possible to run JS outside a browser
    *   You can check your active version with the command `node --version`
    *   If your version of Node is outside this range, we recommend that you [install nvm](https://github.com/nvm-sh/nvm/blob/master/README.md#about) and use it to access Node 14
*   Yarn >= 1.22 : Yarn is a package manager that doubles down as project manager
*   [Docker](https://www.docker.com/): Docker will help us create a working development environment with relatively little effort

Steps
=====

1.  Start Meilisearch
2.  Setup the Gatsby project
3.  Add the Meilisearch plugin
4.  Add the content of the Gatsby app to Meilisearch
5.  Build the frontend

Start Meilisearch
=================

There are multiple ways to [download and run a Meilisearch instance](https://www.meilisearch.com/docs/learn/getting_started/installation#download-and-launch). For this guide, we'll be using Docker. Want to avoid a local installation? Try our [Meilisearch cloud](https://cloud.meilisearch.com/) with a free 14-day trial!

After installing Docker in your machine, fetch and run the latest Meilisearch container image. To do that, open your terminal and use the following commands:

```bash
docker pull getmeili/meilisearch:latest 

docker run -it --rm -p 7700:7700 getmeili/meilisearch:latest ./meilisearch --master-key=masterKey

```

Meilisearch will start running on [http://localhost:7700](http://localhost:7700/). If everything went well, you should see something like this in your terminal window:

![Screenshot-2023-04-13-at-14.48.31](https://unable-actionable-car.media.strapiapp.com/Screenshot_2023_04_13_at_14_48_31_d715bb8f41.png)

Setup the Gatsby project
========================

With Meilisearch ready, it’s time to download Nikita’s documentation.

In another terminal window, navigate to your working directory, then clone the Nikita project that we will be using for this guide:

```bash
git clone https://github.com/adaltas/node-nikita.git

```

You can find the content of the Gatsby app in the markdown files inside the `docs/content` folder. This is the data Gatsby uses to generate Nikita’s documentation.

| _Directory structure for the node-nikita project_ |

Add the Meilisearch plugin and launch Gatsby
============================================

Alright: both Meilisearch and Gatsby are installed. We will start by installing all the project dependencies. Run the following command in your terminal:

```bash
cd node-nikita/docs/website
yarn

```

Once that is done, we will install the official Meilisearch plugin for Gatsby with Yarn:

```bash
yarn add gatsby-plugin-meilisearch

```

Great! We’re ready to launch Gatsby. To do that, just run the following command on your console:

```bash
yarn develop

```

This is how the UI of the Nikita docs website looks like:  
![nikita1](https://user-images.githubusercontent.com/19529592/161043477-afd719ab-fe45-4f1a-ae0b-5f27e4983df6.jpg)

Add the content of the Gatsby app to Meilisearch
================================================

Now that we have installed the plugin and have both the Gatsby app and the Meilisearch instance running, things start to get interesting! Let's configure `gatsby-meilisearch-plugin` to make the content searchable.

The main code for the docs website lies in the directory `docs/website`.

**Configure the plugin**
------------------------

The first thing we need to do is add your Meilisearch [credentials](https://www.meilisearch.com/docs/learn/getting_started/quick_start#securing-meilisearch) to the Meilisearch Gatsby plugin. Open `docs/website/gatsby-config.js` and add this bit of code at the bottom of the `plugins` array:

```jsx
{
    resolve: 'gatsby-plugin-meilisearch',
    options: {
      host: 'http://localhost:7700', // your host URL goes here
      apiKey: 'masterKey',   // your API key goes here       
      indexes: [],
    },
  },

```

So far, our configuration tells the plugin where to find our Meilisearch instance and gives it the credentials to read the content inside Gatsby. Now we need to define what data we want to add to Meilisearch and how. This happens in the [indexes field](https://github.com/meilisearch/gatsby-plugin-meilisearch#-indexes). This field can be considered the heart of the Gatsby Meilisearch plugin.

The `indexes` field is an array composed of multiple index objects. Each index object must contain the following fields: `indexUid`, `query`, and `transformer`. Let's examine these fields.

### `indexUid`

This field contains the name of a Meilisearch index. For this guide, we will use `nikita-api-docs`:

```jsx
indexUid: 'nikita-api-docs'

```

### `query`

This field contains the GraphQL query the plugin will use to fetch content from Nikita’s documentation. Gatsby comes with inbuilt support for GraphQL—it even includes a bundled GraphQL tool, accessible on ([http://localhost:8000/\_\_\_graphql](http://localhost:8000/___graphql)). You can read more about GraphQL on the project’s official [documentation.](https://graphql.org/learn/)

Our query looks like this.

```jsx
query: `query MyQuery {
    allMdx {
      edges {
        node {
          frontmatter {
            title
            navtitle
            description
          }
          slug
          rawBody
          id
        }
      }
    }
  }`,

```

In this query, we first say we are only interested in the markdown files by wrapping our query with the `allMdx` statement. We can do that thanks to two very useful tools: `gatsby-plugin-mdx` and `gatsby-source-filesystem`.

Then, we specify which document fields we want to include in our index: `title`, `navtitle`, `description`, `slug`, `id`, and, finally, `rawBody`—that is, the document’s raw markdown content.

### `transformer`

This is the last configuration field. It gets the data we fetched from Gatsby with our `query` and converts it into a format that Meilisearch will understand.

In our case, the data will look a bit like this:

```jsx
data = {
    allMdx: {
        edges: [
          {
            node: {
              frontmatter: {
                title: "Introduction",
                navtitle: "intro",
              },
              body: "Introduction to the Nikita.js",
              slug: "/introduction",
              id: "1",
            },
          },
          {
            node: {
              frontmatter: {
                title: "Architecture",
                navtitle: "architecture",
              },
              body: "Architechture of Nikita.js",
              slug: "/architecture",
              id: "2",
            },
          },
        ],
    },
};

```

This data looks great, but is not in a format that Meilisearch can easily understand. We can change that by adding a parser function to `transformer`:

```jsx
transformer: (data) => {
    data.allMdx.edges.map(({ node }) => {
      // Node property has been destructured here
      return {
        id: node.id,
        lvl0: node.frontmatter.title,
        lvl1: node.frontmatter.navtitle,
        content: node.body,
        anchor: node.slug,
      };
    });
}


```

With that, `gatsby-plugin-meilisearch` will get the raw data we extract with our query and turn the whole object into an array.

```jsx
 // It will return a list of transformed structured object
  
[
    {
      id: "1",
      lvl0: "Introduction",
      lvl1: "introduction",
      content: "Introduction to the Nikita.js",
      anchor: "/introduction"
    },
    {
      id: "2",
      lvl0: "Architecture",
      lvl1: "architecture",
      content: "Architechture of Nikita.js",
      anchor: "/architecture"
    }
]

```

### Putting it all together and finalizing plugin configuration

If you’ve been following along, the `gatsby-plugin-meilisearch`configuration at the end of your `docs/website/gatsby-config.js` should look something like this now:

```jsx
{
  resolve: 'gatsby-plugin-meilisearch',
  options: {
    host: 'http://localhost:7700',
    apiKey: 'masterKey',
    batchSize: 1,
    indexes: [
      {
        indexUid: 'nikita-api-docs',
        settings: {
          searchableAttributes: ['lvl0', 'lvl1', 'lvl2', 'content'],
        },
        transformer: (data) =>
          data.allMdx.edges
            .filter(
              ({ node }) =>
                node.slug.search('guide') !== -1 ||
                node.slug.search('project') !== -1 ||
                node.slug.search('api') !== -1
            )
            .map(({ node }) => {
              // Have to update for versioning
              const currentVersion =
                node.slug.substring(0, 8).search('project') === -1
                  ? '/current'
                  : ''

              return {
                id: node.id,
                lvl0:
                  node.frontmatter.navtitle || node.frontmatter.title || '',
                lvl1:
                  node.frontmatter.title || node.frontmatter.navtitle || '',
                lvl2: node.frontmatter.description || '',
                content: node.rawBody,
                url: `${currentVersion}/${node.slug}`,
              }
            }),
        query: `query MyQuery {
            allMdx {
              edges {
                node {
                  frontmatter {
                    title
                    navtitle
                    description
                  }
                  slug
                  rawBody
                  id
                }
              }
            }
          }`,
      },
    ],
  },
},
```

We began `gatsby-plugin-meilisearch` configuration by adding basic data and credentials to `docs/website/gatsby-config.js.`

We continued configuration by specifying the content we want to search should be added to the `nikita-api-docs` index, used a GraphQL query to select content for indexation, and finally used a `transformer` function to format the data for indexation.

**Build the project**
---------------------

The `gatsby-plugin-meilisearch` will fetch and send data for indexation to Meilisearch during the build process. To get that started, run the following command:

```bash
yarn build

```

You should see a message in the terminal once your content is being indexed:

```bash
success gatsby-plugin-meilisearch - 0.920s - Documents are send to Meilisearch, track the indexing progress using the tasks uids.

```

You can verify this by going to [http://localhost:7700](http://localhost:7700), entering your API key, and checking that Nikita’s documentation has been added to Meilisearch.

Build the frontend
==================

Now that the data is indexed, let’s build the user interface and create a great search experience for our end-users.

For this example, we will use [docs-searchbar.js](https://github.com/meilisearch/docs-searchbar.js). It is a front-end SDK for Meilisearch that provides an easy way of integrating a search bar into our documentation site.

Add the search bar component
----------------------------

Let’s start by installing docs-searchbar.js in the frontend directory of the project.

```markdown
# With Yarn
yarn add docs-searchbar.js

```

With that done, we can import the docs-searchbar module into `website/src/components/shared/AppBar.js` by adding this to the top of the file:

```jsx
import 'docs-searchbar.js/dist/cdn/docs-searchbar.css'

```

Next, we need to add a `useEffect` hook to add the docsSearchBar function to `AppBar.js`. Add this below the other `useEffect` hook:

```jsx
useEffect(() => {
    if(window !== undefined){
      const docsSearchBar = require('docs-searchbar.js').default

      docsSearchBar({
        hostUrl: 'http://localhost:7700',
        apiKey: 'masterKey',
        indexUid: 'nikita-api-docs',
        inputSelector: '#search-bar-input',
        meilisearchOptions: {
          limit: 5,
        },
        enhancedSearchInput: true,
      })
    }
  }, [])

```

The `docsSearchBar` function comes in with a number of different parameters:

*   `hostUrl` and `apiKey` allows the search bar to access your Meilisearch instance.
*   `indexUid` tells the search bar which index it should search through.
*   `inputSelector`is a selector matching the HTML element where our users will type their queries. In our case, that’s `#search-bar-input`. Don’t worry, we’ll add this element to Gatsby in a moment.
*   Finally, `enhancedSearchInput` tells `docs-searchbar` to apply a theme to the search box, improving its appearance and making it a bit more user-friendly.

All that’s left is adding our search element in `website/src/components/shared/AppBar.js`. Remember to use the same `id` we configured as the `inputSelector`. Add the element after `</Link>` tag:

```jsx
<input type="search" id="search-bar-input" />

```

And that’s it! We’re done!

**Test the implementation**
---------------------------

Ready to see all this hard work in action? On your terminal, re-run the following command:

```markdown
yarn develop

```

And then use your browser to access [`http://localhost:8000`](http://localhost:8000/). You should see your local copy of NikitaJS’s docs with a brand new search bar:

![nikitalfinall](https://user-images.githubusercontent.com/19529592/161043686-a34453b0-e155-4f03-8ba2-2a9225190757.jpg)

Conclusion
==========

We hope this article was a pleasant introduction to the new [Meilisearch plugin for Gatsby](https://github.com/meilisearch/gatsby-plugin-meilisearch)!

If you have any questions, please join us [on Discord](https://discord.gg/meilisearch). For more information on Meilisearch, check out our [Github repository](https://github.com/meilisearch/meilisearch/) and our official [documentation](https://docs.meilisearch.com/).

Add a search bar to your Gatsby project using Meilisearch

If you haven't heard it yet, [Meilisearch v0.22](/blog/whats-new-in-v0-22/)s out, and it comes with a highly requested new feature: sorting at search time.

Search-time sorting is when results are sorted according to parameters decided at query time. By default, Meilisearch orders results according to their [relevancy](https://www.meilisearch.com/docs/learn/core_concepts/relevancy), but you can configure it to let users decide at search time what results they want to see first.

Let me show you how powerful this feature is. If I wanted to search for a MacBook and sort the results by ascending price, I would send the following query:

```json
curl \
  -X POST 'http://localhost:7700/indexes/computers/search' \
  --data '{
    "q": "MacBook",
    "sort": [
        "price:asc"
    ]
}'

```

I could do the opposite and search by descending price. I would just need to replace `asc` by `desc` in my request.

The old way
-----------

Before Meilisearch v0.22, you could only sort search results using the [custom ranking rules](https://www.meilisearch.com/docs/learn/core_concepts/relevancy#custom-rules).

Thanks to the custom ranking rules, we could have our search results sorted by the numeric attribute of our choice. However, the sorting was not at search time, the sorting order was decided in our index settings.

To change the sort order of the search results in the user interface, we had to duplicate the index and set different custom ranking rules for each index.

That's what I did for our [MoMA demo](https://moma.meilisearch.com/) a few months ago. For those who missed it, the MoMA demo is a Meilisearch demo created with the artworks dataset of the [Museum of Modern Art](https://www.moma.org/) available in their [GitHub repository](https://github.com/MuseumofModernArt/collection). You can learn more about the demo in [this blog post](/blog/demo-moma/) wanted the users to be able to sort the artworks by date, so I had to create three indexes:

\-  `artWorks` with the default built-in ranking rules  

\- `artWorksAsc` with a custom ranking rule for ascending sort

\- `artWorksDesc` with a custom ranking rule for descending sort

```javascript
// Get or create indexes
const artWorksIndex = await client.getOrCreateIndex('artWorks', { primaryKey: 'ObjectID' })
const artWorksAscIndex = await client.getOrCreateIndex('artWorksAsc', { primaryKey: 'ObjectID' })
const artWorksDescIndex = await client.getOrCreateIndex('artWorksDesc', { primaryKey: 'ObjectID' })

const defaultRankingRules = [
  'typo',
  'words',
  'proximity',
  'attribute',
  'exactness'
] 

const rankingRulesAsc = [
  'typo',
  'words',
  'proximity',
  'attribute',
  'exactness',
  'asc(DateToSortBy)' // ascending sort
]
const rankingRulesDesc = [
  'typo',
  'words',
  'proximity',
  'attribute',
  'exactness',
  'desc(DateToSortBy)' // descending sort
]

```

The duplication, or triplication, gave the impression of sorting at search time as Meilisearch is blazingly fast.

At that time, sorting was on our [roadmap](https://roadmap.meilisearch.com/), in the Under Consideration tab, and it was one of the most voted features (86 votes).

> We have a [public roadmap](https://roadmap.meilisearch.com/) where you can submit feature or integration ideas and vote for the existing ones.

With the new v0.22 sort feature
-------------------------------

Today, it's a reality. And I've updated the demo to integrate this feature. Let's go through what has changed.

### Behind the scenes

First of all, I have added the following line to the settings:

```javascript
sortableAttributes: ['DateToSortBy']

```

This addition is necessary because we need to inform Meilisearch of the attributes we want to use for sorting.

We only need one index (not three) and the default ranking rules. This has considerably reduced the back-end code. You can change the position of the `sort` rule to tune the relevancy of the search results according to your needs. By default, the `sort` rule in 5th position of the ranking rules to promote results relevant to the user's search.

You can learn more about the ranking rules and how they affect relevancy [here](https://www.meilisearch.com/docs/learn/core_concepts/relevancy).

And if you are curious about why the `sort` rule is in 5th position by default, you can check [this GitHub issue](https://github.com/meilisearch/MeiliSearch/issues/1680#issuecomment-915789791) where our Product Manager explains this choice.

With these modifications, the big block of code above has been reduced to the following line:

```javascript
// Get or create the index
const index = await client.getOrCreateIndex('artWorks', { primaryKey: 'ObjectID' })

```

Easy, right? But, what about the front end?

### In the spotlight

For this demo I used [Vue InstantSearch](https://github.com/algolia/vue-instantsearch/), combined with [Instant Meilisearch](https://github.com/meilisearch/meilisearch-js-plugins/tree/main/packages/instant-meilisearch). This connects the Meilisearch instance with the open-source [InstantSearch](https://github.com/algolia/instantsearch.js) front-end tools allowing us to customize the search environment effortlessly.

The previous code looked like this:

```javascript
<ais-sort-by
:items="[
  { value: 'artWorks', label: 'Featured' },
  { value: 'artWorksAsc', label: 'Date asc.' },
  { value: 'artWorksDesc', label: 'Date desc.' }                    
]"
:class-names="{
    'ais-SortBy': 'MyCustomSortBy'
}"
/>

```

I just needed to transform it into this:

```javascript
<ais-sort-by
:items="[
  { value: 'artWorks', label: 'Featured' },
  { value: 'artWorks:DateToSortBy:asc', label: 'Date asc.' },
  { value: 'artWorks:DateToSortBy:desc', label: 'Date desc.' }                    
]"
:class-names="{
  'ais-SortBy': 'MyCustomSortBy'
}"
/>

```

As you can see, instead of using 3 different indexes (`artWorks`, `artWorksAsc`, and `artworksDesc`), we only need to append the attribute's name to the `artWorks` index followed by the desired sort order, `asc` or `desc`.

```javascript
'artWorks:DateToSortBy:asc'
'artWorks:DateToSortBy:desc'

```

And this is it. Smooth and simple. You can test it [here](https://moma.meilisearch.com/).

![](https://unable-actionable-car.media.strapiapp.com/sortby_a3723cbe47.gif)

Web interface with the query "Magritte" sorting by ascending and then descending date gif

The end-user may not notice the difference, but resource-wise it's much more efficient.

Another great advantage of v0.22 is the new indexer. It's way faster than before, so if you're still using an older version of Meilisearch, I strongly encourage you to [upgrade it](https://www.meilisearch.com/docs/learn/update_and_migration/updating).

The demo source code is available on [GitHub](https://github.com/meilisearch/demos/tree/main/src/MoMA). I invite you to play with it, you can add other attributes to sort by, as long as they are strings or numeric values. For a more in-depth explanation of sorting, take a look at the [dedicated section](https://www.meilisearch.com/docs/learn/getting_started/filtering_and_sorting#sorting) of the documentation.

* * *

_Picture by [Héctor J. Rivas](https://unsplash.com/@hjrc33) on [Unsplash](https://unsplash.com/)_

The art of sorting

<Callout>
  This guide is for Strapi v3. If you are using Strapi v4, check [this post](/blog/strapi-v4-plugin-meilisearch/)
</Callout>

As the web evolves, more and more tools are available to take care of complex jobs for us. Why create a CRUD API from scratch when you can generate one in a few clicks? Why struggle with difficult search operations and queries, when simple and efficient solutions exist?

Maybe we're intimidated by new technologies, or concerned about investing time in tools that don't pan out. Or, more likely, _we may not even be aware that a simple solution exists._

![](https://unable-actionable-car.media.strapiapp.com/truemen_d2b99b9b0a.gif)

Meilisearch in action

This tutorial will show you, in the fewest steps possible, how to use Strapi and Meilisearch to create a search-based web-app. First, let's get acquainted with our tools!

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 API without having to code anything or configure our database.

### Meilisearch

[Meilisearch](https://www.meilisearch.com/docs/learn/what_is_meilisearch/overview) is a fast, open-source search engine that's easy to use and deploy. The aim of Meilisearch is to create a relevant search experience out of the box in very few steps and 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/) {">= 10.16 and <= 14"}: this makes it possible to run JS outside a browser
    *   You can check the active version with the command `node --version`
    *   If your version of Node is outside this range, we recommend that you [install nvm](https://github.com/nvm-sh/nvm/blob/master/README.md#about) and use it to access Node 14
*   NPM and NPX >= 6.x (installed with Node.js): package managers that help you access and use JS libraries

Steps:
------

1.  [Create a working directory](#create-a-directory-for-our-app)
2.  [Create Strapi Back End](#create-a-back-end-using-strapi)
3.  [Start Meilisearch](#launch-and-start-meilisearch)
4.  [Connect Strapi and Meilisearch](#connect-strapi-and-meilisearch)
5.  [Conclusion](#conclusion)

Create a directory for our app
------------------------------

We don't want our app to be all over the place! Let's create a directory where we will add every part of our application.

```bash
mkdir my-app
cd my-app
```

If you are not using a [UNIX-based operating system](https://www.eukhost.com/blog/webhosting/linux-flavors/) please follow this guide to [create a directory](https://www.computerhope.com/issues/ch000742.htm).

Create a back end using Strapi
------------------------------

In this section we are going to create and run a back-end using Strapi.

Our first step is to generate a Strapi Application. Go to your open terminal window and run the following command:

```bash
npx create-strapi-app@3.5.4 back --quickstart

```
<Callout>
  Using [npx](https://www.npmjs.com/package/npx) we run a specific version of the package without installing it globally. Note that this guide may not work with a different version.
</Callout>

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.

![](https://unable-actionable-car.media.strapiapp.com/Screenshot_2021_04_20_at_14_28_54_1_453a624ffa.png)

If you lose this page at any time, just go to `http://localhost:1337/admin` in your browser

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—in this case, it'll be a collection of restaurants. Complete [step 3 of Strapi's quick start guide](https://strapi.io/documentation/developer-docs/latest/getting-started/quick-start.html#_3-create-a-restaurant-content-type) to continue.

![](https://unable-actionable-car.media.strapiapp.com/Screenshot_2021_04_20_at_15_31_41_2effed8eb3.png)

Admin dashboard landing page

After finishing [step 3 of Strapi's quick start guide](https://strapi.io/documentation/developer-docs/latest/getting-started/quick-start.html#_3-create-a-restaurant-content-type), a new collection named `Restaurants` should have appeared under `Collection Types`. If we click on it, we can see that there are still no restaurants. Let's add some!

![](https://unable-actionable-car.media.strapiapp.com/Screenshot_2021_04_20_at_15_07_36_63c48765e5.png)

`Restaurants` collection landing page

Click on `+ Add New Restaurants` in the upper-right corner of the dashboard. Now let's add three restaurants, one by one:

*   Name: `The Butter Biscotte`. Description:  `All about butter, nothing about health.`
*   Name: `The Slimy Snail` Description: `Gastronomy is made of garlic and butter.`
*   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.`

![](https://unable-actionable-car.media.strapiapp.com/Screenshot_2021_04_20_at_15_15_38_2c431c5150.png)

Create an entry in the Restaurant Collection.

For each restaurant, you need to press `save` and then `publish`. Once the three restaurants have been added, you should end up with the following page:

![](https://unable-actionable-car.media.strapiapp.com/Screenshot_2021_04_20_at_15_22_55_e0137d6c9d.png)

Main page of `Restaurants` showcasing the restaurants we have added

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).

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

Launch and Start Meilisearch
----------------------------

**tl;dr:** [download, install and start Meilisearch](https://docs.meilisearch.com/learn/getting_started/installation.html#download-and-launch).

Want to avoid a local installation? Use our [Meilisearch cloud](https://cloud.meilisearch.com/) free 14-day trial or our [one-click install on DigitalOcean](https://marketplace.digitalocean.com/apps/meilisearch) and [continue to the next section](#connect-strapi-and-meilisearch).

If you made it this far, you should already have an open terminal window running Strapi. If not or if you closed it by accident, please [follow this guide](https://www.ionos.com/help/email/troubleshooting-mail-basicmail-business/access-the-command-prompt-or-terminal), navigate to the directory `.../my-app/back` that we created, and run the command `npm run develop` to restart Strapi.

Let's take a moment to **open a second terminal window** and move to the `my-app` directory. This window will be used to run Meilisearch.

Inside `my-app`, create a new directory called `meilisearch-binary` .

```bash
mkdir meilisearch-binary
cd meilisearch-binary
```

Create and move to directory where we will run Meilisearch

Execute the following command to download Meilisearch in the current directory. If cURL doesn't work for you, consider trying one of the [many other methods to download and install](https://docs.meilisearch.com/learn/getting_started/installation.html#download-and-launch) Meilisearch.

```bash
# Install Meilisearch
curl -L https://install.meilisearch.com | sh
```

Download and install Meilisearch

We now have the `meilisearch` binary in our directory. Let's run it!

```bash
# Launch Meilisearch
./meilisearch
```

Launch Meilisearch

You should see a big chunk of text (including some ASCII art) confirming that Meilisearch is up and running.

![](https://unable-actionable-car.media.strapiapp.com/MS_adress_75a76c4b2b.png)

Running Meilisearch

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

You should arrive on a web page without much to look at.

![](https://unable-actionable-car.media.strapiapp.com/Screenshot_2021_04_21_at_13_21_44_d9162084ee.png)

The Meilisearch web interface w/ empty index

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

Data, you say? It just so happens we already have some in our Strapi app! Time to connect the two and start searching through our data with Meilisearch.

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 `control + c` to kill the process.

Once you've done that, move inside the `back` directory and install the plugin.

```json
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.

```bash
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 a new `Plugin` on the left side of the screen: Meilisearch! Let's click on it.

![](https://unable-actionable-car.media.strapiapp.com/Screenshot_2021_04_21_at_14_32_44_c00e3d34f8.png)

Arriving on the Meilisearch plugin page, we can see that the information is split into two sections:

*   Meilisearch credentials
*   Strapi collections

![](https://unable-actionable-car.media.strapiapp.com/Screenshot_2021_04_21_at_14_44_12_6b821d2d2e.png)

Meilisearch plugin page of Strapi admin dashboard

First, we need to add the credentials of our Meilisearch instance so that Strapi knows where to send our data.

You may remember from the previous step that Meilisearch runs on `http://localhost:7700` by default. Add this in the `Meilisearch Host` field, then click `Add` to connect your Meilisearch instance to Strapi.  

![](https://unable-actionable-car.media.strapiapp.com/credentials_6fe7804ffa.gif)

Add credentials to Meilisearch.

> Note that we leave `Meilisearch Api Key` blank because we started Meilisearch without a [master key](https://www.meilisearch.com/docs/learn/configuration/instance_options#master-key).

Great! Now it's time to add your Strapi collection to Meilisearch.

Try clicking on the check box next to `restaurant` and watch as Meilisearch instantly begins processing your data. Because we only have three documents, the indexing time is practically non-existent.

![](https://unable-actionable-car.media.strapiapp.com/Large_GIF_956x212_5f52b4fd0f.gif)

Add restaurants to Meilisearch

We can now go back to our Meilisearch host address: `http://localhost:7700`. After refreshing, you should observe that the page is not as empty as before.

![](https://unable-actionable-car.media.strapiapp.com/Screenshot_2021_04_22_at_10_07_08_6dbd424e4d.png)

Demo page of Meilisearch

We did it! Try inputting "butter" and check out the results.

#### Front-end Interface

Using [instant-meilisearch](https://github.com/meilisearch/meilisearch-js-plugins/tree/main/packages/instant-meilisearch), you can implement a front-end search interface in [React](https://github.com/meilisearch/meilisearch-react), [Vue](https://github.com/meilisearch/meilisearch-vue), or [Angular](https://github.com/meilisearch/meilisearch-angular) in no time at all.  
  
Here's an interactive [code sandbox](https://codesandbox.io/s/react-movies-demo-e1dqh) (in React) where you can get a feel for the different components. You can't break anything, so feel free to play around!

### Conclusion

I hope this article was a pleasant introduction to the new [Meilisearch plugin for Strapi](https://github.com/meilisearch/strapi-plugin-meilisearch). However, this is just the beginning!

If you have any questions, please join us [on Discord](https://discord.gg/meilisearch). If you like Meilisearch, [a star on GitHub means a lot](https://github.com/meilisearch/meilisearch). For more information, see our:

*   [Documentation](https://www.meilisearch.com/docs/)
*   [GitHub](https://github.com/meilisearch/meilisearch)
*   [Strapi Plugin](https://github.com/meilisearch/strapi-plugin-meilisearch)
*   [Discord](https://discord.gg/meilisearch)

How to add relevant search to your Strapi app using Meilisearch

_[Originally published](https://docs.airbyte.io/tutorials/slack-history) on Airbyte site_

**Overview**
------------

The [Slack free tier](https://slack.com/pricing/paid-vs-free) saves only the last 10K messages. For social Slack instances, it may be impractical to upgrade to a paid plan to retain these messages. Similarly, for an open-source project like [Airbyte](https://airbyte.io) where we interact with our community through a public Slack instance, the cost of paying for a seat for every Slack member is prohibitive.

However, searching through old messages can be really helpful. Losing that history feels like some advanced form of memory loss. What was that joke about Java 8 Streams? This contributor question sounds familiar—haven't we seen it before? But you just can't remember!

This tutorial will show you how you can, for _free_, use Airbyte to save these messages (even after Slack removes access to them). It will also provide you a convenient way to search through them.

Specifically, we will export messages from your Slack instance into an open-source search engine called [Meilisearch](https://github.com/meilisearch/meilisearch). We will be focusing on getting this setup running from your local workstation. We will mention at the end how you can set up a more productionized version of this pipeline.

We want to make this process easy, so while we will link to some external documentation for further exploration, we will provide all the instructions you need here to get this up and running.

**Set up Meilisearch**
----------------------

First, let's get Meilisearch running on our workstation. Meilisearch has extensive docs for [getting started](https://docs.meilisearch.com/reference/features/installation.html#download-and-launch). For this tutorial, however, we will give you all the instructions you need to set up Meilisearch using Docker.

```Shell
docker run -it --rm \
  -p 7700:7700 \
  -v $(pwd)/data.ms:/data.ms \
  getmeili/meilisearch
```

That's it!

> Meilisearch stores data in `$(pwd)/data.ms`, so if you prefer to store it somewhere else, just adjust this path.

**How to replicate your Slack messages to Meilisearch**
-------------------------------------------------------

### Set up Airbyte

Make sure you have Docker and Docker Compose installed. If you haven’t set Docker up, follow the [instructions here](https://docs.docker.com/desktop/) to set it up on your machine. Then, run the following commands:

```Shell
git clone https://github.com/airbytehq/airbyte.git
cd airbyte
docker-compose up
```

If you run into any problems, feel free to check out our more extensive [getting started](https://docs.airbyte.io/getting-started) for more help.

Once you see an Airbyte banner, the UI is ready to go at `http://localhost:8000/`. Once you have set your user preferences,  you will be brought to a page that asks you to set up a source. In the next step, we'll go over how to do that.

### Set up Airbyte’s Slack source connector

In the Airbyte UI, select Slack from the dropdown. We provide step-by-step instructions for setting up the Slack source in Airbyte [here](https://docs.airbyte.io/integrations/sources/slack#setup-guide). These will walk you through how to complete the form on this page.

![](https://lh3.googleusercontent.com/ZCxW4_nPPsLB4_fiszkcCIWFIDS8nSifxcwLweC2tH__sUdhEF-34YXQmQXJCSZGg4upzpv1NbICIKNKS0ayap4X41Unxhf7qLmfmDCzEbkl8M2R9ggUnMi-czMU-v_QSAD2mL07)

By the end of these instructions, you should have created a Slack source in the Airbyte UI. For now, just add your Slack app to a single public channel (you can add it to more channels later). Only messages from that channel will be replicated.

The Airbyte app will now prompt you to set up a destination. Next, we will walk through how to set up Meilisearch.

### Set up Airbyte’s Meilisearch destination connector

Head back to the Airbyte UI. It should still be prompting you to set up a destination. Select "Meilisearch" from the dropdown. For the host field, set: `http://localhost:7700`. The api\_key can be left blank.

### Set up the replication

On the next page, you will be asked to select which streams of data you'd like to replicate. We recommend unchecking "files" and "remote files" since you won't really be able to search them easily in this search engine.

![](https://lh6.googleusercontent.com/O-bUkd7k_8Eo-K9PNZA1kCd-bbg0DekSwyNfaXdDHIb3Pcyd9gi8nJXljU0NJL3ELaY6sDq8HoUuaMklFi5fQBpTplfTDklOuYdoQF_lpe_vFAZ9wSOLtPp76iWM7VFnwuC9rkbh)

For frequency, we recommend every 24 hours.

**Search Meilisearch**
----------------------

After the connection has been saved, Airbyte should start replicating the data immediately. When it completes you should see the following:

![](https://lh5.googleusercontent.com/ZErxFD14kuzXkBx2Fv6OtjPM80AogKllbLPlMQJZ8rfb1OTVhKRdt0rr1rS6e7bcnngfs0qJ7pLzNL4CsXYAByzJSspjSXPgbqkyemyiaRP7aPeMT8Wqs7gqtkuTUmKSmZSwdN_3)

When the sync is done, you can sanity check that this is all working by making a search request to Meilisearch. Replication can take several minutes depending on the size of your Slack instance.

```Shell
curl 'http://localhost:7700/indexes/messages/search' --data '{ "q": "<search-term>" }'
```

For example, I have the following message in one of the messages that I replicated: welcome to airbyte..

```Shell
curl 'http://localhost:7700/indexes/messages/search' --data '{ "q": "welcome to" }'
# => {"hits":[{"_ab_pk":"7ff9a858_6959_45e7_ad6b_16f9e0e91098","channel_id":"C01M2UUP87P","client_msg_id":"77022f01-3846-4b9d-a6d3-120a26b2c2ac","type":"message","text":"welcome to airbyte.","user":"U01AS8LGX41","ts":"2021-02-05T17:26:01.000000Z","team":"T01AB4DDR2N","blocks":[{"type":"rich_text"}],"file_ids":[],"thread_ts":"1612545961.000800"}],"offset":0,"limit":20,"nbHits":2,"exhaustiveNbHits":false,"processingTimeMs":21,"query":"test-72"}
```

**Search via a UI**
-------------------

Making curl requests to search your Slack History is a little clunky, so we have modified the example UI that Meilisearch provides in [their docs](https://docs.meilisearch.com/learn/tutorials/getting_started.html#integrate-with-your-project) to search through the Slack results.

Download (or copy and paste) this [html file](https://github.com/airbytehq/airbyte/blob/master/docs/tutorials/slack-history/index.html) to your workstation. Then, open it using a browser. You should now be able to write search terms in the search bar and get results instantly!

![](https://lh6.googleusercontent.com/JfzrnvxFz-08gIL6hMyWeW5TB8_XGgAUibx26o0gXhxJVc97IgW_YnqvWEV2ta8OvJbTQwQUUpYpsHggvbvRSJp8YVTw9w6Y3Ocl8E33Ab-L0E5visu-Beh_kqJwolt-9m_ZEk8N)

**"Productionizing" saving Slack history**
------------------------------------------

You can find instructions for how to host Airbyte on various cloud platforms [here](https://docs.airbyte.io/deploying-airbyte).

Documentation on how to host Meilisearch on cloud platforms can be found [here](https://www.meilisearch.com/docs/learn/cookbooks/running_production).

If you want to use the UI mentioned in the section above, we recommend statically hosting it on S3, GCS, or equivalent.

Save and search through your Slack history on a free Slack plan

Hey everybody! As some of you may know, I [recently joined Meilisearch](/blog/caro/)s a Developer Advocate. Part of my job is to help the community by answering questions, so my priority over the last few months has been to get to know Meilisearch. I believe the best way to learn new software is to use it just as any developer would: to build something. So, I set out to make a demo.

<Callout>
  This demo was created when the latest version of Meilisearch was v0.19, some of the workarounds described in this blogpost are no longer necessary due to the addition of new features in more recent versions of Meilisearch.
</Callout>

Meilisearch x MoMA
------------------

The first step was to find a nice dataset that I enjoyed working with. After several unsuccessful attempts to tame some unstructured datasets, I stumbled upon the [repository of the Museum of Modern Art (MoMA)](https://github.com/MuseumofModernArt/collection). What a lucky find! They have two datasets: artists and artworks. I decided to go for the artworks dataset since it has all the essential information about each art piece: title, artist, dimensions, medium, even the artist’s biography. But the best part is that it’s available in JSON format! No conversion needed, no MongoDB dump to restore, no scraping: Meilisearch ready 😀

I used [Meilisearch JavaScript](https://github.com/meilisearch/meilisearch-js) to create the indexes, add the documents, and customize the settings. For the front-end, I decided to go for [Instant Meilisearch](https://github.com/meilisearch/meilisearch-js-plugins/tree/main/packages/instant-meilisearch) combined with [Vue InstantSearch](https://github.com/algolia/vue-instantsearch/) as described in the [meilisearch-vue repository](https://github.com/meilisearch/meilisearch-vue/). I’m a little lazy, so if I find a tool that provides nice results effortlessly, I will use it! Fortunately, InstantSearch provides all the front-end tools to customize the search environment at will, so you can experience the power of Meilisearch and its search-as-you-type feature with just a few lines of code. Finally, I tried to add some decent styling, but it’s not my forte 😅 I apologize in advance for the visual design!

**You can see the result** [**here**](https://moma.meilisearch.com/)**.**

![Web interface with searchbar and results for the query "Picasso"](https://unable-actionable-car.media.strapiapp.com/Capture_d_e_cran_2021_02_18_a_16_40_57_41c7a62d0f.png)

Solving Problems
----------------

So, I had found a dataset, indexed it in a Meilisearch instance, and set up a front-end for the search. All done, right? Not exactly; now came the time to iterate and make the search results feel good.

I was lucky to find a structured JSON dataset that worked effortlessly with Meilisearch. Nevertheless, I had to make some small changes to better display the results. Since Meilisearch’s [automatic highlighting](https://www.meilisearch.com/docs/learn/what_is_meilisearch/features#highlighting) doesn’t work on query results that are stored in an array, I had to **convert array values into strings** before adding them.

I also wanted to allow users to **sort the results by date**. Since the date field didn’t have a standard format, I had to retrieve the year and store it in a new \`sortByDate\` field. Then there was another problem: Meilisearch doesn’t support sorting at query time (**at least, not yet**)! To circumvent that and implement this feature, I created two more indexes with custom ranking rules desc(DateToSortBy) and asc(DateToSortBy). Every time you change the sorting option in the drop-down menu, Meilisearch is actually searching in a completely different index, but it’s so fast that the change is not visible to the human eye 🤯

Here you can see the sorting in action:

![Web interface with the query "Picasso" sorting by ascending and then descending date gif](https://unable-actionable-car.media.strapiapp.com/sorting2_f59a0e2432.gif)

🧐 You might have noticed that I said Meilisearch doesn’t support query-time sorting **yet**—that’s because it’s one of the most requested features on [our public roadmap](https://roadmap.meilisearch.com/tabs/1-under-consideration), and it’s now under consideration 🥳 So if you haven’t done it yet, take a look at Meilisearch’s roadmap and vote for your favorite feature or submit your own ideas! **👉 Update note:** query-time sorting was released with Meilisearch v0.22.

The most challenging part of creating this demo was working with an unknown dataset of 138,151 documents, because the large number of documents makes it difficult to know the possible values and length of the different fields. I first wanted the user to be able to filter results by \`medium\` (e.g.  “photograph” or “paint”). That is, until I realized some of the artworks had \`medium\` fields that were many lines long! Take this one for example:

> "H (vol. IX): Cover with lithographed manuscript text by Kliun on front; 1 lithographed illustration by Terent'ev; lithographed manuscript text. L (vol. XIII): Cover with lithographed illustration and manuscript design by Kirill Zdanevich on front; lithographed manuscript and typed text. M (vol. XIV): Cover with lithographed manuscript design and illustration on front by Kirill Zdanevich; lithographed manuscript and typed text. P (vol. XVII): Cover with lithographed manuscript design on front by Goncharova; and lithographed manuscript text by Mikhail Pustynin and Olga Olesha-Suok"

Can you imagine having this as a [facet filter](https://www.meilisearch.com/docs/learn/advanced/faceted_search)? Not very nice for the UI…

Close to Perfect
----------------

The easiest part of making this demo was setting up Meilisearch. Once I decided which attributes I wanted to be [displayed](https://www.meilisearch.com/docs/learn/configuration/displayed_searchable_attributes#displayed-fields) and [searchable](https://www.meilisearch.com/docs/learn/configuration/displayed_searchable_attributes#searchable-fields), the rest was a piece of cake. Aside from the highlighting and sorting issues mentioned above, the last thing I changed was [the attribute ranking order](https://www.meilisearch.com/docs/learn/core_concepts/relevancy#attribute-ranking-order). By default, the attribute ranking order is generated automatically based on the attributes' order of appearance in the first document indexed. In my case, the first attribute was \`title\`, which meant that artwork with matching query terms in the \`title\` field topped the results list. This delivered decent results, but I was pretty sure I could do better.

I not only had to consider which attributes are most important for this particular dataset; I also had to think about what types of queries are more likely to be made. If a user queries for a specific art piece using its title, he will get relevant results because the words used are unlikely to be found in lots of other fields. However, if a user queries the name of a famous artist, it is very possible to find that name in an artwork title, for example as a tribute. So I decided to place \`artist\` at the top of [the searchable attributes list](https://www.meilisearch.com/docs/learn/configuration/displayed_searchable_attributes#the-searchableattributes-list). Before I made the change, this is what you would find among the first results when searching for “Van Gogh” :

![Information and image of a litograph called "Do You Leave without seeing the 150 Van Gogh's" by Willem Jacob Henri Berend Sandberg](https://unable-actionable-car.media.strapiapp.com/Capture_d_e_cran_2021_02_22_a_11_34_08_073b869794.png)

As you can see, it’s an art piece created by an artist named Willem Jacob Henri Berend Sandberg where the name “Van Gogh” appears in the title, but it’s not an actual Van Gogh.

Now, after changing the order of the searchable attributes in [the settings](https://www.meilisearch.com/docs/reference/api/settings#searchable-attributes), the first result is well and truly a piece of art created by Vincent Van Gogh:

![Information and image of the litograph "The Potato Eaters" by Vincent van Gogh](https://unable-actionable-car.media.strapiapp.com/Capture_d_e_cran_2021_02_22_a_11_41_41_7bdabf659b.png)

  
Pretty amazing how a simple change like this can impact the search results. Meilisearch is ultra relevant out-of-the-box, but it lets you tune the relevancy of the results according to your needs, and that is essential to provide an awesome experience for the end user.

An Open-Source Museum Experience
--------------------------------

The demo source code is available on [GitHub](https://github.com/meilisearch/demo-MoMA/). Feel free to play with it and show me what you can do! 😁

How cool is it that we’re able to access this extraordinary catalog? Thanks to MoMA’s generosity, you can explore the museum from anywhere in the world. And now, thanks to Meilisearch, it’s only 50 milliseconds away 🚀

* * *

_Photo by [Robert Bye](https://unsplash.com/@robertbye?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)_

Meilisearch latest news and company updates