DEV Community: Meilisearch

Vector storage is coming to Meilisearch to empower search through AI

Strift — Tue, 11 Jul 2023 11:05:36 +0000

Vector search enables efficient retrieval of objects sharing similar characteristics. This AI-powered search technique uses embedding vectors. These vectors are mathematical representations of objects generated by machine learning models (like LLMs). In the upcoming 1.3 release, Meilisearch will support storing and searching vectors.

The release candidate for Meilisearch v1.3 is out—try it now!

Powering the Future of Search

Vector search might be the dawn of a new era for search. Its use cases are numerous. In ecommerce, it enables offering recommendations for similar products. It also allows building multi-modal search, like image or audio search. Building upon conversational AI technologies enables the creation of Q&A applications. Combining vector search with user-provided information like geolocation and search history can power even more contextual search experiences.

Vector search is also the foundation for semantic search, which aims to understand the query’s meaning. Conversely, traditional lexical search only matches keywords. With semantic search, a warm clothes query could give results like gloves, coat, and more results related to winter clothing.

Vector search unlocks a world of new capabilities for search. Take a look at what some users have already implemented:

similar videos recommendations on a site listing Ruby conferences
a documentation chatbot proof of concept using GPT3.5 and LangChain

Getting started with Meilisearch vector store

Starting with v1.3, you can use Meilisearch as a vector store. Meilisearch allows you to store vector embeddings alongside your documents conveniently. You will need to create the vector embeddings using your third-party tool of choice (Hugging Face, OpenAI). As we published the first v1.3 release candidate, you can try out vector search today.

First, pull the release candidate by using this Docker image:

docker run -p 7700:7700 -v $(pwd)/meili_data:/meili_data getmeili/meilisearch:v1.3.0-rc.0

Then, enable the vector store experimental feature:

curl \
  -X PATCH 'http://localhost:7700/experimental-features/' \
  -H 'Content-Type: application/json'  \
  --data-binary '{
    "vectorStore": true
  }'

💡 This guide uses curl to make HTTP requests to communicate with Meilisearch. When v1.3 will officially be released, you will be able to use the corresponding SDK methods instead.

Meilisearch now accepts a _vector field in your documents. Use it to store the vector embeddings corresponding to your document in this field.

curl -X POST -H 'content-type: application/json' \
     'localhost:7700/indexes/songs/documents' \
     --data-binary '[
         { "id": 0, "_vectors": [0, 0.8, -0.2], "title": "Across The Universe" },
         { "id": 1, "_vectors": [1, -0.2, 0], "title": "All Things Must Pass" },
         { "id": 2, "_vectors": [[0.5, 3, 1], [-0.2, 4, 6]], "title": "And Your Bird Can Sing" }
     ]'

After storing your vectorized documents in Meilisearch, you can query them using the search or multi-search route. To do this, you need to compute the vector of your query (using a third-party tool) and send it in the vector field.

curl -X POST -H 'content-type: application/json' \
   'localhost:7700/indexes/songs/search' \
   --data-binary '{ "vector": [0, 1, 2] }'

When using vector search, returned documents include a semanticScore field:

{
  "hits": [
    { "id": 0, "_vectors": [0, 0.8, -0.2], "title": "Across The Universe", "_semanticScore": 0.6754 },
    { "id": 1, "_vectors": [1, -0.2, 0], "title": "All Things Must Pass", "_semanticScore": 0.7546 },
    { "id": 2, "_vectors": [[0.5, 3, 1], [-0.2, 4, 6]], "title": "And Your Bird Can Sing", "_semanticScore": 0.78 }
  ],
  "query": "",
  "vector": [0, 1, 2],
  "processingTimeMs": 0,
  "limit": 20,
  "offset": 0,
  "estimatedTotalHits": 2
}

📢 This API is experimental. You can help us improve it by sharing your feedback in this Github discussion.

A First Step Toward Semantic Search

Vector search is our first step towards semantic search. But our long-term goal is to provide hybrid search—combining the benefits of full-text and semantic search to provide the most relevant search experience. Clément Renault, founder and CTO of Meilisearch, shared his thoughts on Github about exploring semantic search — read for a founder’s perspective. We can’t wait to share more with you!

Drop your email below to learn more about our progress with AI-powered search. We’ll keep you posted on all updates regarding vector search & semantic search.

We’re excited to walk our first steps toward semantic search. We can’t wait to hear your thoughts on integrating Meilisearch as a vector store. You can give your feedback in this Github discussion.

You can stay in the loop by subscribing to our newsletter. To learn more about Meilisearch's future and help shape it, look at our roadmap and participate in our Product Discussions.

For anything else, join our developers community on Discord.

I’ll see you there.

How to deliver the best search results: inside a full text search engine

Carolina — Tue, 04 Jul 2023 10:30:00 +0000

Search bars are an integral part of browsing the web. Whether we are shopping for clothes, enjoying music, or planning a vacation, there is always a dedicated search engine at work to simplify our lives. Have you ever wondered how these search engines actually work? In this article, we will delve into the inner workings of one of them: Meilisearch.

Indexing time: from data to documents

Indexing is a fundamental process that encompasses the collection, parsing, and storage of data for subsequent retrieval. It plays a crucial role in enabling search engines to deliver fast and relevant results.

A performant storage engine

Meilisearch stores data in the form of discrete records called "documents," which are grouped together into collections known as "indexes." Under the hood, Meilisearch uses the LMDB (Lightning Memory-Mapped Database) key-value store which has proven stability and extensive usage in database applications. As the name implies, key-value stores are storage systems that organize data as a collection of key-value pairs.

Example of key-value entries

Key-value stores offer flexibility, fast access times, and efficient performance, contributing to quick and responsive interactions for users. By permitting only a single writing process at a time, LMDB avoids synchronization-related issues. As a result, it enables unlimited concurrent readers to have fast access to up-to-date, consistent data.

Before storing data in its key-value store, Meilisearch must preprocess it thoroughly. That’s where tokenization comes in.

From words to tokens

Tokenization involves two main processes: segmentation and normalization.

Segmentation consists in splitting a sentence or phrase into smaller units called tokens.

Meilisearch uses (and maintains) the open-source tokenizer named Charabia. The tokenizer is responsible for retrieving all the words (or tokens) from document fields.

👉 In practice, Meilisearch users can configure which fields should be searchable, allowing Charabia to know which fields should be tokenized.

Then comes normalization. Words are normalized based on each language’s particularities. For a romance language like French, this process includes setting the word in lowercase letters and removing diacritical marks such as accents. For instance, a sentence like “Le café de Nicolas” is transformed into “le cafe de nicolas”.

Example of the segmentation and normalization stages in the tokenization process

After segmenting and normalizing words, the engine needs to classify them. Using the appropriate data structure to organize tokens is crucial for performance. This will later allow swift retrieval of the most relevant search results.

Storing tokens

Modern full-text search engines like Meilisearch come with features such as prefix search, typo tolerance, and geo search. Each data structure has its own advantages and disadvantages. When designing the search engine, our team carefully selected the ones best suited to enable these features without compromising on speed.

Throughout this section, we will explore which data structures powers Meilisearch.

Inverted index

First and foremost, we need to talk about inverted indexes. Without a doubt, it’s the data structure that stands out by its importance. Meilisearch uses it to return documents fast upon search.

An inverted index maps each word in a document to the set of documents where that term appears along with additional information like their position in the document.

Illustration of an inverted index generated from given documents, showcasing the mapping of keywords to document IDs

By storing words once and associating them with the documents where they appear, inverted indexes leverage the redundancy of terms across documents. Thanks to this, Meilisearch does not need to browse all documents in order to find a given word, resulting in faster searches.

Meilisearch creates approximately 20 inverted indexes per document index, making it one of the data structures with the highest number of instances. Indeed, to provide a search-as-you-type experience, the engine needs to precompute a lot at indexing time: word prefixes, documents containing filterable attributes, and more. For a better understanding of how inverted indexes work read more on indexing best practices.

💡 You can find the complete list of Meilisearch inverted indexes on GitHub.

Roaring bitmap

Roaring bitmaps are compressed data structures designed for efficiently representing and manipulating sets of integers.

Meilisearch uses roaring bitmaps widely throughout its inverted indexes to represent document IDs. Roaring bitmaps offer a space-efficient way to store large sets of integers and perform set operations like union, intersection, and difference. These operations play a crucial role in refining search results by allowing the inclusion or exclusion of specific documents based on their relationship with others.

Finite-state transducer

A finite-state transducer (FST) is a structured data representation ideal for performing string-matching operations. It represents a sequence of states ordered from smallest to largest, with words arranged in lexicographic order.

ℹ️ Lexicographic order is a method of arranging or sorting items, such as words or symbols, based on their alphabetical or numerical sequence.

A finite-state transducer is also called a word dictionary because it contains all words present in an index. Meilisearch relies on the utilization of two FSTs: one for storing all words of the dataset, and one for storing the most recurrent prefixes.

FSTs are useful because they support compression and lazy decompression techniques, optimizing memory usage and storage. Additionally, by using automata such as regular expressions, they can retrieve subsets of words that match specific rules or patterns. Moreover, this enables the retrieval of all words that begin with a specific prefix, empowering fast, comprehensive search capabilities.

