Okay, let's take a look at using Algolia on the front end. This isn't directly related to Scout, but I figured there might be some people who want to know how to use the index we created. So we'll be making use of InstanceSearch.js. There are a few different search libraries which have different use cases for search, but we'll stick to this one, which is a vanilla JavaScript implementation. So they actually have a CLI here, which scaffolds out a project. So let's copy this, and let's change the API key and some of the other variables here. So let's call it laracasts.ais, the template is the same. The app ID is in our Algolia back end.

So let's call it laracasts.ais, the template is the same. The app ID is in our Algolia back end. Let's grab that, API keys, that's the app ID. The API key is this one here. So the search only API key, let's copy that, paste that in. And the index name is the one we created in the last video, it's just called users. And attributes to display, we do have a name attribute, so that's fine. So let's grab this, and let me just go up one, and run that command, and that should scaffold out an application for us. So let's see if this works.

scaffold out an application for us. So let's see if this works. Okay, so that's done, let's go into it. And let's open it up in VS Code. And if you look at the package.json file, we can see that there's this start command, so we can either do yarn start, or I'll just use npm here, npm run start. And as you see, it's making use of parcel for the bundler. And there we go, this is our index that we created. And we can search it. So I believe my name is in here, there it is.

And we can search it. So I believe my name is in here, there it is. And it's making use of this instance search library. So let's quickly take a look at the code, since we didn't do anything. Very straightforward, we have some index, I mean, some CSS here. And we have different containers corresponding to these different components. So there's the search box, hits is the results, and one for pagination. And the JavaScript is in source/app.js. So we already have this populated out, because the CLI did that for us. And where's our index file?

So we already have this populated out, because the CLI did that for us. And where's our index.php file? It's importing Algolia search and instanceSearch, and then app.js. So we can new up an instanceSearch, give it the index name, and the search client that we instantiated here. And we can just add different widgets to this instanceSearch. So we have a searchBox, and we give it a container. So that's the searchBox. And this is what gets displayed here. So if we want to add one more thing in there, let's say email, let me just duplicate this,

And this is what gets displayed here. So if we want to add one more thing in there, let's say email, let me just duplicate this, add a div, and I do want it to highlight, the attribute is email, and let's close the div out. And that should work. I think it auto-reloads, and it does, cool. And there's the pagination right there. So let's add a few more fields here. Let's add a stats field. So back to the docs, let's look for stats here.

Let's add a stats field. So back to the docs, let's look for stats here. There it is, it's a widget. So you can see what it does here, has the total number of hits, and the time it took. So all we have to do is make a new container and add this code. So let's put it right underneath the search box, and say stats, okay, and let's add this to our app.js, right underneath this. And that should do it. Take out the semicolon, and I think it should auto-reload, and right there. So if we search for something, you'll see it update.