Text Search With Firebase Functions and Fuse.js In 7 Steps

This solution assumes you are using firebase real-time database or firestore as your applications database. This solution doesn't assume you are building for web or mobile. It works for which ever use case, provided you application uses firebase or firestore database.

Before we begin, lets define some terms. What is firebase and what is fuse.js?

In Simple terms, firebase is a google owned company that offers backend as a service. From authentication, to storage, to database, to hosting,to cloud functions, all packaged into a neat api that makes managing your application backend a stress free endeavour.

Fuse.js is a powerful light-weight fuzzy-search javascript library with zero dependencies.

So you might be wondering, why use fuse.js and cloud functions? there are already a couple of good solutions out there that can handle this, solutions like Algolia.
Well, to start with, you don’t need to setup a dedicated backend just to handle search. You might just need some simple search functionality, which doesn’t justify to decision to setup a dedicated backend (part of the reason you are here).
If your application have a small to medium size database and you are trying to optimize on cost, read on.
Enough of the talk, lets get into the exciting stuff.

STEP 1: Create A Firebase Project

Signin to firebase. In the Firebase console, click Add project, then select or enter a Project name.

STEP 2: Setup Node And Firebase CLI

A Node.js environment is needed to write cloud functions, Node.js versions 8 and 10 are supported. For installing Node.js and npm, Node Version Manager is recommended.

once you have installed node.js and npm, install the Firebase CLI via your preferred method. To install the CLI via npm, use:

npm install -g firebase-tools

STEP 3: Initialize Firebase SDK for Cloud Functions

To initialize your project:

1. Run firebase login to log in via the browser and authenticate the firebase tool.
2. Create an new folder for the firebase function.
3. Cd into the folder and run firebase init functions to launch the setup proccess. The tool gives you an option to install dependencies with npm. for now, you can decline and continue with the setup. we will come back to dependencies later.
4. The tool gives you two options for language support:

• JavaScript
• TypeScript. See Write Functions with TypeScript for more information.

For this tutorial, select JavaScript.

5. After completing the setup, cd into the project folder, cd into the folder named functions. Inside the function folder, in the command line, run

npm install fuse.js

STEP 4: Start Writing Your Cloud Function

the cloud function consist of two parts: the fuse.js search module and the cloud functions themselves. you can choose to put the fuse.js module in a new file and import it into the index.js file in the functions folder or you can choose to write everything in one file. Since our search module is not large, we will be putting it in the same file as the cloud functions, in the index.js file.
visit this github gist to get the sample code.

If you haven’t used fuse.js before, click here to learn more

STEP 5: Deploy Your Cloud Function To Firebase

To deploy your function/s, run the command

firebase deploy --only functions

Note that if you want more cloud functions, you will be putting it all in the index.js and using the command above to deploy everything at once. to deploy a particular function, use the command

firebase deploy --only functions:<function name>

Incase you experience errors while trying to deploy, verify that you do not have any errors in your code. Having said that, it does happen that sometimes for reasons we don’t know, your cloud function deployment might fail on first attempt. Don’t panic, just try deploying again.
When deployment becomes successful, go to the firebase console → Develop → Functions, in that order, copy your function url and try visiting it to make sure your function actually works.

STEP 7: Call Your Cloud Function Inside Your Web Application

Now its time to actually make use of this cloud function you just deployed to perform search in your application. It doesn’t matter whether its a mobile application or web, React or Angular or Vue, provided you are using firebase realtime database or firestore, this solution is going to work for your use case.
There are a number of ways to make http requests, i will share what works for me:

let response = await fetch(`<cloud function url>?text_search=${<search term goes here>}`);
response = await response.json();

If you are not familiar with the syntax used inside fetch, its the es6 template lilteral.

And that is it guys! enjoy you new search feature!