The FST, with its compact design, presents the added advantage of being a smaller data structure than the inverted index. As we will see later, this contributes to faster and more efficient reading operations. You can learn more about the topic in this comprehensive article on finite-state reducers.

R-tree

R-trees are a type of tree used for indexing multi-dimensional or spatial information. Meilisearch leverages R-trees to power its geo search functionality.

The R-tree associates geographical coordinates with the identifiers of the document to which it belongs. By organizing coordinates this way, it enables Meilisearch to perform spatial queries with remarkable efficiency. These queries allow users to find nearby points, points within a specific area, or points that intersect with other spatial objects.

Search time: query processing

Modern search experiences only require you to start typing to get results. To achieve this search-as-you-type experience, Meilisearch precomputes a list of the most frequent prefixes.

To be tolerant to typos, Meilisearch uses finite-state transducers in conjunction with the Levenshtein algorithm. This algorithm calculates the Levenshtein distance which can be thought of as the cost of transforming a string into another. In other words, it quantifies the number of transformations required for a word to be converted into another word.

In the context of the Levenshtein algorithm, possible transformations are:

insertions, e.g. hat -> chat
deletions, e.g. tiger -> tier
substitutions, e.g. cat -> hat
transpositions or swaps, e.g. scared -> sacred

FSTs generate all possible variations of a word within a specified edit distance, enabling the engine to calculate the Levenshtein distance and accurately detect typos by comparing user input against a dictionary of valid words.

It becomes apparent that there are many factors to consider when processing a search request. Has the user finished typing? Are there typos in the query? Which documents should appear first in the search results?

Let’s discuss how Meilisearch processes search queries and how it refines and sorts search results.

Query graph

Each time it receives a search query, Meilisearch creates a query graph representing the query and its possible variations.

To compute these variations, Meilisearch applies concatenation and splitting algorithms to the query terms. The variations considered also include potential typos and synonyms–if the user set them. As an example, let’s examine the query: the sun flower. Meilisearch will also search for the following queries:

the sunflower: concatenation
the sun flowed: substitution
the sun flowers: addition

Consider now a more complex query: the sun flower is facing the su, the query graph should look like this:

Visual generated using our internal debugging tool, powered by D2, showcasing the execution process of search requests

As illustrated above, the graph represents different interpretations of the search query. The engine precomputes the word variations (and their cost) for each query term. Moreover, it detects whether the last query term is a prefix (not followed by a space), thus signaling the need to consult the prefix database.

So how does the engine utilize a query graph?

As we saw earlier, during the indexing process, Meilisearch identifies all documents that have filterable attributes, such as genre. Subsequently, it generates a list of document IDs associated with each attribute value, like comedy or horror. First of all, when a filter is applied, Meilisearch narrows down the potential results to the document IDs that fulfill the filter criteria.

Next, it uses the query words and the variations generated in the query graph and searches for matching words in the finite-state transducer (that is, our word dictionary). If the word is considered a prefix, it will also look it up in the prefix FST.

When encountering words in a FST, it searches them within the inverted index—which contains a mapping of words to document IDs— to retrieve the corresponding document IDs.

Finally, the engine performs an intersection to identify the documents that contain the words in the query graph and meet the filter criteria.

Let's take an example to better understand query processing: suppose you have a dataset of songs. The search query is John Lennon. The user wants to retrieve only songs released between 1957 and 1975.

First, Meilisearch retrieves the document IDs of songs within that time frame. Then, after checking in the FST that the words in the query graph exist, Meilisearch retrieves the IDs of the documents that contain either John, Lennon, or both. It also retrieves the possible variations, but we are not including them in this example for the sake of simplicity.

Diagrams illustrating the operations involved in retrieving documents based on a user query.

Finally, the intersection of the two sets of document IDs is taken (the purple area in the diagram.) This means only document IDs that appear in both sets are kept. In other words, Meilisearch retains the document IDs of songs released between 1957 and 1975 that contain either John, Lennon, or both.

What happens when several documents match the search query, how does the engine decide which one to return first? Which one is more relevant? Let's explore the rules allowing Meilisearch to determine how to rank results.

Relevancy

As we discussed earlier, the query graph includes possible variations of words. As a result, Meilisearch will also return documents with an artist, such as John Lebon, as part of the search results.

Fortunately, the query graph not only accounts for word variations but also assigns them the Levenshtein cost, which, among other factors, helps Meilisearch determine the relevancy of the search results.

Meilisearch sorts documents in the search results using bucket sort. This algorithm allows ranking documents based on a set of consecutive rules. By default, Meilisearch prioritizes rules as follows:

Words: sorts documents based on the number of matched query terms, with documents containing all query terms ranked first
Typo: sorts documents based on the number of typos, with documents matching query terms with fewer typos ranked first
Proximity: sorts documents based on the distance between matched query terms. Documents where query terms occur close together and in the same order as the query string are ranked first
Attribute: sorts documents based on the ranking order of attributes. Documents containing query terms in more important attributes are ranked first. Documents with query words at the beginning of attributes are considered more relevant than those with query words at the end
Sort: sorts documents based on the user-defined parameters set at query time, if active
Exactness: sorts documents based on the similarity of matched words with the query words

Meilisearch applies these rules sequentially, sorting results step by step. If two documents are tied after one rule, it uses the next rule to break the tie.

👉 Note that these rules are fully customizable, meaning you can add, delete, and reorder them as needed. Read more in the relevancy documentation.

By default, Meilisearch returns up to 1000 documents per search, prioritizing delivery of the most relevant results rather than all matching results. In other words, Meilisearch prioritizes efficiency and relevance over exhaustive results to ensure an optimized search experience.

Conclusion

Search engines are complex systems that encompass multiple interconnected components, all working together to deliver a seamless search experience. While the inner workings may differ among search engines, we have explored the underlying mechanisms that power a modern search engine.

Meilisearch is currently exploring the vast realm of semantic search. AI-powered search is reshaping the way we understand queries and documents, opening up new possibilities and use cases. If you’re eager to experience it firsthand, we invite you to try our vector search experimental feature—your feedback would be greatly valuable!

Meilisearch is an open-source search engine that not only provides state-of-the-art experiences for end users but also a simple and intuitive developer experience. Do you want to see Meilisearch in action? Try our demo. You can also run it locally or create an account on Meilisearch Cloud.

For more things Meilisearch, you can join the community on Discord or subscribe to the newsletter. You can learn more about the product by checking out the roadmap and participating in product discussions.

Prose linting with Vale

Maryam — Mon, 06 Mar 2023 12:39:45 +0000

Writing is a time-consuming process. Depending on the writer and the review process, it can take a while to get content ready for publication. Whether you’re a solo writer or a big team, prose linters can help ensure a consistent tone and style.

Similar to code linters, prose linters automatically check your text for errors. Unlike grammar checkers, which highlight violations of grammatical rules, prose linters focus on how you can make your text better by addressing common usage problems like extra spaces, repeated words, excessive use of jargon, sexist language, and incorrect capitalization.

Prose linters can also provide a framework for creating and enforcing an editorial style guide. This helps with the review process as you can now focus on reviewing the content itself instead of pointing out typos and preferred usage patterns. This is particularly important when working in open-source projects like Meilisearch, where you have many contributors unfamiliar with your style guide.

What is Vale?

Vale is an open-source, highly customizable, syntax-aware prose linter. It supports documents written in many different formats such as Markdown, HTML, reStructuredText, AsciiDoc, DITA, and XML.

Vale isn’t your only option when it comes to prose linting. There are many other open-source tools available, including proselint, textlint, and alex.

At Meilisearch, we decided to go with Vale because it’s fast, easy to set up, flexible, and comes with existing rules to help you get started.

Where do I start?

Though it may seem daunting, setting up Vale can be fairly straightforward if you start small and keep things simple. In this post, we’ll go over how to use Vale in a project much like Meilisearch’s documentation.

Step 1: Style guide

The first step is to create a style guide. A style guide ensures a consistent tone and style regardless of how big your team gets. It establishes standard practices when people may have different opinions, such as whether or not to use the oxford comma.

If you don’t have an in-house style guide, you can check out Google’s or Microsoft’s to help you get started. Over time you will memorize most of the rules, but it’s possible to overlook mistakes and sometimes forget the rules altogether. We’re only human.

And that is where Vale comes in. It allows you to “codify” a style guide and checks your text against all the rules in that style guide. If it detects any issues, it displays suggestions, warnings, or errors on the console.

Step 2: Install Vale

I’m using macOS and ran brew install vale in my console to install Vale.

If you’re using a different operating system, check out Vale’s documentation for installation instructions.

Verify the installation by typing vale -v in your console. If this command returns Vale’s version number, the installation was successful.

Finally, create the following files and folders:

├── .vale.ini
│   ├──  styles
│   │       ├── Style guide
│   │       └── Vocab

Step 3: Configuring Vale - vale.ini

Create a vale.ini file at the root of your repository. This is the Vale configuration file where you define what you want Vale to do and what files to lint. Let’s start with a basic setup—you can always add to it later based on your project’s needs.

