Build a fullstack 🔎 fulltext autocomplete search feature with Algolia and Firebase, with implementations covering Node.js, Svelte, and Angular. https://fireship.io/lessons/algolia-cloud-functions/

- Algolia https://www.algolia.com/

#algolia #nodejs #firebase

Take the quiz 🤓

iOS https://itunes.apple.com/us/app/fireship/id1462592372?mt=8
Android https://play.google.com/store/apps/details?id=io.fireship.quizapp

Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment.
2024-02-04T06:35:29.991Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
f0fb8429-08b4-46b1-9424-0e4b8878a325
68b7e9e251de4fa3092f5f507336f3ba27d2aacd7d5db2e35a1f9a53b15f986c
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
Today, we'll turn your Firestore database into a full text search engine using Algolia.
It's pointing at something.
What?
Look.
It's the rest of them.
Yes.
It's one of my all time favorite APIs and I use it on Fireship IO to power content discovery features like instant search.
What you'll build today is a pipeline with Firebase Cloud Functions that automatically indexes your Firestore data in Algolia, and then we'll look at multiple implementations consume that data from a customer facing app.
If you're new here, like and subscribe and check out the full source code at fireship.
Io.
So let's Start by answering the question of when would you want to use a service like Algolia?
And keep in mind this video is not sponsored, so these are my own personal opinions.
Yeah.
Well, you know, that's just like, uh, your opinion, man.
NoSQL databases like Fire Store are designed primarily for fast reads and to scale seamlessly.
But they can be relatively limited on the types of queries you can make, especially if you need to search Cross the entire text of a document or if you need to filter by multiple properties simultaneously and keep track of counts of different properties.
Algolia solves all of these problems for you and more.
It's really an ideal solution if you have something like Amazon where you have millions of products and you need to sort these products and filter and search them in many complex ways.
Now, Algolia starts off with a free tier, but one of the biggest complaints you might hear is that it's expensive.
And I do think that's a very valid complaint, especially if you have millions of records.
It jumps from free to $29 per month up to $500 per month.
But as you'll see in this video, this is kind of a situation where you get what you pay for.
The first thing you'll want to do is sign up for an Algolia account, and then it will walk you through the process of creating an index.
I'll go ahead and create a new index called customers, And this will basically be a mirror of our Firestore data minus any personally identifiable information.
Things like email addresses and phone numbers are not something that you want to keep in the index.
You should keep in mind that all this data will be exposed client side, so you want to leave out any information that would be considered sensitive.
So now that we have this index set up, have a whole bunch of different ways to customize it.
I'll leave the customization part up to you, but just know that there's a whole bunch of cool things you can do, like set the searchable attributes, Tweak the ranking and sorting algorithms, set up typo tolerance, stop words, and word proximity, and a whole bunch of other stuff.
And you could even generate your own UI demo based on your own underlying data.
And that means you can get a solid mock up of your search UI before you write any front end code.
Now that we have this index created, we need a way to dynamically add data to it, and we want to add data to the index every time a new Firestore document is created.
As you can see here, I have Algolia on the left and Firestore on the right.
When new documents are added to the database, they will automatically be updated in the index.
Indexing operations will always happen on the back end, which we'll do with Node.
Js and Firebase Cloud Functions.
We'll start from an empty working directory and then run Firebase init functions.
I'll be using JavaScript for this demo but feel free to use TypeScript if you prefer.
That command will give us a functions directory, and you can ignore all of the other directories that you see on my screen for now.
But you can see all of these framework specific front end integrations in the full source code.
From there, we'll CD into the functions directory and install Algolia search.
This is an API client for Node, and it's going to require our API keys, which we can retrieve from the Algolia dashboard.
You'll need your application ID as well as your admin API key.
And then we have this big long command to save the API keys in the functions environment.
And the reason you want to have these as environment variables is if you ever have to change the API key, then you can reset it in the environment without having to redeploy your Cloud Functions.
At this point, we can open up the index JS file, and we'll start writing some code.
We'll go ahead and import the Algolia search client, and then we'll make a reference to the app ID and the admin key that we have in the functions environment.
We'll pass those values to Algolia search, and then we'll initialize the index by calling init index with the name of our index, which in this case is customers.
And now we can reference this index in any one of our Cloud Functions.
So we'll go ahead and start by creating a new Firestore function called add to index, which makes a reference to a Firestore document.
Whenever a new document is created in the customer's collection, it will run the code inside of this callback.
The snapshot contains the newly created data from the Firestore document.
That's the data that we want to duplicate in Algolia minus any personally identifiable information.
Now we can identify a record in Algolia with its object ID.
So the object ID will be equal to the Firestore document ID, and that's how we kind of connect the 2 objects together on both platforms.
Then the final step is to return a promise from the function, which we'll do with index add object with a JavaScript object containing the data and object ID.
And that's all there is to it.
Now every new customer document in Firestore will be duplicated in the Algolia index.
But this function will only run on create, And it's possible that the data might change or might be removed in the future.
So we'll set up a couple of additional Cloud Functions here to handle those requirements.
We'll create a second Cloud Function called Update Index that runs whenever the Firestore document is updated.
This function is almost identical to the last one with just some minor differences.
Instead of having the document snapshot, we have a change object which has the Firestore document before the change and after the change.
We're only concerned about the changes Afterwards because that's what we want to update in Algolia.
And we'll do that by calling index save object to update a single object with this new data.
And lastly, we'll create one additional function called delete from index that will run when a document is deleted from Firestore.
And this one is the easiest of all.
We simply call index delete object And pass it the Firestore document ID.
And, again, that's why it's important that your Algolia object ID matches the Firestore document ID.
Now we can deploy our 3 functions by running Firebase deploy only functions from the command line, and then you should see your functions in the Firebase console.
Now at this point, we could create some dummy data manually in the Firebase console, but I want to show you a little trick to quickly see the database with some fake dummy data.
We can install Faker JS in the Cloud Functions environment, which allows us to generate a massive amount of fake random data.
From there, I've Created a new file called seed.js in the functions directory.
And I'm going to import Firebase Admin and then call admin initialize app.
Now this isn't actually a Cloud Function.
It's just a node script that will run from the command line in just a second here.
We'll go ahead and import faker, And then we'll make a reference to Firestore.
Then we'll write a function called fake it, and every time this function is called it will add a new document to the database With all of its data being completely random and fake.
And lastly, we'll create an array that has the length of the number of documents that we want to create, in this case, 20.
And then we'll go ahead and call this function for each item in the array.
Now because this script is in the function's directory, it will automatically pick up our Firebase admin credentials.
And that means we can simply go to the command line, call node, and point it to the script.
And the result should be 20 new documents in your database.
Now because we've already deployed our functions, this will also result in 20 function invocations for the on create event.
And that means if we refresh our Algolia index, We should see all of the data there as well.
If for whatever reason you don't see your data in Algoly at this point, check out the Cloud Function Logs to see if you have any error messages there.
This would also be a good time to validate your update and delete cloud functions.
If you update some data in Firestore from the console, you should see it's reflected in Algolia after a couple of seconds.
In addition, if you delete a document from Firestore, you should see that the corresponding object in Algolia is removed as well.
It looks like the back end implementation for full text search is working perfectly, so we'll go ahead and move on to the front end integration.
When it comes to the front end, Algolia provides a lot of support for different frameworks, including Angular, React, Vue, iOS, and Android.
I'll show you the Angular implementation details in this video.
But what if you're working with a framework that's not supported like Svelte?
In that case, you can use the API client directly, or you can use the InstantSearch JS library.
Let's go ahead and start by looking at the Svelte implementation details because it's not framework specific and could work with any framework if you wanted to go this route.
1st, we'll go ahead and install Algolia Search into the app.
And you could also install Instant Search at this point as well.
Instant Search will give you a bunch of prebuilt widgets, but in this case, I'm going to build a completely new UI from scratch.
We'll go into our Svelte component And then we'll import on mount as well as Algolia search, and we really only need Algolia search lite in this case.
Then we'll initialize properties for the search client as well as the index that we're referencing.
Then we'll have the query that the user types into the forum and then the hits that get returned back from Algolia with the search results.
From there, we initialize the search client, which is almost identical to how we did it in the Cloud Function, except that we use the search API key instead of the admin API key.
It's extremely important to keep your admin API key out of your front end code because it would allow anybody to modify or completely destroy your index.
From there we'll go ahead and make a reference to the customer's index, and then we can make a search by simply calling search on that object with the query parameters that we want to pass it.
In this case we'll simply be passing the text that the user types into the form, but you could also pass additional options here to customize the behavior.
Now we want to run a query every time the user types into a form.
So we'll go ahead and handle that with a function called search.
It will await the results of a query, And then that result object has a hits property, which contains all of the objects from the Algolia index for that search query.
So every time the hits property is updated, will cause Svelte to react and update the state of the UI.
Now moving down to the HTML, we'll go ahead and set up a text input, And then we'll bind the value of that text input to the query property on the component.
Then we want to run the search on every key up event, So we'll go ahead and say on key up and then have it fire the search function.
And now it's just a matter of looping over the hits to display a template for each individual result.
We'll set up an image with the hit avatar, and then we'll display a heading with the username.
But you might also want to highlight the text that the user has typed with the results that are returned.
Now Algolia returns a highlighted result that contains the raw HTML of a property with the text highlighted.
So one way to use that data is to bind it to the inner HTML of a paragraph element.
By default, it will contain the text of that property, but with the highlighted part wrapped in an em element.
You can actually customize the element used here from the Algolia dashboard.
Now to make the highlight really stand out, we'll go ahead and add a global style here for the emphasis.
And you can see when we type into the form in the demo that the search results are updated and the user's keywords are highlighted in the search result.
Now this UI could obviously use a lot of work, but we now have a full stack full text search feature in our Svelte app.
That was pretty easy, but if you're using Angular, View, or React, it's even easier.
Algolia provides a bunch of prebuilt libraries and components for these frameworks.
To get started with the Angular version, you'll want to follow the official setup instructions, which will have you install Package and add it to your NG module.
And then I've generated a search component here in my Angular app, and you can see that it relies on 0 TypeScript whatsoever.
And that's because Algolia has already done that stuff for you under the hood, so you're simply working in the template to display the actual UI elements that you want to show the end user.
The first thing you'll do is wrap your elements in the AIS Instant Search component, and that will give you the context to search a specific index.
From there, you'll want to display a form input, which you can do with AIS Searchbox.
Then you can use the AIS Hits component to give you the context for the hits And the actual search result object itself.
Then you can use Angular directives to customize the behavior of the template.
For example, we'll say no match is found when the hit's length equals 0.
Then we'll go ahead and use n g f to loop over the array of hits and display a template for each result.
And we can easily highlight text by using the built in AIS highlight component.
Just specify the attribute you wanna highlight and then pass in the hit as an input property.
And now we have Fullstack Full Text Search in Angular.
So at this point it's just a matter of making it look good with our design system.
So I'm gonna go ahead and wrap things up there, but keep in mind there's a more you can do with Algolia like multi property filtering, geo queries, and things like that.
If this video helped you, please like and subscribe and consider becoming a pro member at Fireship IO to get access to even more content.
Thanks for watching, and I will talk to you soon.

