Making a simple web page to query and display Elasticsearch results couldn’t be easier
“Needle in a haystack’s easy - just bring a magnet.”
Hello everyone, this is my first serious post with actual source code being provided and I'm extremely excited about it. I wanted to showcase some quick-and-dirty work I did with Elasticsearch, Vue.js and Bootstrap 4 to create a proof-of-concept site that allowed Google-like searching on data stored in Elasticsearch.
For those of you that are aware of these tools and frameworks, feel free to skip this section. Anyway, Elasticsearch is a search and analytics engine built on-top of Apache Lucene in order to provide full-text searching (the hardcore Elastic/Lucene folks are probably yelling at the top of their voice, "Don't forget BKD trees!" Ugh, OK, yes, it's NOT JUST text, but it started with text). It scales extremely well and is extremely fast, and it achieves this amazing scalability and performance through distributing all the documents and data (via sharding, to be exact). Its capabilities are too long to list, but it's a truly impressive offering, and open-source to boot.
Vue.js is a front-end JavaScript framework that's getting quite popular for building single-page applications. It reminds me of Angular, and my personal experience with it has been great. The Getting Started is easy to follow. Also, it's supposed to be progressive, so old-school HTML should still work even if JavaScript is turned off.
Lastly, I used Bootstrap to help style everything. Personally, I treat Bootstrap as a stylesheet guide, almost. Although I tout my full-stack developer title like it's actually worth something, I'm embarrassingly bad at CSS. Bootstrap abstracts some of the CSS into well-defined layouts and utilities, and as long as you conform to Bootstrap, you'll get a reasonably good-looking UI.
I know I mentioned that I'd go into using Elasticsarch, Vue.js and Bootstrap together for a quick-and-dirty site, but the introduction to these three tools took a lot more than I anticipated, so I may have to pull a Marvel Studios and end with a cliffhanger! Look forward to a part 2 (and 3 and 4 and ... 17 (it is Marvel Studios after all))