StylesPath = .vale/styles
MinAlertLevel = suggestion

Vocab = word_list

[*.md]
BasedOnStyles = Meilisearch

StylesPath is where Vale looks for your style guide (more on that in the next step). The path can be relative or absolute to the location of the vale.ini file.
MinAlertLevel specifies the minimum alert level that Vale will report. By default, it’s set to warning. The other options are error and suggestion. An error indicates you did something wrong, like using extra spaces or making a typo. A warning isn’t as severe as an error, but indicates something you should avoid, like making sure your sentences don’t become too long. A suggestion is a recommendation to do something that is usually—but not always—a good idea, like breaking your sentence into two instead of using a semicolon. If a rule is set to suggestion, you will see suggestions, warnings, and errors. If it is set to warning, Vale will only show errors and warnings, no suggestions.
Vocab: This is where you create a directory containing the accept.txt and reject.txt files. Both files accept words, phrases, and regular expressions. If your text contains words that do not exist in the dictionary (e.g. “Meilisearch”), you can add them to accept.txt and Vale won’t angrily scream at you for making a “typo”. Vale will flag all occurrences listed in reject.txt as errors. This can be useful when you want writers to avoid a specific word—if you are writing about search engines and databases, for example, using “indexation” can be confusing.
[*.md] tells Vale to only lint markdown files. If you want to lint plain text files, use [*.txt].
BasedOnStyles specifies the style guide Vale should use for linting.

You can specify other settings, including what tokens and HTML tags to ignore and what Vale should consider an individual word. You can read more about the vale. ini file in Vale’s documentation.

Step 4: Rules and the styles folder

As I mentioned earlier, you need a style guide to use Vale. You then convert this style guide into something Vale can understand: rules.

Rules use different extension points to perform specific tasks. For example, the existence extension point looks for the existence of a particular token, repetition looks for repeated tokens, spelling implements spell checking, and so on. In Vale, each rule is a YAML file. The styles folder contains the individual rules that make up the style guide.

If you don’t want to create your own style guide or need a starting point to build from, Vale comes with ready-to-use style guides that you can apply to your docs and start linting. Here are some style guides that helped us get started:

You can find more on Vale’s GitHub repository.

Let’s start with a rule for sentence length. Your style would say something like, “Ensure sentences don’t exceed 40 words”. This is what the rule looks like as a YAML file:

# Warning: Meilisearch.SentenceLength

# Counts words in a sentence and alerts if a sentence exceeds 40 words.

extends: occurrence
message: 'Shorter sentences improve readability (max 40 words).'
scope: sentence
link: https://docs.gitlab.com/ee/development/documentation/styleguide/index.html#language
level: warning
max: 40
token: \b(\w+)\b

This rule counts the words in a sentence and throws a warning if it exceeds 40 words. The scope is set to sentence: this ensures that Vale does not apply this rule to other parts of the text, like headings or tables.

The level is set to warning. Written text is complicated, and Vale will find false positives. There are no sure-fire ways of deciding when a rule should be a suggestion, warning, or an error. You will need to make decisions and learn as you go.

I suggest reviewing your rules over time to update and, in some cases, delete outdated rules. Initially, the Meilisearch docs didn’t have a rule on sentence length. When we added it, the maximum length of a sentence was 45. Now it’s 40, and we plan on bringing it down to 35.

You can also enable or disable specific rules within a style guide by adding them to vale.ini:

Meilisearch.Headings = NO
Meilisearch.Spelling = NO
Meilisearch.Semicolons = NO

The above lines disable the Heading, Spelling, and Semicolons rules from the Meilisearch style guide.

Step 5: Run Vale

Now, when you use the following command on your console to lint your whole project:

vale .

Vale will check all your files against the rules stored in BasedOnStyles. If Vale detects any issues, it will display suggestions, warnings, and errors on the console.

You can also lint individual files using:

vale {file_path}

Step 6: Automate Vale checks

All the checks we’ve discussed so far are for your local files. Once you’re confident the rules work as intended, you can automate these checks using the Vale GitHub action! At the Meilisearch documentation repository, we configured it to run for every pull request. As mentioned before, Vale may find false positives. Since you don’t want a PR blocked because Vale isn’t working as it should, I recommend starting with a few rules, and slowly tweaking them to avoid failing checks.

Conclusion

That is all, folks! I hope I was able to help you get started with Vale (and a style guide). This was a quick overview to introduce you to Vale’s features. Tweaking it to your needs takes time and many, many iterations.

Once configured, Vale can automate parts of the review process and allow you to focus on the parts of a text that computers are not very good at. At least not yet.

Oh, and if you’re curious, check out our style guide on GitHub to see how we use Vale!

Meilisearch 1.0: the next stage in search

Guillaume Mourier — Tue, 21 Feb 2023 13:01:07 +0000

After three years of hard work and dedication, we are thrilled to announce the launch of Meilisearch 1.0. With this release, Meilisearch has taken a stride forward in its mission to help developers create fast, powerful, and reliable search experiences.

With more than 32,000 GitHub stargazers and 100,000 launches per month, Meilisearch is already well-loved by its community. Now, after countless hours spent polishing the API and architecture to perfection, we are confident and happy to release the first completely stable version of Meilisearch, with guaranteed compatibility through future versions.

Creating a seamless search experience for your users can be a daunting task, but it is crucial to help your business elevate user satisfaction, drive conversions, and increase retention. Enter Meilisearch v1: the most performant search engine on the market with zero setup required.

What is Meilisearch?

Meilisearch is an open-source, user-focused search engine that easily integrates with any website or application. It features powerful built-in capabilities such as search-as-you-type, typo tolerance, faceted search, geo search, and multi-tenancy. A suite of SDKs and libraries makes it easy to connect with popular coding languages and web tools. When it comes to languages, Meilisearch supports them all, with special optimizations for any language that uses whitespace to separate words, plus Chinese, Japanese, Hebrew, Thai, and Korean.

We found that, with our prior search engine *(Elasticsearch), 14%** of searches resulted in a purchase, and with Meilisearch, 20% of searches were resulting in a purchase. That's a huge improvement without a lot of development time: 1 out of 5 customers found the book they were looking for and purchased it.
- Andy Hunter, CEO of Bookshop.org*

From e-commerce to SaaS, media, and beyond, businesses from all industries trust Meilisearch to power their search needs. Don't let lackluster search hold you back any longer: try Meilisearch today.

Why do companies love Meilisearch?

Simplicity

We're a team of developers who understand the importance of a great developer experience. Even if you have the most flexible and powerful tool in the world, it doesn’t count for much if it’s painful to use and understand. That's why we made Meilisearch: to give developers the tool they need to create awesome search experiences, without provoking headaches or gray hairs.

The consistency and predictability of Meilisearch’s design make it easy to integrate into your chosen technical stack. Our comprehensive documentation and developer tools are designed to help you from start to success.

Meilisearch works out of the box with no configuration needed. But we understand that every project is different, so we've made customization easy. You can tailor it to your needs in just a few minutes, so you don't have to be a search expert to get the most out of Meilisearch.

Relevancy

Relevancy, meaning the quality and accuracy of the search results, is a crucial aspect of any search engine. Irrelevant or poor-quality results can lead to a poor user experience, reducing sales, and causing users to lose trust in your brand. Conversely, users are more likely to return to, trust, and engage with brands that provide relevant search experiences.

As a user, it felt like magic compared to other solutions I've tried. I'm not sure whether it's related to how typo tolerance works or if it's related to the default settings. Still, right after setting up Meilisearch with no particular tweak, I've got fantastically relevant results.
- Anthony Catel, Co-founder of minipouce

Meilisearch provides a pre-configured set of ranking rules that enable you to achieve high relevancy right out of the box, while also accepting customization to meet individual needs. These default settings were developed iteratively by working directly with our users, and are sure to satisfy almost all use cases.

Performance

In today's fast-paced digital world, search plays a crucial role in user experience. Being able to deliver relevant results quickly is key to the success of almost any product.

One report from Deloitte shows that a mere 0.1s change in load time can have a noticeable influence on the user journey, increasing conversions by 8% for retail sites and 10% for travel sites.

Meilisearch returns results in as little as 0.05s. It is designed from the ground up for performance, making it an essential addition to your technical stack.

What’s included?

Search-as-you-type

For a long time, users were accustomed to typing search queries, pressing enter, and waiting for a page to load to view results. Those days are over, as technological improvements have ushered in the age of “search-as-you-type.”

By providing results instantly as the user types their query, Meilisearch helps users make more precise searches and quickly find what they are looking for. In today’s internet, “search-as-you-type” is a must-have feature that greatly improves overall satisfaction and retention.

Typo tolerance

Typos happen. According to the VP of Search at Google, as many as 1 in 10 searches are misspelled. A Baymard Institute UX study also reports that out of 185 major e-commerce sites, 34% don’t return useful results when users misspell even a single character in a product title.

See Meilisearch in action here

