Getting Started with Elasticsearch in Express.js and Angular

Welcome to the world of Elasticsearch! If you're a beginner who has just started learning SQL, you might be wondering how to implement powerful search capabilities in your web applications. In this blog, we’ll break down how to integrate Elasticsearch with Express.js (a Node.js web framework) and Angular (a popular front-end framework) using simple language and real-life examples.

What is Elasticsearch?

Elasticsearch is an open-source search and analytics engine. It allows you to store, search, and analyze large volumes of data quickly and in near real-time. Imagine you have a library with thousands of books. If you want to find a specific book, searching through each one can take forever. Elasticsearch helps you find that book almost instantly!

Why Use Elasticsearch?

• Speed: It can search through large datasets incredibly fast.
• Scalability: It can grow as your data grows.
• Flexibility: You can easily modify your data structure.

Setting Up Your Project

1. Setting Up Express.js

First, let’s create a simple Express server. If you haven't already, make sure you have Node.js installed on your machine. Then, follow these steps:

1. Create a New Directory:

   mkdir elasticsearch-demo
   cd elasticsearch-demo

1. Initialize a Node.js Project:

   npm init -y

1. Install Express and Elasticsearch Client:

   npm install express @elastic/elasticsearch

1. Create a Simple Server: Create a file named server.js and add the following code:

   const express = require('express');
   const { Client } = require('@elastic/elasticsearch');

   const app = express();
   const client = new Client({ node: 'http://localhost:9200' });

   app.use(express.json());

   app.get('/', (req, res) => {
       res.send('Welcome to Elasticsearch with Express.js!');
   });

   const PORT = 3000;
   app.listen(PORT, () => {
       console.log(`Server is running on http://localhost:${PORT}`);
   });

1. Run the Server:

   node server.js

2. Setting Up Elasticsearch

Make sure you have Elasticsearch running on your machine. You can download and install it from the official website. Once it's running, you can access it at http://localhost:9200.

3. Creating an Angular Application

Now, let’s create a simple Angular application to interact with our Express server.

1. Install Angular CLI (if you haven't already):

   npm install -g @angular/cli

1. Create a New Angular App:

   ng new elasticsearch-angular
   cd elasticsearch-angular

1. Install HttpClient Module: In app.module.ts, import the HttpClientModule:

   import { HttpClientModule } from '@angular/common/http';

   @NgModule({
       declarations: [...],
       imports: [
           ...,
           HttpClientModule
       ],
       providers: [],
       bootstrap: [...]
   })
   export class AppModule { }

4. Connecting Angular to Express

Now, let’s create a service in Angular to communicate with our Express server.

1. Generate a Service:

   ng generate service search

1. Implement the Search Service: In search.service.ts, add the following code:

   import { Injectable } from '@angular/core';
   import { HttpClient } from '@angular/common/http';
   import { Observable } from 'rxjs';

   @Injectable({
       providedIn: 'root'
   })
   export class SearchService {
       private apiUrl = 'http://localhost:3000'; // Your Express server URL

       constructor(private http: HttpClient) { }

       search(query: string): Observable<any> {
           return this.http.get<any>(`${this.apiUrl}/search?query=${query}`);
       }
   }

5. Implementing Search Functionality

Let’s add a simple search interface in Angular.

1. Modify app.component.ts:

   import { Component } from '@angular/core';
   import { SearchService } from './search.service';

   @Component({
       selector: 'app-root',
       template: `
           <h1>Elasticsearch Search</h1>
           <input [(ngModel)]="query" placeholder="Search..." />
           <button (click)="onSearch()">Search</button>
           <ul>
               <li *ngFor="let result of results">{{ result }}</li>
           </ul>
       `,
       styles: []
   })
   export class AppComponent {
       query: string = '';
       results: any[] = [];

       constructor(private searchService: SearchService) { }

       onSearch() {
           this.searchService.search(this.query).subscribe(data => {
               this.results = data.hits.hits.map(hit => hit._source.title); // Assuming your data has a title field
           });
       }
   }

6. Searching in Elasticsearch

Now, let's implement a search endpoint in your Express server.

1. Update server.js:

   app.get('/search', async (req, res) => {
       const { query } = req.query;
       const { body } = await client.search({
           index: 'your_index_name', // Replace with your index name
           body: {
               query: {
                   match: { title: query } // Adjust based on your data structure
               }
           }
       });
       res.json(body);
   });

7. Real-Life Example

Imagine you're building a bookstore application. You want users to search for books by title. With this setup:

• When a user enters a book title in the Angular app, it sends a request to the Express server.
• The server queries Elasticsearch for matching titles.
• It returns results to Angular, which displays them in the user interface.

Conclusion

Congratulations! You’ve just built a simple application that integrates Elasticsearch with Express.js and Angular. You now have a powerful search feature that can be expanded with more complex queries and functionalities.

As you continue to learn SQL and JavaScript, keep exploring more about Elasticsearch. The possibilities are endless, and it can significantly enhance the capabilities of your applications. Happy coding!