How to Make Full Text Search Function with Cloud FireStore Using Algolia

What I wanted to do

I wanted to add full text search function to my application. I was making the application with Vue.js and Cloud Firestore.

About Algolia

Algolia is API which enable you to make search function (full-text, numerical, and faceted). The response speed is very fast.

What is Vue InstantSearch?

I found Vue InstantSearch, which is an toolbox to make search function with Vue.js. With this official module, you can use a component with full text search function. You could do a lot with this module, but in this article I will just explain the basic use.

GitHub
Document

Step1 – Make Algolia project

Just follow their instruction. You need to make an account if you do not have it. Resister or import data following their instruction. Make sure that

Step2 – Install & import Vue InstantSearch

npm install --save vue-instantsearch
import Vue from 'vue'
import App from './App.vue'
import InstantSearch from 'vue-instantsearch'

Vue.use(InstantSearch)

new Vue({
  el: '#app',
  render: h => h(App)
})

Step3 – Use the component

<template>
  <ais-index
    app-id="YOUR PROJECT APP ID"
    api-key="YOUR PROJECT API KEY"
    index-name="YOUR PROJECT INDEX KEY"
  >
    <ais-search-box></ais-search-box>
    <ais-powered-by></ais-powered-by>
    <ais-results>
      <template slot-scope="{ result }">
        <h2>
          <ais-highlight :result="result" attribute-name="name"></ais-highlight>
        </h2>
      </template>
    </ais-results>
  </ais-index>
</template>

On line 3 – 5, you need to put your Algolia project info in the Index component. You can get it from Algolia console.

Wow! You can see the search function on your app already!

The Search Box component is a text input. It contacts Algolia to get results every time you write. The Results component is the component which shows the results.

If you use the Essential plan (free), you have to put the Algolia logo. The Powered-by component on line 8 is the one which shows it. Make sure you add it if you use the free plan.

Step4 – Add Cloud Function

You might want to update the Algolia project when you add or update data in Cloud Firestore. However, Algolia project or Cloud Firestore does not automatically do so. You have to make Cloud Function for that by yourself. Here is the example.

const functions = require('firebase-functions')
const admin = require('firebase-admin')
admin.initializeApp()

const algoliasearch = require('algoliasearch')
const algoliaClient = algoliasearch(functions.config().algolia.app_id, functions.config().algolia.api_key);
const algoliaIndex = algoliaClient.initIndex('INDEX NAME')

exports.onCreated = functions.firestore.document('data/{dataId}').onCreate(snap => {
  return algoliaIndex.addObject(Object.assign(snap.data(), {objectID: snap.id})).catch((err) => {
    return console.error(new Error(err))
  })
}) 

When you add data in Cloud Firestore, the onCreated function runs. It add object in Algolia.

Leave a Comment