These statistics highlight the importance of using a search solution that can effectively handle spelling mistakes. Meilisearch’s customizable typo tolerance allows for more accurate and relevant search results even when users don’t type perfectly. Even better, it isn’t limited to Latin-based languages.

Faceted search

E-commerce merchants with large catalogs have a particular challenge to overcome. Potential buyers can get overwhelmed by possibilities, becoming less likely to make a purchase simply due to the effort of making a decision.

Fortunately, faceted search interfaces solve this problem.

Faceted search is a powerful tool that gives customers the power to apply filters and narrow down search results based on their needs and desires. By helping shoppers view the products they’re looking for based on criteria such as size, color, and style, the likelihood of a purchase is increased.

Meilisearch makes it easy to integrate faceted search into any e-commerce storefront. With just a few lines of code, you can upgrade your store's search capabilities, increasing sales and customer satisfaction.

Geo search

Geo search, also known as location-based search or local search, is becoming increasingly important for modern web applications. With the fast-paced nature of today's world, people are constantly on the move and looking for quick and easy ways to find the information they need, such as nearby businesses, services, or other points of interest.

Meilisearch meets this need, providing simple methods to sort search results by their location or filter results based on a geographic radius. This helps developers build more personalized and modern applications.

API keys and multi-tenant indexes

Thanks to fine-grained API key management, you can personalize Meilisearch to comply with your organization’s security requirements. Create API keys with custom permissions and expiration dates to ensure secure and flexible access to your data.

If your application is storing sensitive data from multiple users in the same index, it's very important that each user can only search for their own documents. You can trust Meilisearch’s many SDKs to provide methods to generate tenant tokens.

What’s next?

We will stay devoted to our core concepts of simplicity, speed, and relevance to keep empowering all builders.

We’ll keep collaborating with the open-source community and focusing on the Developer Experience to ensure Meilisearch users can provide the best search experience in their websites and applications.

Start building with Meilisearch v1.0

You can get started with Meilisearch in just a few minutes—everything works out of the box, no configuration required! All you need to do is choose the hosting solution that fits your business requirements, add documents, and you’re off.

Try our solution: Meilisearch Cloud

Need to build fast, be compliant, or save resources? Meilisearch Cloud takes care of everything, so you can focus on the most important thing: making your users happy.

Build your own solution: self-hosting

Since Meilisearch is open-source, you can host your own Meilisearch instance. Run Meilisearch and start searching through your data in less than five minutes by following our quick start guide.

🧰 For both solutions, we provide a large number of developer tools and reliable documentation to help you connect your code base with Meilisearch.

Navigating search results: pagination vs infinite scroll vs load more

Maryam — Thu, 15 Dec 2022 13:00:01 +0000

Meilisearch v0.30 is out and brings with it the ability to create numbered page selectors. You can read more about the new features and updates from v0.30 in our release blog post.

This article will go over the different ways of navigating search results and the pros and cons of each method.

What is pagination, and what are some common alternatives?

Let’s say you go to an ecommerce website to buy a new pair of shoes. It would be quite overwhelming if you got 700 pairs of shoes to choose from as soon as the page loads—not to mention that fetching every pair of shoes would certainly slow down the site.

To avoid this, most websites will break search results up into chunks, such as pages, and load a certain number at a time based on input from the user.

There are three main ways to display large datasets: pagination, infinite scroll, and load more. Each method has benefits and downsides that make it suited for certain use cases and content types. For example, Google’s use of numbered pagination makes it easier to find a specific result again, while Twitter, Facebook, and Instagram use infinite scroll to keep users glued to their screens. Google uses load more on mobile devices to display search results.

Changing from one type of pagination to another can completely alter user experience. Imagine waking up to a paginated version of Twitter, where you have to continuously click a “Next” button to view more posts in your feed (thanks, Elon). This would completely change the way you interact with the site!

In making the choice of how to display search results, you decide how much content to show users at one time, what action they have to take to view more, and how convenient it is to find a specific result again.

Pagination

Pagination works by breaking search results down into separate pages. There are two main types of pagination interfaces: numbered ones, where you find a list of numbered pages at the bottom of each page, and unnumbered ones, where you navigate from page to page using the “Previous” and “Next” buttons.

Pagination is one of the most popular ways to display search results and is particularly common on ecommerce websites. Pagination breaks down content, making it easier to process. Since each page is distinct, users can easily return to items they liked or share them with others. This helps users to search for something specific instead of browsing through a never-ending list of items.

The biggest downside to pagination is that most users don’t look beyond the first few pages and hence never get to look at more results. When was the last time you went to the second page of Google’s search results?

Since the results are replaced with every new page, users need to switch between pages to compare results. In addition, pagination isn’t very mobile-friendly. Mobile users prefer load more or infinite scroll as it’s more intuitive. It also requires additional actions from the user: clicking the “Next” button and waiting for the page to load. This may also give the impression that pagination is slow.

Numbered page selection

Page numbers add clarity to the search process and guide users to what they’re searching for. Numbered page selection offers numerous advantages, such as:

Users can be shown the total number of pages of results, allowing them to estimate how long they will need to find a particular item. (“I have 25 pages worth of shoes to sift through!”)
With numbered pages, it’s clear that some pages are more relevant than others. (“I didn’t find those shoes on the first five pages, so this website probably doesn’t sell them.”)
Users can remember the positioning of an item, and numbered pages allow them to return to it faster. (“I liked the pink shoes on page 3.”)
Users can generally stop in the middle of a session and continue from where they left off. (“I stopped at page 5 yesterday.”)

“Previous” and “Next” buttons

In numberless pagination, users navigate via “Next” and “Previous” buttons instead of a list of numbered pages. This alternative to numbered pagination is often used for mobile displays where there isn’t enough space to display page numbers. Since there are only two buttons, it offers less precision, as users can’t jump to specific pages. However, it offers better performance as it isn’t necessary to calculate the total number of search results.

Infinite scroll

Infinite scroll has become increasingly popular over the past decade due to the rise in smartphones. It loads more content seamlessly as the user scrolls, reducing friction. It’s also more intuitive than pagination; you just keep scrolling to view more content! Additionally, since all the content is loaded to a single page, it may seem faster than traditional pagination.

The biggest downside to infinite scroll is poor usability. The page length increases infinitely, making it difficult to find previously viewed results again, nor can users bookmark or share a particular set of items on the list. Page performance slows down as more content is loaded, making the page “heavier”. Meanwhile, the site footer may be inaccessible since infinite scroll pushes it endlessly down as more content is loaded. Since Googlebot cannot emulate scrolling, infinite scroll also has a negative impact on SEO.

However, the greatest impact by far is on user behavior. At some point, users of infinite scroll will stop paying attention to individual results and begin to focus more on scrolling, leading to decreased engagement. You can read more about this in Baymard Institute's study on design patterns for loading products on desktops and mobile devices.

Based on the above, infinite scroll may not be the best solution for ecommerce websites. How do you find the pink shoes you liked 15-ish scrolls ago?

There is one use case where infinite scroll cannot be beat. For entertainment websites whose main purpose is to keep the users with no particular aim on the page for as long as possible, infinite scroll all but guarantees a longer time on site. This is why infinite scroll is closely linked with social media and other business models that rely on advertising or data harvesting.

Load more

Like infinite scroll, load more is a mobile-friendly option that works by extending one page infinitely. However, unlike infinite scroll, load more allows users to choose whether they want to view more results by clicking a “Load more” button at the bottom of the page. This critical difference gives users more control, making it easier, for example, to access the footer or keep track of a specific result. Studies show that it also increases the amount of attention users give to each individual item.

Load more shares many downsides with infinite scroll, such as poor page performance. Like infinite scroll, it’s not ideal for SEO as Googlebot cannot click the “Load more” button. This means it cannot crawl or index all of your content.

So, what do I use?

The short answer: it depends on the kind of product experience you want.

Pagination

Your users are looking for highly specific results
SEO is very important to you

Infinite scroll

You’re building a social media site
Your users want to explore a large amount of content

Load more

You want to hide your content behind a paywall
You want to build an ethical mobile experience
You want to gain some of the benefits of both pagination and infinite scroll

Or you could go hybrid! Consider Ikea: they use a load more button but also display the total number of search results and a progress bar, enabling users to see how many results they’ve viewed so far.

While we have covered the three main ways to display search results today, they are far from set in stone. At the end of the day, your goal is to help your users find the content they need. If you understand which key goals you want to accomplish with your search navigation interface and which pitfalls you want to avoid, you may be able to design something even better than what’s been done before. Good luck, and let us know what you create with Meilisearch!

How to integrate an extremely fast and relevant search into your Rails app using Meilisearch and React

Carolina — Thu, 01 Sep 2022 12:12:34 +0000

Introduction

In this tutorial, you'll learn how to integrate Meilisearch with your Rails application database and quickly create a front-end search bar with a search-as-you-type experience using React.

We will create a very basic application; our main focus will be the search. Therefore we won't go into much detail about Rails or React.
Prerequisites

To follow this tutorial, you need:

Node.js >=16.10
yarn 1
Ruby >= 2.7
Ruby on Rails 7.0

