Strapi v4 guide

    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.


    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:

    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.

    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

    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.