This tutorial will show you how to integrate Meilisearch with Strapi to create a search-based web app. First, you will use Strapi’s quick start guide to create a restaurant collection, and then search this collection with Meilisearch.

​
Prerequisites

  • Node.js: active LTS or maintenance LTS versions, currently Node.js >=18.0.0 <=20.x.x
  • npm >=6.0.0 (installed with Node.js)
  • A running instance of Meilisearch (v >= 1.x). If you need help with this part, you can consult the Installation section.

​
Create a back end using Strapi

​
Set up the project

Create a directory called my-app where you will add the back and front-end parts of the application. Generate a back-end API using Strapi inside my-app: 
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 to access it.
Strapi sign up form
Once you have created your account, you should be redirected to Strapi’s admin dashboard. This is where you will configure your back-end API.

​
Build and manage your content

The next step is to create a new collection type. A collection is like a blueprint of your content—in this case, it will be a collection of restaurants. You will create another collection called “Category” to organize your restaurants later.
Strapi dashboard with side menu 'Content-Type Builder' option circled
To follow along, complete “Part B: Build your data structure with the Content-type Builder” and steps 2 to 5 in “Part D: Add content to your Strapi Cloud project with the Content Manager” from Strapi’s quick start guide. These will include:
  • creating collection types
  • creating new entries
  • setting roles & permissions
  • publishing the content

​
Expand your database

After finishing those steps of Strapi’s quick start guide, two new collections named Restaurant and Category should have appeared under Content Manager > Collection Types. If you click on Restaurant, you can see that there is only one. Add more by clicking the + Create new entry button in the upper-right corner of the dashboard.
Strapi dashboard: Content manager side menu, arrow indicating the location of the Restaurant Collection Type
Add the following 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.
Next, add the French food category on the bottom right corner of the page.
Strapi dashboard: create an entry form, arrow indicating the location of the categorie's location in the right side menu
  • 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
Your Strapi back-end is now up and running. Strapi automatically creates a REST API for your Restaurants collection. Check Strapi’s documentation for all available API endpoints. Now, it’s time to connect Strapi and Meilisearch and start searching.

​
Connect Strapi and Meilisearch

To add the Meilisearch plugin to Strapi, you need to first quit the Strapi app. Go to the terminal window running Strapi and push Ctrl+C to kill the process. Next, install the plugin in the back directory. 
npm install strapi-plugin-meilisearch
After the installation, you have to rebuild the Strapi app before starting it again in development mode, since it makes configuration easier. 
npm run build
npm run develop
At this point, your Strapi app should be running once again on the default address: http://localhost:1337/admin. Open it in your browser. You should see an admin log-in page. Enter the credentials you used to create your account. Once connected, you should see the new meilisearch plugin on the left side of the screen.
Strapi dashboard with plugins side menu: arrow pointing at the 'meilisearch' option
Add your Meilisearch credentials on the Settings tab of the meilisearch plugin page.
Strapi dashboard with Meilisearch plugin selected: arrow pointing to the location of the settings tab
Now it’s time to add your Strapi collection to Meilisearch. In the Collections tab on the meilisearch plugin page, you should see the restaurant and category content-types. By clicking on the checkbox next to restaurant, the content-type is automatically indexed in Meilisearch.
GIF showing the mouse clicking on 'restaurant' in the Meilisearch collections tab
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. Access the search preview confirm everything is working correctly by searching for “butter”.
GIF showing the word 'butter' being typed in the search bar and search results appearing instantly
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

This tutorial showed you how to add your Strapi collections to Meilisearch. In most real-life scenarios, you’ll typically build a custom search interface and fetch results using Meilisearch’s API. To learn how to quickly build a front-end interface of your own, check out the Front-end integration page guide.