Elasticsearch is a distributed, RESTful search and analytics engine capable of addressing a growing number of use cases. As the heart of the Elastic Stack, it centrally stores your data for lightning-fast search, fine‑tuned relevancy, and powerful analytics that scale with ease.
An Elasticsearch index is like a ‘database' in a relational database. It has a mapping that defines multiple types. An index is a logical namespace that maps to one or more primary shards and can have zero or more replica shards.
In this blog, you will learn how to create a simple book search application using React, Django, and Elasticsearch.
Search functionality is achieved by adding a simple search bar and submit button in React and retrieving data from Elasticsearch using APIs developed with Django.
Adding the data to Elasticsearch is a mandatory step to create any search application. In this blog, I’m uploading Books sample data ( book_name, author, published_at, rating, price, image_url, etc.,) in an excel file and pushing it into the elastic index.
Basic Django project setup
Basic React.js project setup
To install Elasticsearch and Kibana follow the steps mentioned in the below link.
In the Kibana dashboard, Go to Dev Tools
To create an index, please run the following query
To verify the index created from the above step, Navigate to Kibana > Stack Management > Index Management > Indices
In the Kibana dashboard, Navigate to Kibana > Stack Management > API keys > click Create API key
In the Name section, Enter the API key name of your choice (for example: search_api_key and click Create API key
Once the API Key is created, save it into a local text file for future purposes. This API Key is mandatory for Django to interact with Elasticsearch using REST Endpoints.
We can use any REST API development framework like Flask, Express.js, Django, and Java Spring Boot to create the search application backend which will pull the data from Elasticsearch.
In this Blog, we are gonna use Django Framework to create backend API.
Create a Django project named search_django using the following command.
Navigate to the project directory which you have created in the above step and create an app named app_search using the following command.
Once the project and app are created, the project structure will look similar to the below screenshot.
Update the Django settings.py file with the following items.
INSTALLED_APPS section add your app name (i.e. app_search)
ELASTIC_API_KEY(i.e. from Step 3: Create an API key to interact with Elasticsearch using REST APIs. ) at end of settings.py file to allow Django to access Elasticsearch.
A sample settings.py file can be found in the following git repository file.
To push sample data to the elastic search index, In your Django project create a folder named scripts. Under the scripts folder create a file named push_data_to_elastic_index.py.
In push_data_to_elastic_index.py, add the following code and run it ( In this file reads an excel file that contains some sample data, converts it into JSON, and pushes that data in the Elasticsearch index )
Also update the
YOUR_ELASTIC_API_KEY(i.e. from Step 3: Create an API key to interact with Elasticsearch using REST APIs. ) in push_data_to_elastic_index.py file.
A sample push_data_to_elastic_index.py file can be found in the following git repository file.
Execute the above python script using the following commands.
To verify the data stored in your index, Please go to Kibana Dashboard and navigate to Dev Tools, Run the following query
Navigate to app_search django app directory, and create a Search class in views.py.
A sample views.py file can be found in the following git repository file.
After creating the class add the urls.py file under your app_search django app.
In your core folder navigate to urls.py(core folder) and add your path with <appname> and <url_filename>(i.e. created in the above step). Your core urls.py settings are like the below.
A sample urls.py(core folder) file can be found in the following git repository file.
Now, navigate to the Django app directory (i.e app_search) and add the Search Class API path in urls.py
A sample urls.py(app_search) file can be found in the following git repository file.
To run the Django project . Run the following command
Test the API using postman or any other API Client tool.
Run the following command to create a React project.
Navigate to the created project directory
Under the src folder create a folder named components and create search.js
The final project structure is given below
In search.js add a text area and submit button to search data.
To fetch data from the backend API which we created in Step 4: Django Backend Creation( http://127.0.0.1:8000/search/books/ ) add the following function in your search.js
Call the above function when you click the submit button
When you click the submit button it calls the backend API. In the backend, it performs a search operation on Elasticsearch and fetches you the relevant information.
After completing the search operation you will get the matched data from Elasticsearch.
To view the data from Elasticsearch, add the below code in search.js
A sample Search.js file can be found in the following git repository file.
After successfully running both the backend and frontend apps. If you open the react URL (i.e localhost:3000) in your browser the following page will appear.
On that page, enter any book name available in the excel sheet and click submit button. After that, you will see relevant results on the same page.