Display Elasticsearch results with ease
Hello again everyone! Welcome to part 2 of using Elasticsearch, Vue.js and Bootstrap 4. Today I bring you some real source code to create a web page quickly to display some Elasticsearch query results.
I'm bringing together some of my favorite tools to help view data that has been indexed by Elasticsearch. All of these tools and packages are open-source to boot! (P.S. if you missed my overview of these tools, be sure to check out part 1!) Some of you may be wondering why this tool is even necessary because Kibana already has a "Developer Console" that allows you to write queries and view data. In my experience, this may work well for quick exploration or if your audience is highly technical, or if your indexed JSON is simple. However, when using large or complex JSON, it's nice to be able to use visual elements (such as Bootstrap's cards) to quickly group and identify related data. This is also a great tool if you need to quickly showcase search capabilities to non-technical folks.
Anyway, you should mostly be able to use the index.html as a template for displaying the data you want. I tried to keep it generic to movies, but feel free to tailor it to your needs (e.g. if you need to display recipes, then changing "actors" to "ingredients" would make a lot of sense). The load.kibana file is meant to be used in Kibana's developer console.
Make sure to update some settings like the Elasticsearch endpoint URL.
As a final note, I hosted the index.html page using Python's basic HTTP server (sudo python -m SimpleHTTPServer 80) because all of my dependencies were pulled from public CDNs. However, in the real world (production environment), you will probably want to make a few changes and use some type of asset compilation pipeline. Lastly, it's pretty dangerous IMO to publicly expose Elasticsearch without any security, so you'll probably want to hide it behind a web service endpoint.