Skip to content

Latest commit

 

History

History
315 lines (242 loc) · 13.2 KB

quick_start.md

File metadata and controls

315 lines (242 loc) · 13.2 KB

Quick Start

This quick tour will help you get started with MeiliSearch in only a few steps.

Download and Launch

First of all, let's download and run MeiliSearch.

curl -L https://install.meilisearch.com | sh
./meilisearch

You should see the following response:

888b     d888          d8b 888 d8b  .d8888b.                                    888
8888b   d8888          Y8P 888 Y8P d88P  Y88b                                   888
88888b.d88888              888     Y88b.                                        888
888Y88888P888  .d88b.  888 888 888  "Y888b.    .d88b.   8888b.  888d888 .d8888b 88888b.
888 Y888P 888 d8P  Y8b 888 888 888     "Y88b. d8P  Y8b     "88b 888P"  d88P"    888 "88b
888  Y8P  888 88888888 888 888 888       "888 88888888 .d888888 888    888      888  888
888   "   888 Y8b.     888 888 888 Y88b  d88P Y8b.     888  888 888    Y88b.    888  888
888       888  "Y8888  888 888 888  "Y8888P"   "Y8888  "Y888888 888     "Y8888P 888  888

Database path:       "./data.ms"
Server listening on: "127.0.0.1:7700"

You can download & run MeiliSearch in many different ways (i.e: docker, apt, homebrew, ...).

Environment variables and options can be set before and on launch to configure MeiliSearch. Amongst all the options, you can use the master key and the port options.

Communicate with MeiliSearch

Now that your MeiliSearch server is up and running, you should be able to communicate with it.

Communication to the server is done through a RESTful API or one of our SDKs.

Add Documents

To add documents to MeiliSearch you must provide:

  • Documents in the form of an array of JSON objects.
  • An index name (uid). An index is where the documents are stored.

If the index does not exist, MeiliSearch creates it when you first add documents.

To be processed, all documents must share one common which will serve as for the document. Values in that field must always be unique.

{
  "id": "123",
  "title": "Superman"
}

The primary key is id, the document's unique identifier is 123.

There are several ways to let MeiliSearch know what the primary key is. The easiest one is to have an that contains the string id in a case-insensitive manner.

Below is an example to showcase how to add documents to an index called movies. To follow along, first right-click this link and download the file: movies.json. Then, move the downloaded file to your working directory.

API references

Checking Updates

Most actions in MeiliSearch are asynchronous, including the document addition process.

Asynchronous actions return a JSON object that contains only an updateId attribute. This is a successful response, indicating that the operation has been taken into account, but may not have been executed yet.

You can check the status of the operation via the updateId and the get update status route. Checking the update status of an operation is never mandatory, but can prove useful in tracing the origin of errors or unexpected behavior.

See our guide on asynchronous updates or the updates API reference for more information.

Search

Now that your documents have been ingested into MeiliSearch, you are able to search them.

MeiliSearch offers many parameters that you can play with to refine your search or change the format of the returned documents. However, by default, the search is already relevant.

The search engine is now aware of your documents and can serve those via an HTTP server.

MeiliSearch response:

{
  "hits": [
    {
      "id": "29751",
      "title": "Batman Unmasked: The Psychology of the Dark Knight",
      "poster": "https://image.tmdb.org/t/p/w1280/jjHu128XLARc2k4cJrblAvZe0HE.jpg",
      "overview": "Delve into the world of Batman and the vigilante justice tha",
      "release_date": "2008-07-15"
    },
    {
      "id": "471474",
      "title": "Batman: Gotham by Gaslight",
      "poster": "https://image.tmdb.org/t/p/w1280/7souLi5zqQCnpZVghaXv0Wowi0y.jpg",
      "overview": "ve Victorian Age Gotham City, Batman begins his war on crime",
      "release_date": "2018-01-12"
    }
    ...
  ],
  "offset": 0,
  "limit": 20,
  "processingTimeMs": 2,
  "query": "botman"
}

API references

Web Interface

We also deliver an out-of-the-box web interface in which you can test MeiliSearch interactively.