Ideally, you are familiar with Ruby on Rails and have already created a simple RoR app. If that's not the case, you can still follow this tutorial, but as we stated in the introduction, explanations will focus on the search.

Step 1. Installing Meilisearch

There are several ways to install Meilisearch. The easiest is cURL, a tool that allows you to make HTTP requests and transfer data from the command line.

Open your terminal and paste the following lines of code:

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

# Launch Meilisearch
./meilisearch

Step 2. Creating and setting up your Rails app

Now that you've got Meilisearch up and running, let's create our RoR app.‌‌ We will create a simple recipe app named delicious_meals. Run the following command on the terminal:

rails new delicious_meals -j esbuild

‌Let's generate our model Recipe. It will have four attributes:

title
ingredients
directions
diet

Go into the project folder and run the following command:

bin/rails g model Recipe title:string ingredients:text directions:text diet:string

This command also generates the migration file inside the db/migrate directory. Let's add the null: false option next to each column of the table so that no recipe is saved to the database if a field is empty.

class CreateRecipes < ActiveRecord::Migration[7.0]
  def change
    create_table :recipes do |t|
      t.string :title, null: false
      t.text :ingredients, null: false
      t.text :directions, null: false
      t.string :diet, null: false

      t.timestamps
    end
  end
end

The timestamps column method adds two extra fields to the table: created_at and updated_at.

You can now create the database and run the migration above with the following commands:

# Creates the database 
bin/rails db:create 

# Runs the migration 
bin/rails db:migrate

Next, you need to generate the controller with its index action.

bin/rails g controller Recipes index

We will use the index view to show our recipes and search through them with our search bar. We won't generate the rest of the CRUD actions, as it would exceed the purpose of this tutorial.

Once the controller is created, modify the config/routes.rb file to look like this:

Rails.application.routes.draw do
  # Maps requests to the root of the application to the index action of the 'Recipes controller'
  root "recipes#index"
end

Now, the root route is mapped to the index action of RecipesController. That way, the content of app/views/recipes/index.html.erb will be rendered at the root of your application.

You can check that everything is working as intended by starting the application with the following command:

bin/dev

Open your browser window and navigate to http://127.0.0.1:3000. You should see your index view displaying a message such as:

Recipes#index

Find me in app/views/recipes/index.html.erb

Step 3. Adding Meilisearch to your app

Now that we have the back-end basics of our application, let's connect it to our running Meilisearch instance using the meilisearch-rails gem.

Install it by running the following command:

bundle add meilisearch-rails

👉 When writing this tutorial, the latest version of the gem was 0.7.1. You can check the latest version in the meilisearch-rails GitHub repository or on Meilisearch finds rubygems.

Create a file named meilisearch.rb inside the config/initializers/ folder to setup your MEILISEARCH_HOST and MEILISEARCH_API_KEY:

touch config/initializers/meilisearch.rb

If you have followed step 1 to the letter, your Meilisearch host should be http://127.0.0.1:7700. Since we did not set any API key, we will comment out the line with the meilisearch_api_key field:

MeiliSearch::Rails.configuration = {
    meilisearch_host: 'http://127.0.0.1:7700',
    # meilisearch_api_key: ''
}

👉 You will need a master or a private key in production, you can learn more about it here.

If you did set a master key, you have to update your configuration accordingly before running Meilisearch (see step 1).

Let's open our app/models/recipe.rb file and add the following line inside the Class declaration:

include MeiliSearch::Rails

We also need to add a meilisearch block. Note that the settings inside the Meilisearch block are not mandatory.

class Recipe < ApplicationRecord
    include MeiliSearch::Rails

    meilisearch do
        # all attributes will be sent to Meilisearch if block is left empty
        displayed_attributes [:id, :title, :ingredients, :directions, :diet]
        searchable_attributes [:title, :ingredients, :directions, :diet]
        filterable_attributes [:diet]
    end
end

Let's break down each line of code:

Setting displayed attributes

displayed_attributes [:id, :title, :ingredients, :directions, :diet]

By default, Meilisearch displays all the attributes. Here, we are instructing Meilisearch to only display the specified attributes in the search response, this setting prevents Meilisearch from displaying the created_at and updated_at fields.

👉 You can learn more about displayed attributes in our documentation.

Setting searchable attributes

searchable_attributes [:title, :ingredients, :directions, :diet]

With the above line of code, we are doing two things:

We first tell Meilisearch to only search among the specified attributes when performing a search query. So it won't try to find matches in the id, created_at and updated_at fields.
We are also specifying the order of importance of the attributes. We are telling Meilisearch that a document with a matching query word found in its title is more relevant than a document with a matching query word found in directions. The first document is more relevant and is returned first in the search results.

👉 Learn more about searchable fields in our documentation.

Setting filterable attributes

filterable_attributes [:diet]

Finally, we are telling Meilisearch that we want to be able to refine our search results based on the diet type. That will allow us to search only for vegetarian recipes, for instance.

👉 Visit our documentation to know more about filtering.

Step 4. Seeding the database

To test our application, we need some data in our database. The quickest way is to populate the database with dummy data using a gem called faker.

Add the following line to your Gemfile inside the development group, save and run bundle install:

gem 'faker', :git => 'https://github.com/faker-ruby/faker.git', :branch => 'master'

Then open the ./db/seeds.rb file and add the following code to populate your database with 1000 recipes:

# Deletes existing recipes, useful if you seed several times
Recipe.destroy_all

# Creates 1000 fake recipes
1000.times do
    Recipe.create!(
        title: "#{Faker::Food.dish} by #{Faker::Name.unique.name}",
        ingredients: "#{Faker::Food.ingredient}, #{Faker::Food.ingredient}, #{Faker::Food.ingredient}",
        directions: Faker::Food.description,
        diet: ['omnivore', 'pescetarian', 'vegetarian', 'vegan'].sample
    )
end 

# Displays the following message in the console once the seeding is done
puts 'Recipes created'

Now, run bin/rails db:seed in the command line.

Step 5. Testing search with the search preview

Meilisearch delivers an out-of-the-box web interface to test it interactively. Open your browser and go to the Meilisearch HTTP address, which should be http://127.0.0.1:7700, unless you specified it otherwise at launch.

👉 Adding documents to an index is an asynchronous operation, don't worry if you don't see the 1000 documents right away. It might take some time for the updates to process. Learn more about asynchronous updates here.

Make sure the Recipe index is selected in the menu located at the top right, next to the search bar.

As you can see, the data has been automatically added to our Meilisearch instance. The only visible and searchable attributes are the ones we specified in our model file inside the meilisearch block. Please note that your search results may be different from those shown in the GIF, since faker randomly generates data.

This is great for testing Meilisearch and some of its features, but it doesn't showcase the filterable_attributes we specified in our block. We need a custom UI for production.

Step 6. Adding React to the Rails app

There are several ways of using ReactJS with Rails. We have chosen the most straightforward one: installing it as a JavaScript dependency in our Rails application.

Run the following command to install ReactJS and its react-dom package for working with the DOM:

yarn add react react-dom

Let's create the folders and files for our React code.

mkdir app/javascript/recipes 
touch app/javascript/recipes/index.jsx 
touch app/javascript/recipes/App.jsx

Let's open app/javascript/recipes/index.jsx and add the required code to render our React elements:

import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';

const container = document.getElementById('app');
const root = createRoot(container); 
root.render(<App/>);

Open the app/javascript/application.js and import the file we just created:

import "./recipes"

Step 7. Integrating a front-end search bar

To integrate a front-end search bar, you need to install two packages:

React InstantSearch: an open-source library that provides all the front-end tools you need to customize your search bar environment
Instant Meilisearch: the Meilisearch client to establish the communication between your Meilisearch instance and the React InstantSearch library

yarn add react react-dom react-instantsearch-dom @meilisearch/instant-meilisearch

You can now open your app/javascript/recipes/App.jsx file and replace the existing code with the code from the meilisearch-react Getting Started guide. We only need to modify the searchClient with our Meilisearch host and Meilisearch API key, as well as the indexName. It should look like this:

import React from "react"
import { InstantSearch, Highlight, SearchBox, Hits } from 'react-instantsearch-dom';
import { instantMeiliSearch } from '@meilisearch/instant-meilisearch';

const searchClient = instantMeiliSearch(
  "http://127.0.0.1:7700", // Your Meilisearch host
  "" // Your Meilisearch API key, if you have set one
);

const App = () => (
  <InstantSearch
    indexName="Recipe" // Change your index name here
    searchClient={searchClient}
  >
    <SearchBox />
    <Hits hitComponent={Hit} />
  </InstantSearch>
);

const Hit = ({ hit }) => <Highlight attribute="title" hit={hit} />

export default App

Now, go to your views folder and replace the content of the app/views/recipes/index.html.erb with the code below:

<div id="app"></div>

Now you can run the bin/dev command, open your browser and navigate to http://127.0.0.1:3000 and see the result:‌

Well, the search works, but it's not very pretty. Luckily, InstantSearch provides a CSS theme you can add by inserting the following link into the <head> element of your app/views/layouts/application.html.erb:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.css@7.4.5/themes/satellite-min.css" integrity="sha256-TehzF/2QvNKhGQrrNpoOb2Ck4iGZ1J/DI4pkd2oUsBc=" crossorigin="anonymous">

