Create An Instant Search Feature With Meilisearch In A React Frontend

Deploy your code in seconds, with no infrastructure to manage. Qoddi App Platform is free for developers! Create an account today.

Meilisearch is an open-source search engine database alternative to Elastic Search or Algolia. It gives fast autocomplete with under 50ms database query performance.

How Meilisearch Works

After installing, Meilisearch provides an API endpoint using the ‘[your-domain]/indexes/’ link. If we have a database of movies, the endpoint will be ‘[your-domain]/indexes/movies’. To have a database of movies we need to create a movies document and insert movie data in it.

Finally, we can fetch the movie data from a React frontend at a super-fast speed while the user types in a form field searching for movies.

Installing Meilisearch On Qoddi

Note: MeiliSearch requires a production instance to run correctly, hence it's not available for free DEV apps.

Qoddi provides a one-click install of Meilisearch from our marketplace section. Just go to the marketplace and launch the Meilisearch app.

This will create a new app with Meilisearch API setup. Get the link and API Key,

Frontend Project Setup

To fetch the data, we need to set up a frontend with React and NextJS. Start a project with your terminal:

npx create-next-app meilisearch
npm i meilisearch

We install the Meilisearch npm SDK too.

Populating The Database

Since we don’t have a movies document created yet, let’s create it. Add this code to addmovies.js

const { MeiliSearch } = require("meilisearch");
const movies = require("./movies.json");
 
client = new MeiliSearch({
   host: "http://<your_meilisearch_qoddi_url>/",
   headers: {
       Authorization: `Bearer ${MEILI_API_KEY}`,
       "Content-Type": "application/json",
   },
});
 
//delete movies and jobs index
// client
//     .index("movies")
//     .delete()
//     .then(() => {
//         console.log("movies index deleted");
//     });
 
client.index("movies").addDocuments(movies);

>> movies.json can be found here

Run this file locally with node command to add movies document to the Meilisearch database:

node addmovies.js

This command will use the addmovies.js script and will add every object in movies.json to our Meilisearch document database.

Search Feature

In your index.js of your NextJS project replace the code with:

import { MeiliSearch } from "meilisearch";
import { useEffect, useState } from "react";
 
const client = new MeiliSearch({
   host: "http://hvlrjtupcw.us05.qoddiapp.com/",
   headers: {
       Authorization: `Bearer ${process.env.MEILI_API_KEY}`,
       "Content-Type": "application/json",
   },
});
 
const App = () => {
   const [movies, setMovies] = useState([]);
   const [search, setSearch] = useState("");
 
   useEffect(() => {
       //search movie index based on search value
       client
           .index("movies")
           .search(search)
           .then((results) => {
               setMovies(results.hits);
           });
   }, [search]);
 
   return (
       <div className="App">
           <div className="search">
               <input
                   type="text"
                   value={search}
                   onChange={(e) => setSearch(e.target.value)}
               />
           </div>
 
           <div className="movies">
               {movies?.map((movie) => (
                   <div className="movie" key={movie.id}>
                       <div className="movie-info">
                           <p>{movie.id}</p>
                           <h2>{movie.name}</h2>
                           <p>{movie.year}</p>
                       </div>
                   </div>
               ))}
           </div>
       </div>
   );
};
 
export default App;

Run npm run dev and test the search functionality by typing in the search box.

Deploy the NextJS app to Qoddi

Create a new Qoddi app from code inside the same stack as your MeiliSearch app. After deployment, create an environment variable called MEILI_MASTER_KEY and update your Next config file accordingly:

env: {
MEILI_MASTER_KEY: process.env.MEILI_MASTER_KEY,
},

Accessing the NextJS app from your web browser will give you access and search to your MeiliSearch database with lightning-fast responses times.