Speaker 0: Today, we'll turn your Firestore database into a full text search engine using Algolia. It's pointing at something. What? Look. It's the rest of them.

Yes. It's one of my all time favorite APIs and I use it on Fireship IO to power content discovery features like instant search. What you'll build today is a pipeline with Firebase Cloud Functions that automatically indexes your Firestore data in Algolia, and then we'll look at multiple implementations consume that data from a customer facing app. If you're new here, like and subscribe and check out the full source code at fireship. Io.

So let's Start by answering the question of when would you want to use a service like Algolia? And keep in mind this video is not sponsored, so these are my own personal opinions. Yeah. Well, you know, that's just like, uh, your opinion, man. NoSQL databases like Fire Store are designed primarily for fast reads and to scale seamlessly.

But they can be relatively limited on the types of queries you can make, especially if you need to search Cross the entire text of a document or if you need to filter by multiple properties simultaneously and keep track of counts of different properties. Algolia solves all of these problems for you and more. It's really an ideal solution if you have something like Amazon where you have millions of products and you need to sort these products and filter and search them in many complex ways. Now, Algolia starts off with a free tier, but one of the biggest complaints you might hear is that it's expensive. And I do think that's a very valid complaint, especially if you have millions of records.

It jumps from free to $29 per month up to $500 per month. But as you'll see in this video, this is kind of a situation where you get what you pay for. The first thing you'll want to do is sign up for an Algolia account, and then it will walk you through the process of creating an index. I'll go ahead and create a new index called customers, And this will basically be a mirror of our Firestore data minus any personally identifiable information. Things like email addresses and phone numbers are not something that you want to keep in the index.

You should keep in mind that all this data will be exposed client side, so you want to leave out any information that would be considered sensitive. So now that we have this index set up, have a whole bunch of different ways to customize it. I'll leave the customization part up to you, but just know that there's a whole bunch of cool things you can do, like set the searchable attributes, Tweak the ranking and sorting algorithms, set up typo tolerance, stop words, and word proximity, and a whole bunch of other stuff. And you could even generate your own UI demo based on your own underlying data. And that means you can get a solid mock up of your search UI before you write any front end code.

Now that we have this index created, we need a way to dynamically add data to it, and we want to add data to the index every time a new Firestore document is created. As you can see here, I have Algolia on the left and Firestore on the right. When new documents are added to the database, they will automatically be updated in the index. Indexing operations will always happen on the back end, which we'll do with Node. Js and Firebase Cloud Functions.

We'll start from an empty working directory and then run Firebase init functions. I'll be using JavaScript for this demo but feel free to use TypeScript if you prefer. That command will give us a functions directory, and you can ignore all of the other directories that you see on my screen for now. But you can see all of these framework specific front end integrations in the full source code. From there, we'll CD into the functions directory and install Algolia search.

This is an API client for Node, and it's going to require our API keys, which we can retrieve from the Algolia dashboard. You'll need your application ID as well as your admin API key. And then we have this big long command to save the API keys in the functions environment. And the reason you want to have these as environment variables is if you ever have to change the API key, then you can reset it in the environment without having to redeploy your Cloud Functions. At this point, we can open up the index JS file, and we'll start writing some code.

We'll go ahead and import the Algolia search client, and then we'll make a reference to the app ID and the admin key that we have in the functions environment. We'll pass those values to Algolia search, and then we'll initialize the index by calling init index with the name of our index, which in this case is customers. And now we can reference this index in any one of our Cloud Functions. So we'll go ahead and start by creating a new Firestore function called add to index, which makes a reference to a Firestore document. Whenever a new document is created in the customer's collection, it will run the code inside of this callback.

The snapshot contains the newly created data from the Firestore document. That's the data that we want to duplicate in Algolia minus any personally identifiable information. Now we can identify a record in Algolia with its object ID. So the object ID will be equal to the Firestore document ID, and that's how we kind of connect the 2 objects together on both platforms. Then the final step is to return a promise from the function, which we'll do with index add object with a JavaScript object containing the data and object ID.

And that's all there is to it. Now every new customer document in Firestore will be duplicated in the Algolia index. But this function will only run on create, And it's possible that the data might change or might be removed in the future. So we'll set up a couple of additional Cloud Functions here to handle those requirements. We'll create a second Cloud Function called Update Index that runs whenever the Firestore document is updated.

This function is almost identical to the last one with just some minor differences. Instead of having the document snapshot, we have a change object which has the Firestore document before the change and after the change. We're only concerned about the changes Afterwards because that's what we want to update in Algolia. And we'll do that by calling index save object to update a single object with this new data. And lastly, we'll create one additional function called delete from index that will run when a document is deleted from Firestore.

And this one is the easiest of all. We simply call index delete object And pass it the Firestore document ID. And, again, that's why it's important that your Algolia object ID matches the Firestore document ID. Now we can deploy our 3 functions by running Firebase deploy only functions from the command line, and then you should see your functions in the Firebase console. Now at this point, we could create some dummy data manually in the Firebase console, but I want to show you a little trick to quickly see the database with some fake dummy data.

We can install Faker JS in the Cloud Functions environment, which allows us to generate a massive amount of fake random data. From there, I've Created a new file called seed.js in the functions directory. And I'm going to import Firebase Admin and then call admin initialize app. Now this isn't actually a Cloud Function. It's just a node script that will run from the command line in just a second here.

We'll go ahead and import faker, And then we'll make a reference to Firestore. Then we'll write a function called fake it, and every time this function is called it will add a new document to the database With all of its data being completely random and fake. And lastly, we'll create an array that has the length of the number of documents that we want to create, in this case, 20. And then we'll go ahead and call this function for each item in the array. Now because this script is in the function's directory, it will automatically pick up our Firebase admin credentials.

And that means we can simply go to the command line, call node, and point it to the script. And the result should be 20 new documents in your database. Now because we've already deployed our functions, this will also result in 20 function invocations for the on create event. And that means if we refresh our Algolia index, We should see all of the data there as well. If for whatever reason you don't see your data in Algoly at this point, check out the Cloud Function Logs to see if you have any error messages there.

This would also be a good time to validate your update and delete cloud functions. If you update some data in Firestore from the console, you should see it's reflected in Algolia after a couple of seconds. In addition, if you delete a document from Firestore, you should see that the corresponding object in Algolia is removed as well. It looks like the back end implementation for full text search is working perfectly, so we'll go ahead and move on to the front end integration. When it comes to the front end, Algolia provides a lot of support for different frameworks, including Angular, React, Vue, iOS, and Android.

I'll show you the Angular implementation details in this video. But what if you're working with a framework that's not supported like Svelte? In that case, you can use the API client directly, or you can use the InstantSearch JS library. Let's go ahead and start by looking at the Svelte implementation details because it's not framework specific and could work with any framework if you wanted to go this route. 1st, we'll go ahead and install Algolia Search into the app.

And you could also install Instant Search at this point as well. Instant Search will give you a bunch of prebuilt widgets, but in this case, I'm going to build a completely new UI from scratch. We'll go into our Svelte component And then we'll import on mount as well as Algolia search, and we really only need Algolia search lite in this case. Then we'll initialize properties for the search client as well as the index that we're referencing. Then we'll have the query that the user types into the forum and then the hits that get returned back from Algolia with the search results.

From there, we initialize the search client, which is almost identical to how we did it in the Cloud Function, except that we use the search API key instead of the admin API key. It's extremely important to keep your admin API key out of your front end code because it would allow anybody to modify or completely destroy your index. From there we'll go ahead and make a reference to the customer's index, and then we can make a search by simply calling search on that object with the query parameters that we want to pass it. In this case we'll simply be passing the text that the user types into the form, but you could also pass additional options here to customize the behavior. Now we want to run a query every time the user types into a form.

So we'll go ahead and handle that with a function called search. It will await the results of a query, And then that result object has a hits property, which contains all of the objects from the Algolia index for that search query. So every time the hits property is updated, will cause Svelte to react and update the state of the UI. Now moving down to the HTML, we'll go ahead and set up a text input, And then we'll bind the value of that text input to the query property on the component. Then we want to run the search on every key up event, So we'll go ahead and say on key up and then have it fire the search function.

And now it's just a matter of looping over the hits to display a template for each individual result. We'll set up an image with the hit avatar, and then we'll display a heading with the username. But you might also want to highlight the text that the user has typed with the results that are returned. Now Algolia returns a highlighted result that contains the raw HTML of a property with the text highlighted. So one way to use that data is to bind it to the inner HTML of a paragraph element.

By default, it will contain the text of that property, but with the highlighted part wrapped in an em element. You can actually customize the element used here from the Algolia dashboard. Now to make the highlight really stand out, we'll go ahead and add a global style here for the emphasis. And you can see when we type into the form in the demo that the search results are updated and the user's keywords are highlighted in the search result. Now this UI could obviously use a lot of work, but we now have a full stack full text search feature in our Svelte app.

That was pretty easy, but if you're using Angular, View, or React, it's even easier. Algolia provides a bunch of prebuilt libraries and components for these frameworks. To get started with the Angular version, you'll want to follow the official setup instructions, which will have you install Package and add it to your NG module. And then I've generated a search component here in my Angular app, and you can see that it relies on 0 TypeScript whatsoever. And that's because Algolia has already done that stuff for you under the hood, so you're simply working in the template to display the actual UI elements that you want to show the end user.

The first thing you'll do is wrap your elements in the AIS Instant Search component, and that will give you the context to search a specific index. From there, you'll want to display a form input, which you can do with AIS Searchbox. Then you can use the AIS Hits component to give you the context for the hits And the actual search result object itself. Then you can use Angular directives to customize the behavior of the template. For example, we'll say no match is found when the hit's length equals 0.

Then we'll go ahead and use n g f to loop over the array of hits and display a template for each result. And we can easily highlight text by using the built in AIS highlight component. Just specify the attribute you wanna highlight and then pass in the hit as an input property. And now we have Fullstack Full Text Search in Angular. So at this point it's just a matter of making it look good with our design system.

