How to implement search in Firebase

Firebase is a BaaS (Backend as a Service) platform. One of its backend services is the Cloud Firestore, which allows you to perform full-text search using a third-party extension.

Firebase users can query document collections in Cloud Firestore with a set of functions available in SDKs for several programming languages, including Swift, Kotlin, Python, Java, PHP, Ruby, and more.

Cloud Firestore does not provide native indexing, so users must use third-party services for document indexing and performing AI-powered searches.

This tutorial will guide you through the steps to index documents from Cloud Firestore using the Meilisearch extension.

1. Deploy Meilisearch

You first need to have Meilisearch running on a cloud service. You can either self-host it or use Meilisearch Cloud for an easier setup.

This step is required because Meilisearch will provide the indexation of Firebase documents and search capabilities. Meilisearch utilizes machine learning (ML) models to convert documents (JSON files) into vector embeddings, which are stored in a vector space for fast and real-time database retrieval.

To install Meilisearch locally, you can run the following cURL command:

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

Then you need to run Meilisearch:

# Launch Meilisearch
./meilisearch --master-key="aSampleMasterKey"

Let’s now see how to create a Firebase project connected to Meilisearch using the Meilisearch extension.

2. Create a Firebase project

Note: You can skip this step if you already have a Firebase Project with a Firebase database containing your documents.

Once you have Meilisearch up and running, you can create a Firebase project, configure it, and add a Firestore database.

There are several ways to configure a project on Firebase. You can do it directly on the Firebase Console or use the API.

On the console, your project’s page looks like this:

On the left side, click ‘Build’ and choose ‘Firestore Database.’

From there, you can start adding documents to your new database.

Now let’s see how to connect firestore-meilisearch to Cloud Firestore.

3. Install Meilisearch’s Firebase extension

If you look at the extensions in your Firestore Cloud page, you won’t find Meilisearch as a default. Therefore, you need to install it from the Firebase Extensions Hub.

You need to activate the Blaze pricing plan to add this and other extensions. You will be charged a small amount (typically around $0.01/month) for the Firebase resources required by this extension, even if it is not used.

If you don’t have a billing account, you can quickly create one in the Google Cloud Console. Once done, you can activate the extension and set up a budget amount.

The billing account is successfully connected to the Blaze pricing plan with these steps.

The next step to activate the firestore-meilisearch extension is to review the APIs in your Firebase project. If you don’t have the required ones enabled, you’ll be asked to activate them.

After enabling the APIs, you’ll be granted a service account. Finally, you’ll be asked to configure the extension, which includes setting a location, a collection path, the fields to index, and the Meilisearch index name, host, and key (optionally).

In the following example, we created a collection for movies:

You’re now ready to install the extension, which takes between three and five minutes.

Once installed, you can test Meilisearch, but first, you need to check if you have a collection in your Firebase project with the same name as the one configured in the extension.

If not, you can visit the project’s dashboard and add your collection accordingly.

This is the data we are using in our example:

title: The Hobbit: An Unexpected Journey

poster <https://image.tmdb.org/t/p/w500/yHA9Fc37VmpUA5UncTxxo3rTGVA.jpg>

overview: Bilbo Baggins, a hobbit enjoying his quiet life, is swept into an epic quest by Gandalf the Grey and thirteen dwarves who seek to reclaim their mountain home from Smaug, the dragon.

release_date: 1353888000

Once you have added this movie, you should be able to see it when accessing Meilisearch’s search preview:

Well done! You have successfully installed the Meilisearch Firestore extension!

When you add, update, and delete documents from your Firestore collection, they will be mirrored in Meilisearch.

Managing your extension

To access the overview panel of the extension, first click on the ‘Extensions’ tab on Firebase’s sidebar menu, then find the Meilisearch extension and click on ‘Manage.’ Finally, click on ‘Extension configuration’ and you can now change the collection, host, index, and so on.

Accessing your logs allows you to monitor your cloud functions and obtain different levels of information. You may access an extension’s logs via the ‘Extensions’ tab. Alternatively, you can also visit the ‘Functions’ tab and select ‘Logs,’ as indicated in the image below.

4. Set up a search interface

In the previous chapter, we successfully installed and configured the Meilisearch extension on Firestore. Now it’s time to query data using a simple search engine application. Here we will see how to create a search bar for your project using this GitHub repository.

Populating your Firestore collection with data

The first step is to add more documents to our Firestore database. In our case, we will use this collection of movies. Refer to the Firebase documentation for more information on adding and managing data.

Once you have finished adding content to your Firestore database, visit your Meilisearch search preview to check that Meilisearch has successfully indexed your documents.

Search in your document

Now let's create a great search experience. There are many ways to do this, but we’ll keep it simple this time and use instant-meilisearch, our plugin for the instant-search JavaScript library.

Create an index.html file in your preferred development environment. This HTML page should contain a search bar and a box to contain the returned search results:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meilisearch demo</title>
    <link rel="stylesheet" href="<https://cdn.jsdelivr.net/npm/instantsearch.css/themes/algolia-min.css>" />
</head>
<body>
    <div>
        <div id="searchbox"></div>
        <div id="hits"></div>
      </div>
  
      <script src="<https://cdn.jsdelivr.net/npm/@meilisearch/instant-meilisearch/dist/instant-meilisearch.umd.min.js>"></script>
      <script src="<https://cdn.jsdelivr.net/npm/instantsearch.js@4>"></script>
      <script>
          const searchClient = instantMeiliSearch(
              'your Meilisearch url',
              'your Meilisearch API key'
            )
            const search = instantsearch({
              indexName: 'movies',
              searchClient
            })

            search.addWidgets([
              instantsearch.widgets.searchBox({
                container: '#searchbox',
              }),
              instantsearch.widgets.hits({
                container: '#hits',
                templates: {
                  item: `
                    <div style="text-align:center;">
                      <div class="hit-name">
                        {{#helpers.highlight}}{ "attribute": "title" }{{/helpers.highlight}}
                      </div>
                      </br>
                      <div>
                        <img src="{{poster}}" width="200px" />
                      </div>
                    </div>
                  `,
                },
              }),
            ])

            search.start()
      </script>
</body>
</html>

Remember to replace the example’s configuration with your own dataset. This might include the indexName if you named your index something other than ‘movies,’ your instance’s URL, and your API authentication token.

If everything went well, you should be able to access your index.html file and start searching right away:

Congrats! You have added full-text search capability to your Cloud Firestore. Your Firebase collection and your Meilisearch index will automatically stay in sync as long as the firestore-meilisearch extension is installed.

How is Firebase search used?

Firebase offers full-text search capabilities on indexed fields through third-party solutions. Common use cases include:

• User profiles: Filtering users by name or email.
• Product catalogs: Searching items by category or price.
• Blog posts: Finding articles by title or tags.
• Geolocation: Querying places using geo data.

Does Firebase have vector search?

No. Firebase lacks a built-in vector search for semantic or AI-powered queries. However, the Meilisearch extension enables vector search by indexing Firestore documents, allowing similarity-based searches.

Does Firebase support full-text search?

No. Firebase only supports exact string matching. For features like typo-tolerance, synonyms, or ranked results, the Meilisearch extension indexes Firestore data to deliver fast, flexible full-text search.

Enable reliable search in your Firebase app with Meilisearch

Adding search to your Firebase app doesn’t have to be a complex process. In fact, you can give users fast, accurate results with the proper setup.

The key is to start simple, scale smart, and use Meilisearch.