Integrate a relevant search bar to your documentation

And you are probably wanting the same for your own documentation!

This tutorial will guide you through the steps of building a relevant and powerful search bar for your documentation 🚀

Run a MeiliSearch Instance
Integrate the Search Bar

First of all, you need your documentation content to be scraped and pushed into a MeiliSearch instance.

You can install and run MeiliSearch on your machine using .

There are .

MeiliSearch is open-source and can run either on your server or on any cloud provider.

NOTE

The host URL and the API key you will provide in the next steps correspond to the credentials of this MeiliSearch instance.
In the example above, the host URL is http://localhost:7700 and the API key is myMasterKey.

The Meili team provides and maintains a scraper tool (opens new window) to automatically read the content of your website and store it into an index in MeiliSearch.

The scraper tool needs a configuration file to know what content you want to scrape. This is done by providing selectors (e.g. the HTML tag).

Here is an example of a basic configuration file:

{
  "index_uid": "docs",
  "start_urls": ["https://www.example.com/doc/"],
  "sitemap_urls": ["https://www.example.com/sitemap.xml"],
  "selectors": {
    "lvl0": {
      "selector": ".docs-lvl0",
      "global": true,
      "default_value": "Documentation"
    },
    "lvl1": {
      "selector": ".docs-lvl1",
      "global": true,
      "default_value": "Chapter"
    },
    "lvl2": ".docs-content .docs-lvl2",
    "lvl3": ".docs-content .docs-lvl3",
    "lvl4": ".docs-content .docs-lvl4",
    "lvl5": ".docs-content .docs-lvl5",
    "text": ".docs-content p, .docs-content li"
  }
}

The index_uid field is the index identifier in your MeiliSearch instance in which your website content is stored. The scraping tool will create a new index if it does not exist.

The docs-content class is the main container of the textual content in this example. Most of the time, this tag is a <main> or an <article> HTML element.

Every searchable lvl elements outside this main documentation container (for instance, in a sidebar) must be global selectors. They will be globally picked up and injected to every document built from your page.

If you use VuePress for your documentation, you can check out the we use in production.
In our case, the main container is theme-default-content and the selector the titles and sub-titles are h1, h2…

TIP

More optional fields are available (opens new window) to fit your need.

You can run the scraper with Docker. With our local MeiliSearch instance set up at , we run:

NOTE

If you don’t want to use Docker, here are other ways to run the scraper (opens new window).

<absolute-path-to-your-config-file> should be the absolute path of your configuration file defined at .

The API key you must provide should have the permissions to add documents into your MeiliSearch instance. In a production environment, we recommend providing the private key instead of the master key, as it is safer and it has enough permissions to perform such requests.
More about MeiliSearch authentication.

TIP

We recommend running the scraper at each new deployment of your documentation, .

If your documentation is not a VuePress application, you can directly go to this section.

If you use VuePress for your documentation, we provide a . This plugin is used in production in the MeiliSearch documentation.

yarn add vuepress-plugin-meilisearch

In your config.js file:

module.exports = {
    [
      "vuepress-plugin-meilisearch",
      {
        "hostUrl": "<your-meilisearch-host-url>",
        "apiKey": "<your-meilisearch-api-key>",
        "indexUid": "docs"
      }
    ],
  ],

The hostUrl and the apiKey fields are the credentials of the MeiliSearch instance. Following on from this tutorial, they are respectively http://localhost:7700 and myMasterKey.
indexUid is the index identifier in your MeiliSearch instance in which your website content is stored. It has been defined in the config file.

These three fields are mandatory, but more to customize your search bar.

WARNING

Since the configuration file is public, we strongly recommend providing the MeiliSearch public key in a production environment, which is enough to perform search requests.
Read more about MeiliSearch authentication.

If you don’t use VuePress for your documentation, we provide a to integrate a powerful and relevant search bar to any documentation website.

WARNING

We strongly recommend providing the MeiliSearch public key in a production environment, which is enough to perform search requests.
Read more about .

The default behavior of this library fits perfectly for a documentation search bar, but you might need some customizations (opens new window).

NOTE

For more concrete examples, you can check out this or this more advanced Vue file (opens new window).

At this point you should have a working search engine on your website, congrats! 🎉
You can check if you now want to run MeiliSearch in production!

Add a Search Bar to Your Docs

Integrate a relevant search bar to your documentation