So I'm gonna go ahead and wrap things up there, but keep in mind there's a more you can do with Algolia like multi property filtering, geo queries, and things like that. If this video helped you, please like and subscribe and consider becoming a pro member at Fireship IO to get access to even more content. Thanks for watching, and I will talk to you soon.
Today, we'll turn your Firestore database into a full text search engine using Algolia. It's pointing at something. What? Look. It's the rest of them. Yes. It's one of my all time favorite APIs and I use it on Fireship IO to power content discovery features like instant search. What you'll build today is a pipeline with Firebase Cloud Functions that automatically indexes your Firestore data in Algolia, and then we'll look at multiple implementations consume that data from a customer facing app.
databases
If you're new here, like and subscribe and check out the full source code at fireship. Io. So let's Start by answering the question of when would you want to use a service like Algolia?
And keep in mind this video is not sponsored, so these are my own personal opinions. Yeah. Well, you know, that's just like, uh, your opinion, man. NoSQL databases like Fire Store are designed primarily for fast reads and to scale seamlessly. But they can be relatively limited on the types of queries you can make, especially if you need to search Cross the entire text of a document or if you need to filter by multiple properties simultaneously and keep track of counts of different properties. Algolia solves all of these problems for you and more. It's really an ideal solution if you have something like Amazon where you have millions of products and you need to sort these products and filter and search them in many complex ways. Now, Algolia starts off with a free tier, but one of the biggest complaints you might hear is that it's expensive.
databases
websites
amazon
And I do think that's a very valid complaint, especially if you have millions of records.
It jumps from free to $29 per month up to $500 per month. But as you'll see in this video, this is kind of a situation where you get what you pay for. The first thing you'll want to do is sign up for an Algolia account, and then it will walk you through the process of creating an index. I'll go ahead and create a new index called customers, And this will basically be a mirror of our Firestore data minus any personally identifiable information. Things like email addresses and phone numbers are not something that you want to keep in the index. You should keep in mind that all this data will be exposed client side, so you want to leave out any information that would be considered sensitive.
commerce
purchasing
websites
So now that we have this index set up, have a whole bunch of different ways to customize it. I'll leave the customization part up to you, but just know that there's a whole bunch of cool things you can do, like set the searchable attributes, Tweak the ranking and sorting algorithms, set up typo tolerance, stop words, and word proximity, and a whole bunch of other stuff.
And you could even generate your own UI demo based on your own underlying data. And that means you can get a solid mock up of your search UI before you write any front end code. Now that we have this index created, we need a way to dynamically add data to it, and we want to add data to the index every time a new Firestore document is created.
programming
As you can see here, I have Algolia on the left and Firestore on the right. When new documents are added to the database, they will automatically be updated in the index. Indexing operations will always happen on the back end, which we'll do with Node. Js and Firebase Cloud Functions.
databases
We'll start from an empty working directory and then run Firebase init functions. I'll be using JavaScript for this demo but feel free to use TypeScript if you prefer. That command will give us a functions directory, and you can ignore all of the other directories that you see on my screen for now. But you can see all of these framework specific front end integrations in the full source code. From there, we'll CD into the functions directory and install Algolia search. This is an API client for Node, and it's going to require our API keys, which we can retrieve from the Algolia dashboard. You'll need your application ID as well as your admin API key. And then we have this big long command to save the API keys in the functions environment. And the reason you want to have these as environment variables is if you ever have to change the API key, then you can reset it in the environment without having to redeploy your Cloud Functions. At this point, we can open up the index JS file, and we'll start writing some code. We'll go ahead and import the Algolia search client, and then we'll make a reference to the app ID and the admin key that we have in the functions environment.
We'll pass those values to Algolia search, and then we'll initialize the index by calling init index with the name of our index, which in this case is customers. And now we can reference this index in any one of our Cloud Functions. So we'll go ahead and start by creating a new Firestore function called add to index, which makes a reference to a Firestore document.
commerce
Whenever a new document is created in the customer's collection, it will run the code inside of this callback. The snapshot contains the newly created data from the Firestore document. That's the data that we want to duplicate in Algolia minus any personally identifiable information. Now we can identify a record in Algolia with its object ID. So the object ID will be equal to the Firestore document ID, and that's how we kind of connect the 2 objects together on both platforms. Then the final step is to return a promise from the function, which we'll do with index add object with a JavaScript object containing the data and object ID. And that's all there is to it. Now every new customer document in Firestore will be duplicated in the Algolia index. But this function will only run on create, And it's possible that the data might change or might be removed in the future. So we'll set up a couple of additional Cloud Functions here to handle those requirements. We'll create a second Cloud Function called Update Index that runs whenever the Firestore document is updated. This function is almost identical to the last one with just some minor differences. Instead of having the document snapshot, we have a change object which has the Firestore document before the change and after the change. We're only concerned about the changes Afterwards because that's what we want to update in Algolia. And we'll do that by calling index save object to update a single object with this new data. And lastly, we'll create one additional function called delete from index that will run when a document is deleted from Firestore. And this one is the easiest of all. We simply call index delete object And pass it the Firestore document ID. And, again, that's why it's important that your Algolia object ID matches the Firestore document ID. Now we can deploy our 3 functions by running Firebase deploy only functions from the command line, and then you should see your functions in the Firebase console. Now at this point, we could create some dummy data manually in the Firebase console, but I want to show you a little trick to quickly see the database with some fake dummy data. We can install Faker JS in the Cloud Functions environment, which allows us to generate a massive amount of fake random data. From there, I've Created a new file called seed.js in the functions directory. And I'm going to import Firebase Admin and then call admin initialize app. Now this isn't actually a Cloud Function. It's just a node script that will run from the command line in just a second here. We'll go ahead and import faker, And then we'll make a reference to Firestore. Then we'll write a function called fake it, and every time this function is called it will add a new document to the database With all of its data being completely random and fake.
And lastly, we'll create an array that has the length of the number of documents that we want to create, in this case, 20. And then we'll go ahead and call this function for each item in the array. Now because this script is in the function's directory, it will automatically pick up our Firebase admin credentials.
programming
And that means we can simply go to the command line, call node, and point it to the script.
And the result should be 20 new documents in your database. Now because we've already deployed our functions, this will also result in 20 function invocations for the on create event. And that means if we refresh our Algolia index, We should see all of the data there as well.
databases
data management
data
If for whatever reason you don't see your data in Algoly at this point, check out the Cloud Function Logs to see if you have any error messages there. This would also be a good time to validate your update and delete cloud functions. If you update some data in Firestore from the console, you should see it's reflected in Algolia after a couple of seconds. In addition, if you delete a document from Firestore, you should see that the corresponding object in Algolia is removed as well. It looks like the back end implementation for full text search is working perfectly, so we'll go ahead and move on to the front end integration. When it comes to the front end, Algolia provides a lot of support for different frameworks, including Angular, React, Vue, iOS, and Android. I'll show you the Angular implementation details in this video. But what if you're working with a framework that's not supported like Svelte? In that case, you can use the API client directly, or you can use the InstantSearch JS library. Let's go ahead and start by looking at the Svelte implementation details because it's not framework specific and could work with any framework if you wanted to go this route. 1st, we'll go ahead and install Algolia Search into the app. And you could also install Instant Search at this point as well. Instant Search will give you a bunch of prebuilt widgets, but in this case, I'm going to build a completely new UI from scratch. We'll go into our Svelte component And then we'll import on mount as well as Algolia search, and we really only need Algolia search lite in this case.
Then we'll initialize properties for the search client as well as the index that we're referencing. Then we'll have the query that the user types into the forum and then the hits that get returned back from Algolia with the search results. From there, we initialize the search client, which is almost identical to how we did it in the Cloud Function, except that we use the search API key instead of the admin API key. It's extremely important to keep your admin API key out of your front end code because it would allow anybody to modify or completely destroy your index. From there we'll go ahead and make a reference to the customer's index, and then we can make a search by simply calling search on that object with the query parameters that we want to pass it. In this case we'll simply be passing the text that the user types into the form, but you could also pass additional options here to customize the behavior.
google
commerce
Now we want to run a query every time the user types into a form. So we'll go ahead and handle that with a function called search. It will await the results of a query, And then that result object has a hits property, which contains all of the objects from the Algolia index for that search query. So every time the hits property is updated, will cause Svelte to react and update the state of the UI. Now moving down to the HTML, we'll go ahead and set up a text input, And then we'll bind the value of that text input to the query property on the component.
Then we want to run the search on every key up event, So we'll go ahead and say on key up and then have it fire the search function. And now it's just a matter of looping over the hits to display a template for each individual result. We'll set up an image with the hit avatar, and then we'll display a heading with the username.
google
But you might also want to highlight the text that the user has typed with the results that are returned. Now Algolia returns a highlighted result that contains the raw HTML of a property with the text highlighted. So one way to use that data is to bind it to the inner HTML of a paragraph element. By default, it will contain the text of that property, but with the highlighted part wrapped in an em element. You can actually customize the element used here from the Algolia dashboard. Now to make the highlight really stand out, we'll go ahead and add a global style here for the emphasis.
And you can see when we type into the form in the demo that the search results are updated and the user's keywords are highlighted in the search result. Now this UI could obviously use a lot of work, but we now have a full stack full text search feature in our Svelte app.
google
That was pretty easy, but if you're using Angular, View, or React, it's even easier. Algolia provides a bunch of prebuilt libraries and components for these frameworks. To get started with the Angular version, you'll want to follow the official setup instructions, which will have you install Package and add it to your NG module. And then I've generated a search component here in my Angular app, and you can see that it relies on 0 TypeScript whatsoever. And that's because Algolia has already done that stuff for you under the hood, so you're simply working in the template to display the actual UI elements that you want to show the end user. The first thing you'll do is wrap your elements in the AIS Instant Search component, and that will give you the context to search a specific index. From there, you'll want to display a form input, which you can do with AIS Searchbox. Then you can use the AIS Hits component to give you the context for the hits And the actual search result object itself. Then you can use Angular directives to customize the behavior of the template. For example, we'll say no match is found when the hit's length equals 0. Then we'll go ahead and use n g f to loop over the array of hits and display a template for each result. And we can easily highlight text by using the built in AIS highlight component. Just specify the attribute you wanna highlight and then pass in the hit as an input property. And now we have Fullstack Full Text Search in Angular.
So at this point it's just a matter of making it look good with our design system. So I'm gonna go ahead and wrap things up there, but keep in mind there's a more you can do with Algolia like multi property filtering, geo queries, and things like that. If this video helped you, please like and subscribe and consider becoming a pro member at Fireship IO to get access to even more content. Thanks for watching, and I will talk to you soon.
youtube
streaming
media
social media
video gaming
Today, we'll turn your Firestore database into a full text search engine using Algolia. It's pointing at something. What? Look. It's the rest of them. Yes. It's one of my all time favorite APIs and I use it on Fireship IO to power content discovery features like instant search. What you'll build today is a pipeline with Firebase Cloud Functions that automatically indexes your Firestore data in Algolia, and then we'll look at multiple implementations consume that data from a customer facing app. If you're new here, like and subscribe and check out the full source code at fireship. Io. So let's Start by answering the question of when would you want to use a service like Algolia? And keep in mind this video is not sponsored, so these are my own personal opinions. Yeah. Well, you know, that's just like, uh, your opinion, man. NoSQL databases like Fire Store are designed primarily for fast reads and to scale seamlessly. But they can be relatively limited on the types of queries you can make, especially if you need to search Cross the entire text of a document or if you need to filter by multiple properties simultaneously and keep track of counts of different properties. Algolia solves all of these problems for you and more. It's really an ideal solution if you have something like Amazon where you have millions of products and you need to sort these products and filter and search them in many complex ways. Now, Algolia starts off with a free tier, but one of the biggest complaints you might hear is that it's expensive. And I do think that's a very valid complaint, especially if you have millions of records. It jumps from free to $29 per month up to $500 per month. But as you'll see in this video, this is kind of a situation where you get what you pay for. The first thing you'll want to do is sign up for an Algolia account, and then it will walk you through the process of creating an index. I'll go ahead and create a new index called customers, And this will basically be a mirror of our Firestore data minus any personally identifiable information. Things like email addresses and phone numbers are not something that you want to keep in the index. You should keep in mind that all this data will be exposed client side, so you want to leave out any information that would be considered sensitive. So now that we have this index set up, have a whole bunch of different ways to customize it. I'll leave the customization part up to you, but just know that there's a whole bunch of cool things you can do, like set the searchable attributes, Tweak the ranking and sorting algorithms, set up typo tolerance, stop words, and word proximity, and a whole bunch of other stuff. And you could even generate your own UI demo based on your own underlying data. And that means you can get a solid mock up of your search UI before you write any front end code. Now that we have this index created, we need a way to dynamically add data to it, and we want to add data to the index every time a new Firestore document is created. As you can see here, I have Algolia on the left and Firestore on the right. When new documents are added to the database, they will automatically be updated in the index. Indexing operations will always happen on the back end, which we'll do with Node. Js and Firebase Cloud Functions. We'll start from an empty working directory and then run Firebase init functions. I'll be using JavaScript for this demo but feel free to use TypeScript if you prefer. That command will give us a functions directory, and you can ignore all of the other directories that you see on my screen for now. But you can see all of these framework specific front end integrations in the full source code. From there, we'll CD into the functions directory and install Algolia search. This is an API client for Node, and it's going to require our API keys, which we can retrieve from the Algolia dashboard. You'll need your application ID as well as your admin API key. And then we have this big long command to save the API keys in the functions environment. And the reason you want to have these as environment variables is if you ever have to change the API key, then you can reset it in the environment without having to redeploy your Cloud Functions. At this point, we can open up the index JS file, and we'll start writing some code. We'll go ahead and import the Algolia search client, and then we'll make a reference to the app ID and the admin key that we have in the functions environment. We'll pass those values to Algolia search, and then we'll initialize the index by calling init index with the name of our index, which in this case is customers. And now we can reference this index in any one of our Cloud Functions. So we'll go ahead and start by creating a new Firestore function called add to index, which makes a reference to a Firestore document. Whenever a new document is created in the customer's collection, it will run the code inside of this callback. The snapshot contains the newly created data from the Firestore document. That's the data that we want to duplicate in Algolia minus any personally identifiable information. Now we can identify a record in Algolia with its object ID. So the object ID will be equal to the Firestore document ID, and that's how we kind of connect the 2 objects together on both platforms. Then the final step is to return a promise from the function, which we'll do with index add object with a JavaScript object containing the data and object ID. And that's all there is to it. Now every new customer document in Firestore will be duplicated in the Algolia index. But this function will only run on create, And it's possible that the data might change or might be removed in the future. So we'll set up a couple of additional Cloud Functions here to handle those requirements. We'll create a second Cloud Function called Update Index that runs whenever the Firestore document is updated. This function is almost identical to the last one with just some minor differences. Instead of having the document snapshot, we have a change object which has the Firestore document before the change and after the change. We're only concerned about the changes Afterwards because that's what we want to update in Algolia. And we'll do that by calling index save object to update a single object with this new data. And lastly, we'll create one additional function called delete from index that will run when a document is deleted from Firestore. And this one is the easiest of all. We simply call index delete object And pass it the Firestore document ID. And, again, that's why it's important that your Algolia object ID matches the Firestore document ID. Now we can deploy our 3 functions by running Firebase deploy only functions from the command line, and then you should see your functions in the Firebase console. Now at this point, we could create some dummy data manually in the Firebase console, but I want to show you a little trick to quickly see the database with some fake dummy data. We can install Faker JS in the Cloud Functions environment, which allows us to generate a massive amount of fake random data. From there, I've Created a new file called seed.js in the functions directory. And I'm going to import Firebase Admin and then call admin initialize app. Now this isn't actually a Cloud Function. It's just a node script that will run from the command line in just a second here. We'll go ahead and import faker, And then we'll make a reference to Firestore. Then we'll write a function called fake it, and every time this function is called it will add a new document to the database With all of its data being completely random and fake. And lastly, we'll create an array that has the length of the number of documents that we want to create, in this case, 20. And then we'll go ahead and call this function for each item in the array. Now because this script is in the function's directory, it will automatically pick up our Firebase admin credentials. And that means we can simply go to the command line, call node, and point it to the script. And the result should be 20 new documents in your database. Now because we've already deployed our functions, this will also result in 20 function invocations for the on create event. And that means if we refresh our Algolia index, We should see all of the data there as well. If for whatever reason you don't see your data in Algoly at this point, check out the Cloud Function Logs to see if you have any error messages there. This would also be a good time to validate your update and delete cloud functions. If you update some data in Firestore from the console, you should see it's reflected in Algolia after a couple of seconds. In addition, if you delete a document from Firestore, you should see that the corresponding object in Algolia is removed as well. It looks like the back end implementation for full text search is working perfectly, so we'll go ahead and move on to the front end integration. When it comes to the front end, Algolia provides a lot of support for different frameworks, including Angular, React, Vue, iOS, and Android. I'll show you the Angular implementation details in this video. But what if you're working with a framework that's not supported like Svelte? In that case, you can use the API client directly, or you can use the InstantSearch JS library. Let's go ahead and start by looking at the Svelte implementation details because it's not framework specific and could work with any framework if you wanted to go this route. 1st, we'll go ahead and install Algolia Search into the app. And you could also install Instant Search at this point as well. Instant Search will give you a bunch of prebuilt widgets, but in this case, I'm going to build a completely new UI from scratch. We'll go into our Svelte component And then we'll import on mount as well as Algolia search, and we really only need Algolia search lite in this case. Then we'll initialize properties for the search client as well as the index that we're referencing. Then we'll have the query that the user types into the forum and then the hits that get returned back from Algolia with the search results. From there, we initialize the search client, which is almost identical to how we did it in the Cloud Function, except that we use the search API key instead of the admin API key. It's extremely important to keep your admin API key out of your front end code because it would allow anybody to modify or completely destroy your index. From there we'll go ahead and make a reference to the customer's index, and then we can make a search by simply calling search on that object with the query parameters that we want to pass it. In this case we'll simply be passing the text that the user types into the form, but you could also pass additional options here to customize the behavior. Now we want to run a query every time the user types into a form. So we'll go ahead and handle that with a function called search. It will await the results of a query, And then that result object has a hits property, which contains all of the objects from the Algolia index for that search query. So every time the hits property is updated, will cause Svelte to react and update the state of the UI. Now moving down to the HTML, we'll go ahead and set up a text input, And then we'll bind the value of that text input to the query property on the component. Then we want to run the search on every key up event, So we'll go ahead and say on key up and then have it fire the search function. And now it's just a matter of looping over the hits to display a template for each individual result. We'll set up an image with the hit avatar, and then we'll display a heading with the username. But you might also want to highlight the text that the user has typed with the results that are returned. Now Algolia returns a highlighted result that contains the raw HTML of a property with the text highlighted. So one way to use that data is to bind it to the inner HTML of a paragraph element. By default, it will contain the text of that property, but with the highlighted part wrapped in an em element. You can actually customize the element used here from the Algolia dashboard. Now to make the highlight really stand out, we'll go ahead and add a global style here for the emphasis. And you can see when we type into the form in the demo that the search results are updated and the user's keywords are highlighted in the search result. Now this UI could obviously use a lot of work, but we now have a full stack full text search feature in our Svelte app. That was pretty easy, but if you're using Angular, View, or React, it's even easier. Algolia provides a bunch of prebuilt libraries and components for these frameworks. To get started with the Angular version, you'll want to follow the official setup instructions, which will have you install Package and add it to your NG module. And then I've generated a search component here in my Angular app, and you can see that it relies on 0 TypeScript whatsoever. And that's because Algolia has already done that stuff for you under the hood, so you're simply working in the template to display the actual UI elements that you want to show the end user. The first thing you'll do is wrap your elements in the AIS Instant Search component, and that will give you the context to search a specific index. From there, you'll want to display a form input, which you can do with AIS Searchbox. Then you can use the AIS Hits component to give you the context for the hits And the actual search result object itself. Then you can use Angular directives to customize the behavior of the template. For example, we'll say no match is found when the hit's length equals 0. Then we'll go ahead and use n g f to loop over the array of hits and display a template for each result. And we can easily highlight text by using the built in AIS highlight component. Just specify the attribute you wanna highlight and then pass in the hit as an input property. And now we have Fullstack Full Text Search in Angular. So at this point it's just a matter of making it look good with our design system. So I'm gonna go ahead and wrap things up there, but keep in mind there's a more you can do with Algolia like multi property filtering, geo queries, and things like that. If this video helped you, please like and subscribe and consider becoming a pro member at Fireship IO to get access to even more content. Thanks for watching, and I will talk to you soon.
Today,
today
we'll
we'll
turn
turn
your
your
Firestore
firestore
database
database
into
into
a
a
full
full
text
text
search
search
engine
engine
using
using
Algolia.
algolia
It's
it's
pointing
pointing
at
at
something.
something
What?
what
Look.
look
It's
it's
the
the
rest
rest
of
of
them.
them
Yes.
yes
It's
it's
one
one
of
of
my
my
all
all
time
time
favorite
favorite
APIs
apis
and
and
I
i
use
use
it
it
on
on
Fireship
fireship
IO
io
to
to
power
power
content
content
discovery
discovery
features
features
like
like
instant
instant
search.
search
What
what
you'll
you'll
build
build
today
today
is
is
a
a
pipeline
pipeline
with
with
Firebase
firebase
Cloud
cloud
Functions
functions
that
that
automatically
automatically
indexes
indexes
your
your
Firestore
firestore
data
data
in
in
Algolia,
algolia
and
and
then
then
we'll
we'll
look
look
at
at
multiple
multiple
implementations
implementations
consume
consume
that
that
data
data
from
from
a
a
customer
customer
facing
facing
app.
app
If
if
you're
you're
new
new
here,
here
like
like
and
and
subscribe
subscribe
and
and
check
check
out
out
the
the
full
full
source
source
code
code
at
at
fireship.
fireship
Io.
io
So
so
let's
let's
Start
start
by
by
answering
answering
the
the
question
question
of
of
when
when
would
would
you
you
want
want
to
to
use
use
a
a
service
service
like
like
Algolia?
algolia
And
and
keep
keep
in
in
mind
mind
this
this
video
video
is
is
not
not
sponsored,
sponsored
so
so
these
these
are
are
my
my
own
own
personal
personal
opinions.
opinions
Yeah.
yeah
Well,
well
you
you
know,
know
that's
that's
just
just
like,
like
uh,
uh
your
your
opinion,
opinion
man.
man
NoSQL
nosql
databases
databases
like
like
Fire
fire
Store
store
are
are
designed
designed
primarily
primarily
for
for
fast
fast
reads
reads
and
and
to
to
scale
scale
seamlessly.
seamlessly
But
but
they
they
can
can
be
be
relatively
relatively
limited
limited
on
on
the
the
types
types
of
of
queries
queries
you
you
can
can
make,
make
especially
especially
if
if
you
you
need
need
to
to
search
search
Cross
cross
the
the
entire
entire
text
text
of
of
a
a
document
document
or
or
if
if
you
you
need
need
to
to
filter
filter
by
by
multiple
multiple
properties
properties
simultaneously
simultaneously
and
and
keep
keep
track
track
of
of
counts
counts
of
of
different
different
properties.
properties
Algolia
algolia
solves
solves
all
all
of
of
these
these
problems
problems
for
for
you
you
and
and
more.
more
It's
it's
really
really
an
an
ideal
ideal
solution
solution
if
if
you
you
have
have
something
something
like
like
Amazon
amazon
where
where
you
you
have
have
millions
millions
of
of
products
products
and
and
you
you
need
need
to
to
sort
sort
these
these
products
products
and
and
filter
filter
and
and
search
search
them
them
in
in
many
many
complex
complex
ways.
ways
Now,
now
Algolia
algolia
starts
starts
off
off
with
with
a
a
free
free
tier,
tier
but
but
one
one
of
of
the
the
biggest
biggest
complaints
complaints
you
you
might
might
hear
hear
is
is
that
that
it's
it's
expensive.
expensive
And
and
I
i
do
do
think
think
that's
that's
a
a
very
very
valid
valid
complaint,
complaint
especially
especially
if
if
you
you
have
have
millions
millions
of
of
records.
records
It
it
jumps
jumps
from
from
free
free
to
to
$29
$29
per
per
month
month
up
up
to
to
$500
$500
per
per
month.
month
But
but
as
as
you'll
you'll
see
see
in
in
this
this
video,
video
this
this
is
is
kind
kind
of
of
a
a
situation
situation
where
where
you
you
get
get
what
what
you
you
pay
pay
for.
for
The
the
first
first
thing
thing
you'll
you'll
want
want
to
to
do
do
is
is
sign
sign
up
up
for
for
an
an
Algolia
algolia
account,
account
and
and
then
then
it
it
will
will
walk
walk
you
you
through
through
the
the
process
process
of
of
creating
creating
an
an
index.
index
I'll
i'll
go
go
ahead
ahead
and
and
create
create
a
a
new
new
index
index
called
called
customers,
customers
And
and
this
this
will
will
basically
basically
be
be
a
a
mirror
mirror
of
of
our
our
Firestore
firestore
data
data
minus
minus
any
any
personally
personally
identifiable
identifiable
information.
information
Things
things
like
like
email
email
addresses
addresses
and
and
phone
phone
numbers
numbers
are
are
not
not
something
something
that
that
you
you
want
want
to
to
keep
keep
in
in
the
the
index.
index
You
you
should
should
keep
keep
in
in
mind
mind
that
that
all
all
this
this
data
data
will
will
be
be
exposed
exposed
client
client
side,
side
so
so
you
you
want
want
to
to
leave
leave
out
out
any
any
information
information
that
that
would
would
be
be
considered
considered
sensitive.
sensitive
So
so
now
now
that
that
we
we
have
have
this
this
index
index
set
set
up,
up
have
have
a
a
whole
whole
bunch
bunch
of
of
different
different
ways
ways
to
to
customize
customize
it.
it
I'll
i'll
leave
leave
the
the
customization
customization
part
part
up
up
to
to
you,
you
but
but
just
just
know
know
that
that
there's
there's
a
a
whole
whole
bunch
bunch
of
of
cool
cool
things
things
you
you
can
can
do,
do
like
like
set
set
the
the
searchable
searchable
attributes,
attributes
Tweak
tweak
the
the
ranking
ranking
and
and
sorting
sorting
algorithms,
algorithms
set
set
up
up
typo
typo
tolerance,
tolerance
stop
stop
words,
words
and
and
word
word
proximity,
proximity
and
and
a
a
whole
whole
bunch
bunch
of
of
other
other
stuff.
stuff
And
and
you
you
could
could
even
even
generate
generate
your
your
own
own
UI
ui
demo
demo
based
based
on
on
your
your
own
own
underlying
underlying
data.
data
And
and
that
that
means
means
you
you
can
can
get
get
a
a
solid
solid
mock
mock
up
up
of
of
your
your
search
search
UI
ui
before
before
you
you
write
write
any
any
front
front
end
end
code.
code
Now
now
that
that
we
we
have
have
this
this
index
index
created,
created
we
we
need
need
a
a
way
way
to
to
dynamically
dynamically
add
add
data
data
to
to
it,
it
and
and
we
we
want
want
to
to
add
add
data
data
to
to
the
the
index
index
every
every
time
time
a
a
new
new
Firestore
firestore
document
document
is
is
created.
created
As
as
you
you
can
can
see
see
here,
here
I
i
have
have
Algolia
algolia
on
on
the
the
left
left
and
and
Firestore
firestore
on
on
the
the
right.
right
When
when
new
new
documents
documents
are
are
added
added
to
to
the
the
database,
database
they
they
will
will
automatically
automatically
be
be
updated
updated
in
in
the
the
index.
index
Indexing
indexing
operations
operations
will
will
always
always
happen
happen
on
on
the
the
back
back
end,
end
which
which
we'll
we'll
do
do
with
with
Node.
node
Js
js
and
and
Firebase
firebase
Cloud
cloud
Functions.
functions
We'll
we'll
start
start
from
from
an
an
empty
empty
working
working
directory
directory
and
and
then
then
run
run
Firebase
firebase
init
init
functions.
functions
I'll
i'll
be
be
using
using
JavaScript
javascript
for
for
this
this
demo
demo
but
but
feel
feel
free
free
to
to
use
use
TypeScript
typescript
if
if
you
you
prefer.
prefer
That
that
command
command
will
will
give
give
us
us
a
a
functions
functions
directory,
directory
and
and
you
you
can
can
ignore
ignore
all
all
of
of
the
the
other
other
directories
directories
that
that
you
you
see
see
on
on
my
my
screen
screen
for
for
now.
now
But
but
you
you
can
can
see
see
all
all
of
of
these
these
framework
framework
specific
specific
front
front
end
end
integrations
integrations
in
in
the
the
full
full
source
source
code.
code
From
from
there,
there
we'll
we'll
CD
cd
into
into
the
the
functions
functions
directory
directory
and
and
install
install
Algolia
algolia
search.
search
This
this
is
is
an
an
API
api
client
client
for
for
Node,
node
and
and
it's
it's
going
going
to
to
require
require
our
our
API
api
keys,
keys
which
which
we
we
can
can
retrieve
retrieve
from
from
the
the
Algolia
algolia
dashboard.
dashboard
You'll
you'll
need
need
your
your
application
application
ID
id
as
as
well
well
as
as
your
your
admin
admin
API
api
key.
key
And
and
then
then
we
we
have
have
this
this
big
big
long
long
command
command
to
to
save
save
the
the
API
api
keys
keys
in
in
the
the
functions
functions
environment.
environment
And
and
the
the
reason
reason
you
you
want
want
to
to
have
have
these
these
as
as
environment
environment
variables
variables
is
is
if
if
you
you
ever
ever
have
have
to
to
change
change
the
the
API
api
key,
key
then
then
you
you
can
can
reset
reset
it
it
in
in
the
the
environment
environment
without
without
having
having
to
to
redeploy
redeploy
your
your
Cloud
cloud
Functions.
functions
At
at
this
this
point,
point
we
we
can
can
open
open
up
up
the
the
index
index
JS
js
file,
file
and
and
we'll
we'll
start
start
writing
writing
some
some
code.
code
We'll
we'll
go
go
ahead
ahead
and
and
import
import
the
the
Algolia
algolia
search
search
client,
client
and
and
then
then
we'll
we'll
make
make
a
a
reference
reference
to
to
the
the
app
app
ID
id
and
and
the
the
admin
admin
key
key
that
that
we
we
have
have
in
in
the
the
functions
functions
environment.
environment
We'll
we'll
pass
pass
those
those
values
values
to
to
Algolia
algolia
search,
search
and
and
then
then
we'll
we'll
initialize
initialize
the
the
index
index
by
by
calling
calling
init
init
index
index
with
with
the
the
name
name
of
of
our
our
index,
index
which
which
in
in
this
this
case
case
is
is
customers.
customers
And
and
now
now
we
we
can
can
reference
reference
this
this
index
index
in
in
any
any
one
one
of
of
our
our
Cloud
cloud
Functions.
functions
So
so
we'll
we'll
go
go
ahead
ahead
and
and
start
start
by
by
creating
creating
a
a
new
new
Firestore
firestore
function
function
called
called
add
add
to
to
index,
index
which
which
makes
makes
a
a
reference
reference
to
to
a
a
Firestore
firestore
document.
document
Whenever
whenever
a
a
new
new
document
document
is
is
created
created
in
in
the
the
customer's
customer's
collection,
collection
it
it
will
will
run
run
the
the
code
code
inside
inside
of
of
this
this
callback.
callback
The
the
snapshot
snapshot
contains
contains
the
the
newly
newly
created
created
data
data
from
from
the
the
Firestore
firestore
document.
document
That's
that's
the
the
data
data
that
that
we
we
want
want
to
to
duplicate
duplicate
in
in
Algolia
algolia
minus
minus
any
any
personally
personally
identifiable
identifiable
information.
information
Now
now
we
we
can
can
identify
identify
a
a
record
record
in
in
Algolia
algolia
with
with
its
its
object
object
ID.
id
So
so
the
the
object
object
ID
id
will
will
be
be
equal
equal
to
to
the
the
Firestore
firestore
document
document
ID,
id
and
and
that's
that's
how
how
we
we
kind
kind
of
of
connect
connect
the
the
2
2
objects
objects
together
together
on
on
both
both
platforms.
platforms
Then
then
the
the
final
final
step
step
is
is
to
to
return
return
a
a
promise
promise
from
from
the
the
function,
function
which
which
we'll
we'll
do
do
with
with
index
index
add
add
object
object
with
with
a
a
JavaScript
javascript
object
object
containing
containing
the
the
data
data
and
and
object
object
ID.
id
And
and
that's
that's
all
all
there
there
is
is
to
to
it.
it
Now
now
every
every
new
new
customer
customer
document
document
in
in
Firestore
firestore
will
will
be
be
duplicated
duplicated
in
in
the
the
Algolia
algolia
index.
index
But
but
this
this
function
function
will
will
only
only
run
run
on
on
create,
create
And
and
it's
it's
possible
possible
that
that
the
the
data
data
might
might
change
change
or
or
might
might
be
be
removed
removed
in
in
the
the
future.
future
So
so
we'll
we'll
set
set
up
up
a
a
couple
couple
of
of
additional
additional
Cloud
cloud
Functions
functions
here
here
to
to
handle
handle
those
those
requirements.
requirements
We'll
we'll
create
create
a
a
second
second
Cloud
cloud
Function
function
called
called
Update
update
Index
index
that
that
runs
runs
whenever
whenever
the
the
Firestore
firestore
document
document
is
is
updated.
updated
This
this
function
function
is
is
almost
almost
identical
identical
to
to
the
the
last
last
one
one
with
with
just
just
some
some
minor
minor
differences.
differences
Instead
instead
of
of
having
having
the
the
document
document
snapshot,
snapshot
we
we
have
have
a
a
change
change
object
object
which
which
has
has
the
the
Firestore
firestore
document
document
before
before
the
the
change
change
and
and
after
after
the
the
change.
change
We're
we're
only
only
concerned
concerned
about
about
the
the
changes
changes
Afterwards
afterwards
because
because
that's
that's
what
what
we
we
want
want
to
to
update
update
in
in
Algolia.
algolia
And
and
we'll
we'll
do
do
that
that
by
by
calling
calling
index
index
save
save
object
object
to
to
update
update
a
a
single
single
object
object
with
with
this
this
new
new
data.
data
And
and
lastly,
lastly
we'll
we'll
create
create
one
one
additional
additional
function
function
called
called
delete
delete
from
from
index
index
that
that
will
will
run
run
when
when
a
a
document
document
is
is
deleted
deleted
from
from
Firestore.
firestore
And
and
this
this
one
one
is
is
the
the
easiest
easiest
of
of
all.
all
We
we
simply
simply
call
call
index
index
delete
delete
object
object
And
and
pass
pass
it
it
the
the
Firestore
firestore
document
document
ID.
id
And,
and
again,
again
that's
that's
why
why
it's
it's
important
important
that
that
your
your
Algolia
algolia
object
object
ID
id
matches
matches
the
the
Firestore
firestore
document
document
ID.
id
Now
now
we
we
can
can
deploy
deploy
our
our
3
3
functions
functions
by
by
running
running
Firebase
firebase
deploy
deploy
only
only
functions
functions
from
from
the
the
command
command
line,
line
and
and
then
then
you
you
should
should
see
see
your
your
functions
functions
in
in
the
the
Firebase
firebase
console.
console
Now
now
at
at
this
this
point,
point
we
we
could
could
create
create
some
some
dummy
dummy
data
data
manually
manually
in
in
the
the
Firebase
firebase
console,
console
but
but
I
i
want
want
to
to
show
show
you
you
a
a
little
little
trick
trick
to
to
quickly
quickly
see
see
the
the
database
database
with
with
some
some
fake
fake
dummy
dummy
data.
data
We
we
can
can
install
install
Faker
faker
JS
js
in
in
the
the
Cloud
cloud
Functions
functions
environment,
environment
which
which
allows
allows
us
us
to
to
generate
generate
a
a
massive
massive
amount
amount
of
of
fake
fake
random
random
data.
data
From
from
there,
there
I've
i've
Created
created
a
a
new
new
file
file
called
called
seed.js
seed.js
in
in
the
the
functions
functions
directory.
directory
And
and
I'm
i'm
going
going
to
to
import
import
Firebase
firebase
Admin
admin
and
and
then
then
call
call
admin
admin
initialize
initialize
app.
app
Now
now
this
this
isn't
isn't
actually
actually
a
a
Cloud
cloud
Function.
function
It's
it's
just
just
a
a
node
node
script
script
that
that
will
will
run
run
from
from
the
the
command
command
line
line
in
in
just
just
a
a
second
second
here.
here
We'll
we'll
go
go
ahead
ahead
and
and
import
import
faker,
faker
And
and
then
then
we'll
we'll
make
make
a
a
reference
reference
to
to
Firestore.
firestore
Then
then
we'll
we'll
write
write
a
a
function
function
called
called
fake
fake
it,
it
and
and
every
every
time
time
this
this
function
function
is
is
called
called
it
it
will
will
add
add
a
a
new
new
document
document
to
to
the
the
database
database
With
with
all
all
of
of
its
its
data
data
being
being
completely
completely
random
random
and
and
fake.
fake
And
and
lastly,
lastly
we'll
we'll
create
create
an
an
array
array
that
that
has
has
the
the
length
length
of
of
the
the
number
number
of
of
documents
documents
that
that
we
we
want
want
to
to
create,
create
in
in
this
this
case,
case
20.
20
And
and
then
then
we'll
we'll
go
go
ahead
ahead
and
and
call
call
this
this
function
function
for
for
each
each
item
item
in
in
the
the
array.
array
Now
now
because
because
this
this
script
script
is
is
in
in
the
the
function's
function's
directory,
directory
it
it
will
will
automatically
automatically
pick
pick
up
up
our
our
Firebase
firebase
admin
admin
credentials.
credentials
And
and
that
that
means
means
we
we
can
can
simply
simply
go
go
to
to
the
the
command
command
line,
line
call
call
node,
node
and
and
point
point
it
it
to
to
the
the
script.
script
And
and
the
the
result
result
should
should
be
be
20
20
new
new
documents
documents
in
in
your
your
database.
database
Now
now
because
because
we've
we've
already
already
deployed
deployed
our
our
functions,
functions
this
this
will
will
also
also
result
result
in
in
20
20
function
function
invocations
invocations
for
for
the
the
on
on
create
create
event.
event
And
and
that
that
means
means
if
if
we
we
refresh
refresh
our
our
Algolia
algolia
index,
index
We
we
should
should
see
see
all
all
of
of
the
the
data
data
there
there
as
as
well.
well
If
if
for
for
whatever
whatever
reason
reason
you
you
don't
don't
see
see
your
your
data
data
in
in
Algoly
algoly
at
at
this
this
point,
point
check
check
out
out
the
the
Cloud
cloud
Function
function
Logs
logs
to
to
see
see
if
if
you
you
have
have
any
any
error
error
messages
messages
there.
there
This
this
would
would
also
also
be
be
a
a
good
good
time
time
to
to
validate
validate
your
your
update
update
and
and
delete
delete
cloud
cloud
functions.
functions
If
if
you
you
update
update
some
some
data
data
in
in
Firestore
firestore
from
from
the
the
console,
console
you
you
should
should
see
see
it's
it's
reflected
reflected
in
in
Algolia
algolia
after
after
a
a
couple
couple
of
of
seconds.
seconds
In
in
addition,
addition
if
if
you
you
delete
delete
a
a
document
document
from
from
Firestore,
firestore
you
you
should
should
see
see
that
that
the
the
corresponding
corresponding
object
object
in
in
Algolia
algolia
is
is
removed
removed
as
as
well.
well
It
it
looks
looks
like
like
the
the
back
back
end
end
implementation
implementation
for
for
full
full
text
text
search
search
is
is
working
working
perfectly,
perfectly
so
so
we'll
we'll
go
go
ahead
ahead
and
and
move
move
on
on
to
to
the
the
front
front
end
end
integration.
integration
When
when
it
it
comes
comes
to
to
the
the
front
front
end,
end
Algolia
algolia
provides
provides
a
a
lot
lot
of
of
support
support
for
for
different
different
frameworks,
frameworks
including
including
Angular,
angular
React,
react
Vue,
vue
iOS,
ios
and
and
Android.
android
I'll
i'll
show
show
you
you
the
the
Angular
angular
implementation
implementation
details
details
in
in
this
this
video.
video
But
but
what
what
if
if
you're
you're
working
working
with
with
a
a
framework
framework
that's
that's
not
not
supported
supported
like
like
Svelte?
svelte
In
in
that
that
case,
case
you
you
can
can
use
use
the
the
API
api
client
client
directly,
directly
or
or
you
you
can
can
use
use
the
the
InstantSearch
instantsearch
JS
js
library.
library
Let's
let's
go
go
ahead
ahead
and
and
start
start
by
by
looking
looking
at
at
the
the
Svelte
svelte
implementation
implementation
details
details
because
because
it's
it's
not
not
framework
framework
specific
specific
and
and
could
could
work
work
with
with
any
any
framework
framework
if
if
you
you
wanted
wanted
to
to
go
go
this
this
route.
route
1st,
1st
we'll
we'll
go
go
ahead
ahead
and
and
install
install
Algolia
algolia
Search
search
into
into
the
the
app.
app
And
and
you
you
could
could
also
also
install
install
Instant
instant
Search
search
at
at
this
this
point
point
as
as
well.
well
Instant
instant
Search
search
will
will
give
give
you
you
a
a
bunch
bunch
of
of
prebuilt
prebuilt
widgets,
widgets
but
but
in
in
this
this
case,
case
I'm
i'm
going
going
to
to
build
build
a
a
completely
completely
new
new
UI
ui
from
from
scratch.
scratch
We'll
we'll
go
go
into
into
our
our
Svelte
svelte
component
component
And
and
then
then
we'll
we'll
import
import
on
on
mount
mount
as
as
well
well
as
as
Algolia
algolia
search,
search
and
and
we
we
really
really
only
only
need
need
Algolia
algolia
search
search
lite
lite
in
in
this
this
case.
case
Then
then
we'll
we'll
initialize
initialize
properties
properties
for
for
the
the
search
search
client
client
as
as
well
well
as
as
the
the
index
index
that
that
we're
we're
referencing.
referencing
Then
then
we'll
we'll
have
have
the
the
query
query
that
that
the
the
user
user
types
types
into
into
the
the
forum
forum
and
and
then
then
the
the
hits
hits
that
that
get
get
returned
returned
back
back
from
from
Algolia
algolia
with
with
the
the
search
search
results.
results
From
from
there,
there
we
we
initialize
initialize
the
the
search
search
client,
client
which
which
is
is
almost
almost
identical
identical
to
to
how
how
we
we
did
did
it
it
in
in
the
the
Cloud
cloud
Function,
function
except
except
that
that
we
we
use
use
the
the
search
search
API
api
key
key
instead
instead
of
of
the
the
admin
admin
API
api
key.
key
It's
it's
extremely
extremely
important
important
to
to
keep
keep
your
your
admin
admin
API
api
key
key
out
out
of
of
your
your
front
front
end
end
code
code
because
because
it
it
would
would
allow
allow
anybody
anybody
to
to
modify
modify
or
or
completely
completely
destroy
destroy
your
your
index.
index
From
from
there
there
we'll
we'll
go
go
ahead
ahead
and
and
make
make
a
a
reference
reference
to
to
the
the
customer's
customer's
index,
index
and
and
then
then
we
we
can
can
make
make
a
a
search
search
by
by
simply
simply
calling
calling
search
search
on
on
that
that
object
object
with
with
the
the
query
query
parameters
parameters
that
that
we
we
want
want
to
to
pass
pass
it.
it
In
in
this
this
case
case
we'll
we'll
simply
simply
be
be
passing
passing
the
the
text
text
that
that
the
the
user
user
types
types
into
into
the
the
form,
form
but
but
you
you
could
could
also
also
pass
pass
additional
additional
options
options
here
here
to
to
customize
customize
the
the
behavior.
behavior
Now
now
we
we
want
want
to
to
run
run
a
a
query
query
every
every
time
time
the
the
user
user
types
types
into
into
a
a
form.
form
So
so
we'll
we'll
go
go
ahead
ahead
and
and
handle
handle
that
that
with
with
a
a
function
function
called
called
search.
search
It
it
will
will
await
await
the
the
results
results
of
of
a
a
query,
query
And
and
then
then
that
that
result
result
object
object
has
has
a
a
hits
hits
property,
property
which
which
contains
contains
all
all
of
of
the
the
objects
objects
from
from
the
the
Algolia
algolia
index
index
for
for
that
that
search
search
query.
query
So
so
every
every
time
time
the
the
hits
hits
property
property
is
is
updated,
updated
will
will
cause
cause
Svelte
svelte
to
to
react
react
and
and
update
update
the
the
state
state
of
of
the
the
UI.
ui
Now
now
moving
moving
down
down
to
to
the
the
HTML,
html
we'll
we'll
go
go
ahead
ahead
and
and
set
set
up
up
a
a
text
text
input,
input
And
and
then
then
we'll
we'll
bind
bind
the
the
value
value
of
of
that
that
text
text
input
input
to
to
the
the
query
query
property
property
on
on
the
the
component.
component
Then
then
we
we
want
want
to
to
run
run
the
the
search
search
on
on
every
every
key
key
up
up
event,
event
So
so
we'll
we'll
go
go
ahead
ahead
and
and
say
say
on
on
key
key
up
up
and
and
then
then
have
have
it
it
fire
fire
the
the
search
search
function.
function
And
and
now
now
it's
it's
just
just
a
a
matter
matter
of
of
looping
looping
over
over
the
the
hits
hits
to
to
display
display
a
a
template
template
for
for
each
each
individual
individual
result.
result
We'll
we'll
set
set
up
up
an
an
image
image
with
with
the
the
hit
hit
avatar,
avatar
and
and
then
then
we'll
we'll
display
display
a
a
heading
heading
with
with
the
the
username.
username
But
but
you
you
might
might
also
also
want
want
to
to
highlight
highlight
the
the
text
text
that
that
the
the
user
user
has
has
typed
typed
with
with
the
the
results
results
that
that
are
are
returned.
returned
Now
now
Algolia
algolia
returns
returns
a
a
highlighted
highlighted
result
result
that
that
contains
contains
the
the
raw
raw
HTML
html
of
of
a
a
property
property
with
with
the
the
text
text
highlighted.
highlighted
So
so
one
one
way
way
to
to
use
use
that
that
data
data
is
is
to
to
bind
bind
it
it
to
to
the
the
inner
inner
HTML
html
of
of
a
a
paragraph
paragraph
element.
element
By
by
default,
default
it
it
will
will
contain
contain
the
the
text
text
of
of
that
that
property,
property
but
but
with
with
the
the
highlighted
highlighted
part
part
wrapped
wrapped
in
in
an
an
em
em
element.
element
You
you
can
can
actually
actually
customize
customize
the
the
element
element
used
used
here
here
from
from
the
the
Algolia
algolia
dashboard.
dashboard
Now
now
to
to
make
make
the
the
highlight
highlight
really
really
stand
stand
out,
out
we'll
we'll
go
go
ahead
ahead
and
and
add
add
a
a
global
global
style
style
here
here
for
for
the
the
emphasis.
emphasis
And
and
you
you
can
can
see
see
when
when
we
we
type
type
into
into
the
the
form
form
in
in
the
the
demo
demo
that
that
the
the
search
search
results
results
are
are
updated
updated
and
and
the
the
user's
user's
keywords
keywords
are
are
highlighted
highlighted
in
in
the
the
search
search
result.
result
Now
now
this
this
UI
ui
could
could
obviously
obviously
use
use
a
a
lot
lot
of
of
work,
work
but
but
we
we
now
now
have
have
a
a
full
full
stack
stack
full
full
text
text
search
search
feature
feature
in
in
our
our
Svelte
svelte
app.
app
That
that
was
was
pretty
pretty
easy,
easy
but
but
if
if
you're
you're
using
using
Angular,
angular
View,
view
or
or
React,
react
it's
it's
even
even
easier.
easier
Algolia
algolia
provides
provides
a
a
bunch
bunch
of
of
prebuilt
prebuilt
libraries
libraries
and
and
components
components
for
for
these
these
frameworks.
frameworks
To
to
get
get
started
started
with
with
the
the
Angular
angular
version,
version
you'll
you'll
want
want
to
to
follow
follow
the
the
official
official
setup
setup
instructions,
instructions
which
which
will
will
have
have
you
you
install
install
Package
package
and
and
add
add
it
it
to
to
your
your
NG
ng
module.
module
And
and
then
then
I've
i've
generated
generated
a
a
search
search
component
component
here
here
in
in
my
my
Angular
angular
app,
app
and
and
you
you
can
can
see
see
that
that
it
it
relies
relies
on
on
0
0
TypeScript
typescript
whatsoever.
whatsoever
And
and
that's
that's
because
because
Algolia
algolia
has
has
already
already
done
done
that
that
stuff
stuff
for
for
you
you
under
under
the
the
hood,
hood
so
so
you're
you're
simply
simply
working
working
in
in
the
the
template
template
to
to
display
display
the
the
actual
actual
UI
ui
elements
elements
that
that
you
you
want
want
to
to
show
show
the
the
end
end
user.
user
The
the
first
first
thing
thing
you'll
you'll
do
do
is
is
wrap
wrap
your
your
elements
elements
in
in
the
the
AIS
ais
Instant
instant
Search
search
component,
component
and
and
that
that
will
will
give
give
you
you
the
the
context
context
to
to
search
search
a
a
specific
specific
index.
index
From
from
there,
there
you'll
you'll
want
want
to
to
display
display
a
a
form
form
input,
input
which
which
you
you
can
can
do
do
with
with
AIS
ais
Searchbox.
searchbox
Then
then
you
you
can
can
use
use
the
the
AIS
ais
Hits
hits
component
component
to
to
give
give
you
you
the
the
context
context
for
for
the
the
hits
hits
And
and
the
the
actual
actual
search
search
result
result
object
object
itself.
itself
Then
then
you
you
can
can
use
use
Angular
angular
directives
directives
to
to
customize
customize
the
the
behavior
behavior
of
of
the
the
template.
template
For
for
example,
example
we'll
we'll
say
say
no
no
match
match
is
is
found
found
when
when
the
the
hit's
hit's
length
length
equals
equals
0.
0
Then
then
we'll
we'll
go
go
ahead
ahead
and
and
use
use
n
n
g
g
f
f
to
to
loop
loop
over
over
the
the
array
array
of
of
hits
hits
and
and
display
display
a
a
template
template
for
for
each
each
result.
result
And
and
we
we
can
can
easily
easily
highlight
highlight
text
text
by
by
using
using
the
the
built
built
in
in
AIS
ais
highlight
highlight
component.
component
Just
just
specify
specify
the
the
attribute
attribute
you
you
wanna
wanna
highlight
highlight
and
and
then
then
pass
pass
in
in
the
the
hit
hit
as
as
an
an
input
input
property.
property
And
and
now
now
we
we
have
have
Fullstack
fullstack
Full
full
Text
text
Search
search
in
in
Angular.
angular
So
so
at
at
this
this
point
point
it's
it's
just
just
a
a
matter
matter
of
of
making
making
it
it
look
look
good
good
with
with
our
our
design
design
system.
system
So
so
I'm
i'm
gonna
gonna
go
go
ahead
ahead
and
and
wrap
wrap
things
things
up
up
there,
there
but
but
keep
keep
in
in
mind
mind
there's
there's
a
a
more
more
you
you
can
can
do
do
with
with
Algolia
algolia
like
like
multi
multi
property
property
filtering,
filtering
geo
geo
queries,
queries
and
and
things
things
like
like
that.
that
If
if
this
this
video
video
helped
helped
you,
you
please
please
like
like
and
and
subscribe
subscribe
and
and
consider
consider
becoming
becoming
a
a
pro
pro
member
member
at
at
Fireship
fireship
IO
io
to
to
get
get
access
access
to
to
even
even
more
more
content.
content
Thanks
thanks
for
for
watching,
watching
and
and
I
i
will
will
talk
talk
to
to
you
you
soon.
soon
success
The Algolia search engine is beneficial for fast reads and scalability, with a pipeline and custom search attribute created. The process includes setting up searchable and typo tolerance, creating a UI demo, and using the command line to create a new search function. The front end integration is used for full text search and the API key is used to create a new search function, with the use of the full stack full text search feature in the app. A multi-piece filter is recommended for full text search.
Fullstack Autocomplete Search with Algolia
Today, we'll turn your Firestore database into a full text search engine using Algolia. It's pointing at something. What? Look. It's the rest of them. Yes. It's one of my all time favorite APIs and I use it on Fireship IO to power content discovery features like instant search. What you'll build today is a pipeline with Firebase Cloud Functions that automatically indexes your Firestore data in Algolia, and then we'll look at multiple implementations consume that data from a customer facing app. If you're new here, like and subscribe and check out the full source code at fireship. Io. So let's Start by answering the question of when would you want to use a service like Algolia? And keep in mind this video is not sponsored, so these are my own personal opinions. Yeah. Well, you know, that's just like, uh, your opinion, man. NoSQL databases like Fire Store are designed primarily for fast reads and to scale seamlessly. But they can be relatively limited on the types of queries you can make, especially if you need to search Cross the entire text of a document or if you need to filter by multiple properties simultaneously and keep track of counts of different properties. Algolia solves all of these problems for you and more. It's really an ideal solution if you have something like Amazon where you have millions of products and you need to sort these products and filter and search them in many complex ways. Now, Algolia starts off with a free tier, but one of the biggest complaints you might hear is that it's expensive. And I do think that's a very valid complaint, especially if you have millions of records. It jumps from free to $29 per month up to $500 per month. But as you'll see in this video, this is kind of a situation where you get what you pay for. The first thing you'll want to do is sign up for an Algolia account, and then it will walk you through the process of creating an index. I'll go ahead and create a new index called customers, And this will basically be a mirror of our Firestore data minus any personally identifiable information. Things like email addresses and phone numbers are not something that you want to keep in the index. You should keep in mind that all this data will be exposed client side, so you want to leave out any information that would be considered sensitive. So now that we have this index set up, have a whole bunch of different ways to customize it. I'll leave the customization part up to you, but just know that there's a whole bunch of cool things you can do, like set the searchable attributes, Tweak the ranking and sorting algorithms, set up typo tolerance, stop words, and word proximity, and a whole bunch of other stuff. And you could even generate your own UI demo based on your own underlying data. And that means you can get a solid mock up of your search UI before you write any front end code. Now that we have this index created, we need a way to dynamically add data to it, and we want to add data to the index every time a new Firestore document is created. As you can see here, I have Algolia on the left and Firestore on the right. When new documents are added to the database, they will automatically be updated in the index. Indexing operations will always happen on the back end, which we'll do with Node. Js and Firebase Cloud Functions. We'll start from an empty working directory and then run Firebase init functions. I'll be using JavaScript for this demo but feel free to use TypeScript if you prefer. That command will give us a functions directory, and you can ignore all of the other directories that you see on my screen for now. But you can see all of these framework specific front end integrations in the full source code. From there, we'll CD into the functions directory and install Algolia search. This is an API client for Node, and it's going to require our API keys, which we can retrieve from the Algolia dashboard. You'll need your application ID as well as your admin API key. And then we have this big long command to save the API keys in the functions environment. And the reason you want to have these as environment variables is if you ever have to change the API key, then you can reset it in the environment without having to redeploy your Cloud Functions. At this point, we can open up the index JS file, and we'll start writing some code. We'll go ahead and import the Algolia search client, and then we'll make a reference to the app ID and the admin key that we have in the functions environment. We'll pass those values to Algolia search, and then we'll initialize the index by calling init index with the name of our index, which in this case is customers. And now we can reference this index in any one of our Cloud Functions. So we'll go ahead and start by creating a new Firestore function called add to index, which makes a reference to a Firestore document. Whenever a new document is created in the customer's collection, it will run the code inside of this callback. The snapshot contains the newly created data from the Firestore document. That's the data that we want to duplicate in Algolia minus any personally identifiable information. Now we can identify a record in Algolia with its object ID. So the object ID will be equal to the Firestore document ID, and that's how we kind of connect the 2 objects together on both platforms. Then the final step is to return a promise from the function, which we'll do with index add object with a JavaScript object containing the data and object ID. And that's all there is to it. Now every new customer document in Firestore will be duplicated in the Algolia index. But this function will only run on create, And it's possible that the data might change or might be removed in the future. So we'll set up a couple of additional Cloud Functions here to handle those requirements. We'll create a second Cloud Function called Update Index that runs whenever the Firestore document is updated. This function is almost identical to the last one with just some minor differences. Instead of having the document snapshot, we have a change object which has the Firestore document before the change and after the change. We're only concerned about the changes Afterwards because that's what we want to update in Algolia. And we'll do that by calling index save object to update a single object with this new data. And lastly, we'll create one additional function called delete from index that will run when a document is deleted from Firestore. And this one is the easiest of all. We simply call index delete object And pass it the Firestore document ID. And, again, that's why it's important that your Algolia object ID matches the Firestore document ID. Now we can deploy our 3 functions by running Firebase deploy only functions from the command line, and then you should see your functions in the Firebase console. Now at this point, we could create some dummy data manually in the Firebase console, but I want to show you a little trick to quickly see the database with some fake dummy data. We can install Faker JS in the Cloud Functions environment, which allows us to generate a massive amount of fake random data. From there, I've Created a new file called seed.js in the functions directory. And I'm going to import Firebase Admin and then call admin initialize app. Now this isn't actually a Cloud Function. It's just a node script that will run from the command line in just a second here. We'll go ahead and import faker, And then we'll make a reference to Firestore. Then we'll write a function called fake it, and every time this function is called it will add a new document to the database With all of its data being completely random and fake. And lastly, we'll create an array that has the length of the number of documents that we want to create, in this case, 20. And then we'll go ahead and call this function for each item in the array. Now because this script is in the function's directory, it will automatically pick up our Firebase admin credentials. And that means we can simply go to the command line, call node, and point it to the script. And the result should be 20 new documents in your database. Now because we've already deployed our functions, this will also result in 20 function invocations for the on create event. And that means if we refresh our Algolia index, We should see all of the data there as well. If for whatever reason you don't see your data in Algoly at this point, check out the Cloud Function Logs to see if you have any error messages there. This would also be a good time to validate your update and delete cloud functions. If you update some data in Firestore from the console, you should see it's reflected in Algolia after a couple of seconds. In addition, if you delete a document from Firestore, you should see that the corresponding object in Algolia is removed as well. It looks like the back end implementation for full text search is working perfectly, so we'll go ahead and move on to the front end integration. When it comes to the front end, Algolia provides a lot of support for different frameworks, including Angular, React, Vue, iOS, and Android. I'll show you the Angular implementation details in this video. But what if you're working with a framework that's not supported like Svelte? In that case, you can use the API client directly, or you can use the InstantSearch JS library. Let's go ahead and start by looking at the Svelte implementation details because it's not framework specific and could work with any framework if you wanted to go this route. 1st, we'll go ahead and install Algolia Search into the app. And you could also install Instant Search at this point as well. Instant Search will give you a bunch of prebuilt widgets, but in this case, I'm going to build a completely new UI from scratch. We'll go into our Svelte component And then we'll import on mount as well as Algolia search, and we really only need Algolia search lite in this case. Then we'll initialize properties for the search client as well as the index that we're referencing. Then we'll have the query that the user types into the forum and then the hits that get returned back from Algolia with the search results. From there, we initialize the search client, which is almost identical to how we did it in the Cloud Function, except that we use the search API key instead of the admin API key. It's extremely important to keep your admin API key out of your front end code because it would allow anybody to modify or completely destroy your index. From there we'll go ahead and make a reference to the customer's index, and then we can make a search by simply calling search on that object with the query parameters that we want to pass it. In this case we'll simply be passing the text that the user types into the form, but you could also pass additional options here to customize the behavior. Now we want to run a query every time the user types into a form. So we'll go ahead and handle that with a function called search. It will await the results of a query, And then that result object has a hits property, which contains all of the objects from the Algolia index for that search query. So every time the hits property is updated, will cause Svelte to react and update the state of the UI. Now moving down to the HTML, we'll go ahead and set up a text input, And then we'll bind the value of that text input to the query property on the component. Then we want to run the search on every key up event, So we'll go ahead and say on key up and then have it fire the search function. And now it's just a matter of looping over the hits to display a template for each individual result. We'll set up an image with the hit avatar, and then we'll display a heading with the username. But you might also want to highlight the text that the user has typed with the results that are returned. Now Algolia returns a highlighted result that contains the raw HTML of a property with the text highlighted. So one way to use that data is to bind it to the inner HTML of a paragraph element. By default, it will contain the text of that property, but with the highlighted part wrapped in an em element. You can actually customize the element used here from the Algolia dashboard. Now to make the highlight really stand out, we'll go ahead and add a global style here for the emphasis. And you can see when we type into the form in the demo that the search results are updated and the user's keywords are highlighted in the search result. Now this UI could obviously use a lot of work, but we now have a full stack full text search feature in our Svelte app. That was pretty easy, but if you're using Angular, View, or React, it's even easier. Algolia provides a bunch of prebuilt libraries and components for these frameworks. To get started with the Angular version, you'll want to follow the official setup instructions, which will have you install Package and add it to your NG module. And then I've generated a search component here in my Angular app, and you can see that it relies on 0 TypeScript whatsoever. And that's because Algolia has already done that stuff for you under the hood, so you're simply working in the template to display the actual UI elements that you want to show the end user. The first thing you'll do is wrap your elements in the AIS Instant Search component, and that will give you the context to search a specific index. From there, you'll want to display a form input, which you can do with AIS Searchbox. Then you can use the AIS Hits component to give you the context for the hits And the actual search result object itself. Then you can use Angular directives to customize the behavior of the template. For example, we'll say no match is found when the hit's length equals 0. Then we'll go ahead and use n g f to loop over the array of hits and display a template for each result. And we can easily highlight text by using the built in AIS highlight component. Just specify the attribute you wanna highlight and then pass in the hit as an input property. And now we have Fullstack Full Text Search in Angular. So at this point it's just a matter of making it look good with our design system. So I'm gonna go ahead and wrap things up there, but keep in mind there's a more you can do with Algolia like multi property filtering, geo queries, and things like that. If this video helped you, please like and subscribe and consider becoming a pro member at Fireship IO to get access to even more content. Thanks for watching, and I will talk to you soon.
The Algolia search engine is beneficial for fast reads and scalability, with a pipeline and custom search attribute created. The process includes setting up searchable and typo tolerance, creating a UI demo, and using the command line to create a new search function. The front end integration is used for full text search and the API key is used to create a new search function, with the use of the full stack full text search feature in the app. A multi-piece filter is recommended for full text search.