Implementing ElasticSearch in Laravel VueJs app/site

I will assume that the reader of this tutorial is very conversant with laravel framework and VueJs. You can head over to vuejs website and get yourself acquainted with some of the docs there and check out the Wecode community, I heard that they run a very good mentorship programe there.

I am using Laravel 5.4, windows 8.1, MYSQL database, bootstrap3 and Elasticquent package and of course VueJs to spice up the front end, those are the important things for now.

I did most of the installation and setup in the previous tutorial so I will be on a faster gear in this tutorial. Refer to the previous tutorial on how to setup Elastic Search for your System (Sorry, the setup was for windows only).

By now you should have your laravel project up and the necessary packages and installation added to it (Elasticquent package). Refer to the previous tutorial for that.

Set up the database table that we need using laravel migrate command: php artisan migrate:make create_jobs_table

Locate the migration file (you know where to find that), and inside the up function, add the lines of codes meant for the database table columns. Run the migrate command: php artisan migrate

Create a model if you have not, this command should do that: php artisan make:model Jobs. Inside the Worker.php file, you should find something like this, if you don’t edit yours to suit the context of this tutorial.

I already have some data in my database but you can populate yours with dummy data.

To set up Elasticquent, edit our model (Jobs.php) and add the following:

Like I wrote in the other tutorial, Each mapping has a type and an analyzer. It can include strings, numbers, dates etc. Analyzer determines how elastic search stores your data for searching. I am using standard, it will remove HTML and grammar then index each word seperately. We have configured how we want our search to operate.

We don’t need to create a new index, we will just make sure of the one(main_index) from the other tutorial but feel free to create as many as you can remember.

We use Laravel REPL to generate our elastic search data. From your CLI, type:

Jobs::putMapping($ignoreConflicts = true);
Jobs::addAllToIndex();

putMapping() takes the mappin properties we set in the model so that Elastic search knows how to index all of our data.

addAllToIndex() takes all the data from database table and putts it into elastic search.

To view and verify that we are on the right path, type this in your browser or postman app: localhost:9200/main_index/jobs/_mapping?pretty

We now have to create the routes for all these things: edit your web.php file and add:

the first line should return our view while the second returns our search response in JSON.

Make a controller: php artisan make:controller “JobAuth\JobOps”

and the functions:

Now, we create our vue component (search-job.vue) and register it in our app.js:

At this time, you might have to install axios and import or download the minified js file and add inside the head tag of your blade file.

Open your search-vue component. First, we add the Search form and then the panel to display our search data.

search form
Panel to display search results

The other part of it pretty much explains itself:

It seems our work is almost done. Lets check the results. Don’t forget to run npm run watch

In the next tutorial, we shall leave the comfort of 127.0.0.1. You can also spice up the frontend with other things.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.