You can also customize the widgets or create your own if you want to. Check the React InstantSearch documentation for more details.

Let's check the rendering:

Not bad, right? But once again we lack the possibility of filtering the results by type of diet.

Step 8. Adding faceted search

It's as simple as importing the RefinementList widget in your index.js file:

import { InstantSearch, Highlight, SearchBox, Hits, RefinementList } from 'react-instantsearch-dom';

and adding it inside our InstantSearch widget, specifying the attribute we want to filter by:

<RefinementList attribute="diet" />

To make it more aesthetic and practical, let's create two <div> elements to divide our components. On the left, we'll find the filters, and the search bar and results on the right.

You can also add a "Type of diet" heading along with the ClearRefinements widget. It allows you to clear all the filters just by clicking on it, instead of having to uncheck them one by one.

The file should now look like this:

import React from "react"
import { InstantSearch, Highlight, SearchBox, Hits, RefinementList, ClearRefinements } from 'react-instantsearch-dom';
import { instantMeiliSearch } from '@meilisearch/instant-meilisearch';

const searchClient = instantMeiliSearch(
  "http://127.0.0.1:7700",
  ""
);

const App = () => (
  <InstantSearch
    indexName="Recipe" // Change your index name here
    searchClient={searchClient}
  >
    <div className="left-panel">
      <ClearRefinements />
      <h2>Type of diet</h2>
      <RefinementList attribute="diet" />
    </div>
    <div className="right-panel">
      <SearchBox />
      <Hits hitComponent={Hit} />
    </div>

  </InstantSearch>
);

const Hit = ({ hit }) => <Highlight attribute="title" hit={hit} />

export default App

For this to work we need to add some CSS. Let's create a app/assets/stylesheets/recipes.css file and add the following lines of code:

.right-panel {
    margin-left: 210px;
}

.left-panel {
    float: left;
    width: 200px;
}

And just to make it even prettier, let's add some padding and margin to the body and the search bar, and change the font:

/* app/assets/stylesheets/recipes.css */

body { 
    font-family: sans-serif; 
    padding: 1em; 
}

.ais-SearchBox { 
    margin: 1em 0; 
}

.right-panel {
    margin-left: 210px;
}

.left-panel {
    float: left;
    width: 200px;
}

And tada! 🎉 You have a nice search bar with a search-as-you-type experience ready! 🥳

⚠️ Because we used fake data to seed our database, the recipes' titles, ingredients, directions, and diet type are not necessarily consistent.
Conclusion

We have learned how to synchronize our Ruby on Rails database with Meilisearch and customize our search settings directly on our Rails app, allowing us to search through our data in milliseconds. To top it all off, we have also created a faceted search interface with a search-as-you-type experience using React.

We have achieved all this seamlessly, thanks to Meilisearch Rails and Instant Meilisearch. Meilisearch has integrations for almost every popular language or framework. Take a look at the complete list in the Meilisearch integration guides.

If you have any questions, please join us on Slack; we are always happy to hear from you. For more information on Meilisearch, check out our Github repository and official documentation.

How to integrate a relevant search into Strapi v4 using Meilisearch

Carolina — Mon, 13 Jun 2022 16:42:25 +0000

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

Introducing our tools

Strapi

Strapi is a headless CMS. It provides a quick way to create a back-end where we can add and store data. The data is then available through a REST or GraphQL API without having to code anything or configure our database.

Meilisearch

Meilisearch is a fast, open-source search engine that's easy to use and deploy. The aim of Meilisearch is to create an out-of-the-box relevant search experience in very few steps, with no configuration needed.

Requirements

To be able to follow this tutorial, you'll need the following:

An open terminal or command prompt
Node.js >= 12 <= 16
NPM and NPX (v6 only) (installed with Node.js): package managers that help you access and use JS libraries

Create a directory for our app

Let’s create a directory called my-app where we will add our back and front-end parts of the application.

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:

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.

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.

To follow along, complete the first 4 steps of "Part B: Build your content" from Strapi's quick start guide. 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!

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 👇

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:

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.

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

Launch and start Meilisearch

There are multiple ways to download and run a Meilisearch instance, we will be using Docker here.

Want to avoid a local installation? To quickly create a best-in-class search experience, we offer the convenience of Meilisearch Cloud, a hosted and fully‑managed version of Meilisearch. If you would like to try it, you can still register on the waiting list or wait for the public release planned a few weeks from now.

Open a second terminal window and move to the my-app directory. This window will be used to run Meilisearch. Execute the command below to download and install Meilisearch with Docker. If Docker doesn't work for you, consider trying one of the many other methods.

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

# Launch Meilisearch
docker run -it --rm \
    -p 7700:7700 \
    -v $(pwd)/data.ms:/data.ms \
    getmeili/meilisearch:latest

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

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.

This is the 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.

cd back
npm install strapi-plugin-meilisearch

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

npm run build
npm run develop

At this point, our Strapi app should be running once again on the default address: http://localhost:1337/admin/. 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.

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.

Note that we leave Meilisearch API Key blank because we launched Meilisearch without a 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.

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

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

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

What’s next?

Now that you have your Strapi collections in Meilisearch, you can start searching!

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

If you have any questions, please join us on Slack. If you like Meilisearch, a star on GitHub means a lot.

How to use HTTP/2 and SSL with MeiliSearch

Quentin de Quelen — Thu, 24 Sep 2020 12:06:11 +0000

For those willing to use HTTP/2, please be aware that it is only possible if your server is configured with SSL certificate.

Therefore, you will see how to launch a MeiliSearch server with SSL. This tutorial gives a short introduction to do it locally, but you can as well do the same thing on a remote server.

First of all, you need the binary of MeiliSearch, or you can also use docker. In the latter case, it is necessary to pass the parameters using environment variables and the SSL certificates via a volume.

A tool to generate SSL certificates is also required. In this How To, you will use mkcert. However, if on a remote server, you can also use certbot or certificates signed by a Certificate Authority.

Then, use curl to do requests. It is a simple way to specify that you want to send HTTP/2 requests by using the --http2 option.

Try to use HTTP/2 without SSL

Start by running the binary.

./meilisearch

And then, send a request.

curl -kvs --http2 --request GET 'http://localhost:7700/indexes'

You will get the following answer from the server:

