In the last article, Understanding the Elastic Stack, I broke down the various Elastic components (check it out for a quick refresher). Now we will use the REST API provided by Elasticsearch as the back-end for a simple project. But before, let us discuss why we want to use Elasticsearch REST API as back-end.

The functionality of the back-end:

  • Data storage: Elasticsearch is great for data storage. You can think of each index as a table in DB and store data in the index.
  • Retrieving stored data: We can easily retrieve data from ES using the REST API provided by ES.
  • Updating data: To update data, we will use the ES REST API.
  • Deleting data: Deleting works a little differently with elasticsearch, as I mentioned in my last article. But for a small project, it should be fine.

Why ES?

If you are a front-end developer and don’t want to worry about the back-end, you can use ES. The same applies if you are learning front-end and want to use API in your project. Elasticsearch REST API makes interacting with your Elasticsearch data simple. You can check the documentation here.

We will create a simple TODO app, and we will use ES API to store, fetch, update, and delete our TODO tasks. You can check the sample project here.

For this project, you will either need to install ES locally or use ES cloud free trial for easy setup for this check this documentation. Also, you have to enable CORS for elasticsearch.

Elasticsearch APIs we are going to Use in this project

  1. Add todo (documentation) POST todo/_doc/ { "text" : "My sample todo task" }If you don’t specify a document ID when using POST, the op_type is automatically set to create, and the index operation generates a unique ID for the document.
  2. Create Index (documentation) PUT /todo You can use the create index API to add a new index to an Elasticsearch cluster. When creating an index, you can specify the following:
    • Settings for the index
    • Mappings for fields in the index
    • Index aliases
  3. Update todo (Documentation) POST todo/_update/<_id> { "doc": { "text": Sample todo task." } }
  4. Delete document (Documentation) The documentation removes a JSON document from the specified index. DELETE /todo/_doc/<_id>
  5. Read documents A) get individual document (Documentation) GET /todo/_doc/<_id>B) get all document from index (Documentation) GET twitter/_search { "query": { "match_all": {} } }
  6. Deleting index (Documentation) DELETE /todo

Project Details Frontend

I have created this sample project using Angular 8 (You can check the sample project here). But this should work fine with Angular 9 as well. It’s a Single Page Application where you can create Todo, and you will see todos in the list where you can edit them. I created an add-todo component and a list-todo component using Angular CLI.

ng generate component list-todo ng generate component add-todo

And generated services named elastic-api and api-local to store data in elastic and locally respectively.

ng generate service elastic-api ng generate service api-local

Files description: 

add-todo.component.html: Here you will find simple form to create todo add-todo.component.ts: Logic for above form
list-todo.componnet.html: Show list of todo with Simple form to edit/delete a single todo
list-todo.componnet.ts: Logic for above component

elastic-api.service.ts: Logic to call ES APIs. Also Please check this file for sample response of above ES APIs

Did you enjoy this content? Follow our linkedin page!