Share the article
This post was originally published in May 2020 by guest author Riccardo Gioratot the time, Meilisearch was on v0.09. It has been updated by Carolina Ferreirao work with Meilisearch v1. You can find the first version of the post on GitHub.
Introduction
In this tutorial, you'll learn how to easily create a search-based web app with instant and reliable results thanks to the power of Meilisearch.
We will cover the basic steps to add our data to Meilisearch, create a custom front-end search, and move on to customization at the end.
For this tutorial, we are going to create an instant search experience for a sports brand. Here is a preview of what you will be building:
Prerequisites
Before getting started, ensure that you have Node.js >= 18 installed on your machine.
You can follow this tutorial and write the code as you go through the steps, using this GitHub project.
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
Clone the GitHub repository using the following command:
Run a new Docker image
If you cloned the repository to set up the Meilisearch instance, just execute the following commands inside the main folder:
If you didn't clone the repository and want to launch Meilisearch using Docker, execute this command:
By default, Meilisearch's API is unprotected. You will need a master key in production. You can learn more about it in our documentation.
You can check if Meilisearch is running by visiting: http://localhost:7700/
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. There's a free 14-day trial, no credit card required 😉
Create an index in Meilisearch
An index is an entity where documents are stored, like an array of objects with some specific settings attached to it, and a unique primary key.
Each document indexed must have a primary field, a special field that must be present in all documents. This field holds the unique value of the document: its id.
Meilisearch can infer the primary key from your dataset, provided that it contains the id substring. You can also set it explicitly.
Below is a sample document to add to Meilisearch.
You can easily create this index with a REST client like Postman, but in this tutorial, we will use the Meilisearch Javascript SDK to do it directly from Node.js.
You can read more about the properties of indexes in the Meilisearch documentation.
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. Meilisearch also accepts datasets in the following formats: NDJSON and CSV. You can read more about the format in the documentation.
For this tutorial, you can download this dataset full of sportswear items: decathlon.json
Use the following script to upload all the objects from this JSON file to Meilisearch. Remember to change the path to your JSON file before running it!
Prepare the React app
We'll need a standard React app. You can use the project you cloned before in the Getting startedection.
If you prefer to start from an empty app, you can create your own using Create React App with the command below. You can name the application however you desire.
Include Tailwind CSS
To speed up the styling process, add Tailwind CSS style directly into the <head> element of the index.html file:
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.
This code should output this beautiful header with a search form.
Search results in React
Connecting React with Meilisearch using the Javascript SDK is a simple operation that can be done in just a few steps.
Meilisearch client
Install the Meilisearch SDK using the following command:
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 with the code snippet below:
"// TODO configure the Meilisearch Client"
Send the search query
Add a useEffect hook to execute the search of the typed words into Meilisearch. All the results will be set to a simple state variable called resultsSearch.
Replace this comment in App.js with the code snippet below:
"// TODO add function to send searchedWord to Meilisearch"
Showcase the results
You will iterate over the JSON objects returned by Meilisearch – they'll have the same structure as the uploaded JSON objects – and you'll display them in an Item component, linking to the product pages.
Let's create the Item component that will help us display our products. Create a components folder with an Item.js file inside, and copy-paste the following code snippet:
Then, replace this comment in App.js with the code snippet below:
You can have a look at the fullcode on GitHub.
Configure the search
With Meilisearch, you get a ton of customization options for fine-tuning your search experience. We will take a look at a few features here. You can read more about them in the documentation.
Search Ranking
We will start with changing the ranking rules, the criteria Meilisearch uses to sort the documents you uploaded whenever a search query is made. The order of the ranking rules influences the relevancy of your search results. You can learn more about it in the documentation.
Let's use the following order:
This uses the default order along with a custom rule: creation_date. This rule ranks items by their creation date if all previous values are identical.
Searchable attributes
You can also configure searchable attributes. These are attributes whose values Meilisearch searches for matching query words. By default, all attributes are searchable, but you can configure it so that it only searches the name, vendor, category, and tags fields, leaving out images and URL:
Displayed attributes
Displayed attributes are attributes that Meilisearch can return to the user in the front-end application with the displayedAttributes array. Like searchable attributes, all attributes are displayed by default.
Upload the new settings to Meilisearch
It’s time to customize our Meilisearch index with the search settings explained above.
Conclusion
This quick search wouldn’t be possible without an incredible team working on this great project night and day! If you enjoy contributing to the Meilisearch family, check out the following repositories:
Get these monthly updates straight to your inbox by subscribing to our newsletter.
For more things Meilisearch, join our developers community on Discord. You can learn more about the product by checking out the roadmap and participating in product discussions.