*   Trying ::1...
* TCP_NODELAY set
* Connection failed
* connect to ::1 port 7700 failed: Connection refused
*   Trying 127.0.0.1...
* TCP_NODELAY set
* Connected to localhost (127.0.0.1) port 7700 (#0)
> GET /indexes HTTP/1.1
> Host: localhost:7700
> User-Agent: curl/7.64.1
> Accept: */*
> Connection: Upgrade, HTTP2-Settings
> Upgrade: h2c
> HTTP2-Settings: AAMAAABkAARAAAAAAAIAAAAA
>
< HTTP/1.1 200 OK
< content-length: 2
< content-type: application/json
< date: Fri, 17 Jul 2020 11:01:02 GMT
<
* Connection #0 to host localhost left intact
[]* Closing connection 0

You can see on line > Connection: Upgrade, HTTP2-Settings that the server tries to upgrade to HTTP/2, but is unsuccessful.
The answer < HTTP/1.1 200 OK indicates that the server still uses HTTP/1.

Try to use HTTP/2 with SSL

This time, start by generating the SSL certificates. mkcert creates two files: 127.0.0.1.pem and 127.0.0.1-key.pem.

mkcert '127.0.0.1'

Then, use the certificate and the key to configure MeiliSearch with SSL.

./meilisearch --ssl-cert-path ./127.0.0.1.pem --ssl-key-path ./127.0.0.1-key.pem

Next, make the same request as above but change http:// to https://.

curl -kvs --http2 --request GET 'https://localhost:7700/indexes'

You will get the following answer from the server:

*   Trying ::1...
* TCP_NODELAY set
* Connection failed
* connect to ::1 port 7700 failed: Connection refused
*   Trying 127.0.0.1...
* TCP_NODELAY set
* Connected to localhost (127.0.0.1) port 7700 (#0)
* ALPN, offering h2
* ALPN, offering http/1.1
* successfully set certificate verify locations:
*   CAfile: /etc/ssl/cert.pem
  CApath: none
* TLSv1.2 (OUT), TLS handshake, Client hello (1):
* TLSv1.2 (IN), TLS handshake, Server hello (2):
* TLSv1.2 (IN), TLS handshake, Certificate (11):
* TLSv1.2 (IN), TLS handshake, Server key exchange (12):
* TLSv1.2 (IN), TLS handshake, Server finished (14):
* TLSv1.2 (OUT), TLS handshake, Client key exchange (16):
* TLSv1.2 (OUT), TLS change cipher, Change cipher spec (1):
* TLSv1.2 (OUT), TLS handshake, Finished (20):
* TLSv1.2 (IN), TLS change cipher, Change cipher spec (1):
* TLSv1.2 (IN), TLS handshake, Finished (20):
* SSL connection using TLSv1.2 / ECDHE-RSA-AES256-GCM-SHA384
* ALPN, server accepted to use h2
* Server certificate:
*  subject: O=mkcert development certificate; OU=quentindequelen@s-iMac (Quentin de Quelen)
*  start date: Jun  1 00:00:00 2019 GMT
*  expire date: Jul 17 10:38:53 2030 GMT
*  issuer: O=mkcert development CA; OU=quentindequelen@s-iMac (Quentin de Quelen); CN=mkcert quentindequelen@s-iMac (Quentin de Quelen)
*  SSL certificate verify result: unable to get local issuer certificate (20), continuing anyway.
* Using HTTP2, server supports multi-use
* Connection state changed (HTTP/2 confirmed)
* Copying HTTP/2 data in stream buffer to connection buffer after upgrade: len=0
* Using Stream ID: 1 (easy handle 0x7ff601009200)
> GET /indexes HTTP/2
> Host: localhost:7700
> User-Agent: curl/7.64.1
> Accept: */*
>
* Connection state changed (MAX_CONCURRENT_STREAMS == 4294967295)!
< HTTP/2 200
< content-length: 2
< content-type: application/json
< date: Fri, 17 Jul 2020 11:06:27 GMT
<
* Connection #0 to host localhost left intact
[]* Closing connection 0

You can see that the server now supports HTTP/2.

* Using HTTP2, server supports multi-use
* Connection state changed (HTTP/2 confirmed)

The server successfully receives HTTP/2 requests.

< HTTP/2 200

Integrate a relevant search bar to your documentation with MeiliSearch

curquiza — Thu, 24 Sep 2020 10:47:33 +0000

You might have noticed the search bar in our 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
Scrape your content
Integrate the search Bar

Run a MeiliSearch Instance

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

$ curl -L https://install.meilisearch.com | sh
$ ./meilisearch --master-key=myMasterKey

There are other ways to install MeiliSearch.

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

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.

Scrape your Content

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

Configuration File

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"],
  "stop_urls": [],
  "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",
    "lvl6": ".docs-content .docs-lvl6",
    "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.

lvlX selectors should use the standard title tags like h1, h2, h3, etc. You can also use static classes. Set a unique id or name attribute to these elements.

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.

TIP: More optional fields are available to fit your need.

If you use VuePress for your documentation, you can check out the configuration file 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...

Run the Scraper

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

$ docker run -t --rm \
    --network=host \
    -e MEILISEARCH_HOST_URL='http://localhost:7700' \
    -e MEILISEARCH_API_KEY='myMasterKey' \
    -v <absolute-path-to-your-config-file>:/docs-scraper/config.json \
    getmeili/docs-scraper:latest pipenv run ./docs_scraper config.json

If you don't want to use Docker, here are other ways to run the scraper.

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

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, as we do for the MeiliSearch's one.

Integrate the Search Bar

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

For a VuePress Documentation

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

In your VuePress project:

$ yarn add vuepress-plugin-meilisearch
# or
$ npm install vuepress-plugin-meilisearch

In your config.js file:

module.exports = {
  plugins: [
    [
      "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 optional fields are available 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.

For All Kinds of Documentation

If you don't use VuePress for your documentation, we provide a front-end SDK to integrate a powerful and relevant search bar to any documentation website.

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docs-searchbar.js@{version}/dist/cdn/docs-searchbar.min.css" />
  </head>

  <body>
    <input type="search" id="search-bar-input">
    <script src="https://cdn.jsdelivr.net/npm/docs-searchbar.js@{version}/dist/cdn/docs-searchbar.min.js"></script>
    <script>
      docsSearchBar({
        hostUrl: '<your-meilisearch-host-url>',
        apiKey: '<your-meilisearch-api-key>',
        indexUid: 'docs',
        inputSelector: '#search-bar-input',
        debug: true // Set debug to true if you want to inspect the dropdown
      });
    </script>
  </body>
</html>

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

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

For more concrete examples, you can check out this basic HTML file or this more advanced Vue file.

What's next?

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

How to implement Meilisearch in your React App

cvermand — Thu, 24 Sep 2020 09:12:05 +0000

The following is a guest post by Riccardo Giorato.

Introduction

In this quick tutorial, you'll learn how to easily create a search page with instant and reliable results thanks to the power of MeiliSearch.

MeiliSearch is an open source, high-relevancy search engine, built in Rust.

We will cover the basic steps to get the search running and move on to more advanced topics at the end.

For the example, let's recreate a fast and beautiful search experience for a Sport brand.

Here is a video preview of what you will be building:

Prerequisites

Before getting started, ensure that you have Node already installed on your machine.

You will create the boilerplate code for your React app using the custom project we created for you : https://github.com/Giorat/meili_react_demo

Finally, this tutorial assumes that you are already familiar with React. If that is not the case, you can check the React Documentation to learn more.

Getting Started

Clone the Repository

git clone https://github.com/Giorat/meili_react_demo.git
cd meili_react_demo

Run a new Docker image

If you cloned the repository, to set up the MeiliSearch instance just execute inside the main folder:

npm run setup_meili

If you didn't clone the repo and you want to create directly the Docker instance execute this command:

docker run -p 7700:7700 -v $(pwd)/data.ms:/data.ms getmeili/meilisearch

You will be able to check that MeiliSearch is running by visiting the following URL:

http://localhost:7700/

Create an Index in MeiliSearch

An index is an entity in which documents are stored, like an array of objects with some specific settings attached to it and a unique primary key.

You can read more about the properties of indexes in the the MeiliSearch documentation.

In order to create your index, you need to find out what your primary key is. Below is a sample document to add to MeiliSearch.

{
  "id": 100013768717,
  "name": "Fitness Foldable Shoe Bag",
  "url": "https://www.decathlon.com/products/gym-foldable-shoe-bag",
  "vendor": "Domyos",
  "category": "Sport bag",
  "tags": [
    "Artistic Gymnastics",
    "Boy's",
    "CARDIO_FITNESS_ACCESSORIES",
    "CARDIO_FITNESS_BAGS",
    "CODE_R3: 11782"
  ],
  "images": "https://cdn.shopify.com/s/files/1/1330/6287/products/sac_20a_20chaussure_20kaki_20_7C_20001_20_7C_20PSHOT_20_490180e6-44e4-4340-8e3d-c29eb70c6ac8.jpg?v=1584683232",
  "creation_date": "2020-04-03T15:58:48-07:00",
  "price": "2.49"
}

In this document, the field that holds the unique value of the document is the id field. This attribute is called the primary key in MeiliSearch.

You can easily create this Index with a Rest client like Postman but, in this tutorial, you will use the MeiliSearch Javascript SDK to do it directly from node.js.

const MeiliSearch = require("meilisearch");

(async () => {
  try {
    const config = {
      host: 'http://127.0.0.1:7700'
    };

    const meili = new MeiliSearch(config);

    await meili.createIndex({ uid: "decathlon", primaryKey: "id" });

  } catch (e) {
    console.log("Meili error: ", e.message);
  }
})();

Index documents

MeiliSearch receives documents in JSON format and stores them for searching purposes. These documents are composed of fields that can hold any type of data.

For this tutorial, you can download this dataset full of sportswear items:

decathlon.json

To upload all the objects from this JSON file, use the following script:

const MeiliSearch = require("meilisearch");

(async () => {
  try {
    const config = {
      host: 'http://127.0.0.1:7700'
    };

    const meili = new MeiliSearch(config);

    const decathlon = require("./decathlon.json"); // path to json file

    const index = await meili.getIndex("decathlon");

    await index.addDocuments(decathlon);

  } catch (e) {
    console.log("Meili error: ", e.message);
  }
})();

Remember to change the path to your JSON file before running this script!

Prepare the React App

You will use a standard React App that you can create using CRA or simply by cloning this repository:

git clone https://github.com/Giorat/meili_react_demo.git
cd meili_react_demo

If you prefer to start from an empty app you can create your own using the following command. You can name the application however you desire.

npx create-react-app meili_react_demo
cd meili_react_demo

Including Tailwind CSS

To speed up the styling process, add Tailwind CSS style directly to index.html:

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

Configure App.js State

Then, modify the App.js file using this code to set up a simple Search form and a few State variables to handle every aspect of the search.

import React, { useState, useEffect } from "react";

// TODO configure the MeiliSearch Client

function App() {
  const [searchedWord, setSearch] = useState("dumbell");
  const [resultSearch, setResults] = useState([]);
  const [resultCards, setCards] = useState([]);

  // TODO add function to send searchedWord to MeiliSearch

  // TODO add function to parse the JSON object

  return (
    <div className="mx-auto">
      <div class="header font-sans text-white items-center justify-center">
        <header class="py-12">
          <img
            class="h-20 w-auto items-center justify-center p-2 mx-auto"
            src="/wide_logo.png"
            style={{ filter: "invert(0%)" }}
            alt=""
          />
          <h1 class="flex flex-wrap flex-grow text-3xl w-full justify-center p-4">
            Stop looking for an item — find it and work hard!
          </h1>
          <div class="border rounded overflow-hidden w-full flex justify-center mx-auto searchBox mt-6">
            <button class="flex items-center justify-center px-4 shadow-md bg-white text-black">
              <svg
                class="h-4 w-4 text-grey-dark"
                fill="currentColor"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
              >
                <path d="M16.32 14.9l5.39 5.4a1 1 0 0 1-1.42 1.4l-5.38-5.38a8 8 0 1 1 1.41-1.41zM10 16a6 6 0 1 0 0-12 6 6 0 0 0 0 12z" />
              </svg>
            </button>
            <input
              type="text"
              value={searchedWord}
              onChange={(event) => setSearch(event.target.value)}
              class="px-6 py-4 w-full text-black"
              placeholder="Product, sport, color, …"
            />
          </div>
        </header>
      </div>
      <div>
        <div class="flex flex-wrap searchResults">{resultCards}</div>
      </div>
    </div>
  );
}

export default App;

This code should output this beautiful header with a search form.

Search Results in React

Connecting to MeiliSearch from React using the MeiliSearch Javascript SDK is a simple operation that can be done in just a few steps.

MeiliSearch Client

Install the MeiliSearch SDK:

# if you use npm
npm install meilisearch
# if you use yarn
yarn add meilisearch

Set up the MeiliSearch Client with the server URL. In our case, it was the localhost Docker machine. Finally, load the right Index from the backend.

Replace this comment in App.js by the code snippet below:
// TODO configure the MeiliSearch Client

import MeiliSearch from "meilisearch";

const client = new MeiliSearch({
  host: "http://127.0.0.1:7700/",
});

const index = client.getIndex("decathlon");

Send the Search Query

Use an useEffect to execute the search of the typed words into MeiliSearch. All the results hits will be set to a simple state variable called “resultsSearch”.

Replace this comment in App.js by the code snippet below:
// TODO add function to send searchedWord to MeiliSearch

 useEffect(() => {
    // Create an scoped async function in the hook
    async function searchWithMeili() {
      const search = await index.search(searchedWord);
      setResults(search.hits);
    }
    // Execute the created function directly
    searchWithMeili();
  }, [searchedWord]);

Showcase the Results

Inside a second useEffect, you will search through the JSON objects returned by MeiliSearch. They will have the same structure than the uploaded JSON objects.

Then, it's time to create a list of cards linking to the products pages.

Replace this comment in App.js by the code snippet below:
// TODO add function to parse the JSON object

useEffect(() => {
    let arrayItems = [];
    for (let i = 0; i < resultSearch.length; i++) {
      const product = resultSearch[i];
      arrayItems.push(
        <div class="flex w-full sm:w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/6 p-3">
          <a
            href={product.url}
            class="flex-1 rounded overflow-hidden shadow-lg"
          >
            <img
              class="w-full h-48 object-cover"
              src={product.images}
              alt={product.name}
              onError={(e)=>{e.target.onerror = null; e.target.src="/wide_logo.png"}}
            />
            <div class="px-6 py-3">
              <div class="font-bold text-sm mb-1 text-gray-600 capitalize">
                {product.category}
              </div>
              <div class="font-bold text-xl mb-2 text-gray-800">
                {product.vendor} - {product.name.substr(0, 20)}
              </div>
              <p class="text-black text-xl font-bold text-base py-2">
                $ {product.price}
              </p>
            </div>
          </a>
        </div>
      );
    }
    setCards(arrayItems);
  }, [resultSearch]);

You can have a look at the full App.js code here:

https://github.com/Giorat/meili_react_demo/blob/master/src/App.js

You can visit the live application here: https://meili-react-demo.netlify.app/

Configure the Search even more!

With MeiliSearch, you get a ton of other small options you can fine-tune to improve your Search experience. For advanced exploration, you will need to do a few extra configuration steps.

Search Ranking

Start by changing the search rankings, or more simply, the way MeiliSearch looks through the documents you uploaded to find the references to your search terms inside the rankingRules object. In that case, set the following ranking:

"typo"
"words"
"proximity"
"attribute"
"wordsPosition"
"exactness"
"desc(creation_date)"

This configuration is the default one except for the last field which is a custom rule "desc(creation_date)". The latter ranks items by their creation date if all previous values are identical.

Searchable Attributes

Secondly, you have to specify the attributes that MeiliSearch can search from in each document, inside a searchableAttributes object. Here, the configuration is done to search only on name, vendor, category and tags leaving out images or URL.

Displayed Attributes

Lastly, you have to specify the attributes that MeiliSearch can return to the user by the Frontend application with the displayedAttributes object.

Upload the new Settings to MeiliSearch

const MeiliSearch = require("meilisearch");

(async () => {
  try {
    const config = {
      host: 'http://127.0.0.1:7700'
    };

    const meili = new MeiliSearch(config);

    const index = await meili.getIndex("decathlon");

    const newSettings = {
      rankingRules: [
        "typo",
        "words",
        "proximity",
        "attribute",
        "wordsPosition",
        "exactness",
        "desc(creation_date)"
      ],
      searchableAttributes: ["name", "vendor", "category", "tags"],
      displayedAttributes: [
        "name",
        "vendor",
        "category",
        "tags",
        "images",
        "url"
      ]
    };

    await index.updateSettings(newSettings);

  } catch (e) {
    console.log("Meili error: ", e.message);
  }
})();

Conclusion

This quick search wouldn’t be possible without an incredible team that is working on this great project night and day! If you might enjoy contributing to the MeiliSearch family you can jump on these repositories to bring some help, issues or tips and tricks:

General discussion is very welcome on the forum or chat:

And also don’t forget to leave a Star on the main project on Github here.

How to deploy a MeiliSearch instance on DigitalOcean

Samuel Jimenez — Wed, 23 Sep 2020 13:50:38 +0000

How to deploy a MeiliSearch instance on DigitalOcean

Create an out-of-the-box MeiliSearch

1. Create a new "droplet"

A "droplet" is a set of resources, as a Virtual Machine, or a Server, in which you can run your own applications.
In any DigitalOcean page, when you are logged in, you will find a menu in the upper-right corner. Click on "Create" -> "Droplets".

2. Select MeiliSearch snapshot

By default, DigitalOcean will display the "distributions" tab. Select the "Marketplace" tab and search for "meili". Select it.

3. Select your plan

Select your plan. Plans start at $5 (click on "See all plans" for more options). Memory-optimized options will give you better results for a production environment on big datasets.

4. Select a region for your droplet

Select the region where you want to deploy your droplet. Remember, the closer you are to your users or customers, the better will be their search experience with MeiliSearch.

5. Add your ssh key

Select your SSH key in order to be able to connect to your droplet later. If you don't see your SSH key add yours to your account.

If you need help with this, visit this link

You can also set a password for root user if you prefer this authentication method.

6. Choose your droplet name and tags

Here you can select the name that will be visible everywhere in your DigitalOcean account. Choose wisely!

Tags are a very good method to know who created resources, and for organizing resources or projects. Try to always add some tags to make clear what are the server purposes.

7. Finally click on Create Droplet

8. Your MeiliSearch is running (with no config)

Instance creation in progress...

... done!

9. Test MeiliSearch.

Copy the public IP address:

Paste it in your browser. If this screen is shown, your MeiliSearch is now ready!

Configure production settings in your MeiliSearch Droplet

Configuring your MeiliSearch from a DigitalOcean droplet is very straightforward. Establish an SSH connection with your droplet and a script will guide you through the process.

1. Make your domain name point to your droplet

If you want to use your own domain name (or sub-domain), add A record in your domain name provider account.

This should work out of the box. Your domain should be usable for your MeiliSearch.

2. Set API KEY and SSL (HTTPS)

Meilisearch is running with a development configuration. It means that you haven't set up an API KEY (anyone can read/write from your MeiliSearch) and you aren't using HTTPS yet. But no worries, the configuration process is automated and very simple. Just connect via SSH to your new MeiliSearch Droplet and answer a few questions:

2.1. Run the configuration script

Open a terminal and start a new SSH connection with the IP you got from DigitalOcean.

Write in your terminal ssh root@<your-ip-address> and press Enter to establish connection:

Write yes and press Enter to accept the authentication process.

A script will run automatically, asking for your settings and desired configuration. If you want to run this script again later, you can do so by typing:

sh /var/opt/meilisearch/scripts/first-login/000-set-meili-env.sh

3. Enjoy your ready-to-use MeiliSearch droplet

Enjoy!

An alternative RubyGems search bar based on an opensource search engine

curquiza — Thu, 30 Jan 2020 13:37:13 +0000

As a Rails and Ruby lover, I often search for the gem that will perfectly cover my use case. When I need to solve a problem I'm having, I want to choose the right one, the most suitable solution.

Ruby gems are extensive libraries created inside the Ruby community. The best place to find a ready solution for any task is the website rubygems.org, a public repository of gems that can be searched using the search box on the home page. RubyGems’ website is an efficient tool that facilitates the sharing and installation of packages. But although its search bar is very helpful, I decided to create an alternative search bar more suited to our needs.

I made this project with MeiliSearch, an opensource alternative to Algolia.

The complete article is available on our blog. I explain my approach in detail and how MeiliSearch works.

Hope you will enjoy my first article! 😁