To do so, open your web browser and enter MeiliSearch address (in our case: http://127.0.0.1:7700) into the browser address bar. This will lead you to a web page with a search bar that will allow you to search in the selected index.



Integrate with Your Project

The only step missing now is adding the search bar to your project. The easiest way of achieving this is to use instant-meilisearch: a developer tool that generates all the search components needed to start searching.

Instant MeiliSearch works on common front-end environments, such as JavaScript, React, and Vue.js.

instant-meilisearch uses InstantSearch an open-source library that generates everything you need from a search interface.

Let's Try!

  • Create an html file, for example, index.html.
  • Open it in a text editor (e.g. Notepad, Sublime Text, Visual Studio Code).
  • Copy-paste any of the code examples below and save the file.
  • Open index.html in your browser (double click on it in your folder).

We use browser builds for ease of integration. It is possible to do this with npm or yarn. Please refer to instant-meilisearch for documentation.

:::: tabs

::: tab JavaScript

The following code sample uses plain JavaScript.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@meilisearch/instant-meilisearch/templates/basic_search.css" />
  </head>
  <body>
    <div class="wrapper">
      <div id="searchbox" focus></div>
      <div id="hits"></div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/@meilisearch/[email protected]/dist/instant-meilisearch.umd.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4"></script>
    <script>
        const search = instantsearch({
            indexName: "movies",
            searchClient: instantMeiliSearch(
                "http://localhost:7700"
            )
            });

            search.addWidgets([
              instantsearch.widgets.searchBox({
                  container: "#searchbox"
              }),
              instantsearch.widgets.configure({ hitsPerPage: 8 }),
              instantsearch.widgets.hits({
                  container: "#hits",
                  templates: {
                  item: `
                      <div>
                      <div class="hit-name">
                          {{#helpers.highlight}}{ "attribute": "title" }{{/helpers.highlight}}
                      </div>
                      </div>
                  `
                  }
              })
            ]);
            search.start();
    </script>
  </body>
</html>

The code above comes in multiple parts:

  • The first four lines of the <body> add both searchbox and hits elements. Ultimately, instant-meilisearch adds the search bar and search results in these elements.
  • <script src=".."> tags are CDNs that import libraries needed to run instant-meilisearch.
  • The JavaScript part is where you customize instant-meilisearch.

To use instant-meilisearch using npm or yarn please visit instant-meilisearch.

:::

::: tab Vue.js

The following code sample uses Vue.js framework.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@meilisearch/instant-meilisearch/templates/basic_search.css" />
  </head>
  <body>
    <div id="app" class="wrapper">
      <ais-instant-search :search-client="searchClient" index-name="movies" >
        <ais-configure :hits-per-page.camel="10" />
        <ais-search-box placeholder="Search here…" class="searchbox"></ais-search-box>
        <ais-hits>
          <div slot="item" slot-scope="{ item }">
            <ais-highlight :hit="item" attribute="title" />
          </div>
        </ais-hits>
      </ais-instant-search>
    </div>
  </body>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue-instantsearch/dist/vue-instantsearch.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@meilisearch/instant-meilisearch/dist/instant-meilisearch.umd.min.js"></script>
  <script>
    Vue.use(VueInstantSearch)
    var app = new Vue({
        el: '#app',
        data: {
            searchClient: instantMeiliSearch('http://127.0.0.1:7700')
        }
    })
  </script>
</html>

The code above comes in multiple parts:

  • In Vue.js customization happens directly in the <body> tag. To make instant-meilisearch work with Vue.js some components must be added. In the above example, ais-instant-search, ais-search-box and ais-hits are mandatory components to generate theinstant-meilisearch interface.
  • <script src=".."> tags are CDNs that import libraries needed to run instant-meilisearch with Vue.js.
  • The <script> containing JavaScript initialize Vue.js. The code creates a new Vue instance that is mandatory to link Vue.js with the DOM.

To use instant-meilisearch in Vue.js using npm or yarn please visit meilisearch-vue.

:::

::: tab React

The following code sample uses React framework.

<!DOCTYPE html>
<head>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@meilisearch/instant-meilisearch/templates/basic_search.css" />
</head>
<html>
  <body>
      <div id="app" class="wrapper"></div>
  </body>
  <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/ReactInstantSearchDOM.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@meilisearch/instant-meilisearch/dist/instant-meilisearch.umd.min.js"></script>
  <script>
    const { InstantSearch, SearchBox, Hits, Highlight, Configure }  = ReactInstantSearchDOM;
    const searchClient = instantMeiliSearch(
      "http://localhost:7700"
    );

    const App = () => (
      React.createElement(InstantSearch, {
        indexName: "movies",
        searchClient: searchClient
      }, [
        React.createElement(SearchBox, { key: 1 }),
        React.createElement(Hits, { hitComponent: Hit, key: 2 }),
        React.createElement(Configure, { hitsPerPage: 10 })]
      )
    );
    function Hit(props) {
        return React.createElement(Highlight, {
          attribute: "title",
          hit: props.hit
        })
    }
    const domContainer = document.querySelector('#app');
    ReactDOM.render(React.createElement(App), domContainer);
  </script>
</html>

The code above comes in multiple parts:

  • The <body> of the page is the entry point for React. instant-meilisearch adds the search bar and search results here by manipulating the DOM.
  • <script src=".."> tags are CDNs that import libraries needed to run instant-meilisearch in React.
  • The <script> containing JavaScript initalize React and renders the code that will be rendered in the body. Customization of instant-meilisearch happens here as well.

To use instant-meilisearch in React using npm or yarn please visit meilisearch-react.

:::

::::

You should now have a MeiliSearch database and a working front-end search interface 🚀🔥 Check out What’s Next to continue your MeiliSearch journey.