DEV Community

Cover image for How To Build Autocomplete search with Nestjs, Elasticsearch and Vue

How To Build Autocomplete search with Nestjs, Elasticsearch and Vue

kop7 profile image mkop Updated on ・3 min read

In this Post, we will cover

  • create and build docker images
  • create and setup Nest app
  • configure Elasticsearch with Nest app
  • create and setup Vue app

let's start

Project root directory structure:

├── client
├── server
└── dev.yml

1. Setup Nest and Elasticsearch

Server directory structure:

├── src
│   ├── config
│   │   ├── config.module.ts
│   │   └── config.service.ts
│   ├── modules
│   │   ├── movie
│   │   │   ├── movie.controller.ts
│   │   │   ├── movie.module.ts
│   │   │   └── movie.service.ts
│   │   └── search
│   │       ├── search.module.ts
│   │       └── search.service.ts
│   ├── app.controller.ts
│   ├── app.module.ts
│   ├── main.ts
│   └── typings.d.ts
├── Dockerfile
├── .env
├── movies.json
├── package.json
└── tslint.json
  • ConfigModule and ConfigService

in the ConfigModule we have to import env variables in project

  • config.module.ts

  • config.service.ts

  • SearchModule and SearchService

in the SearchModule we have to configure Elasticsearch and fill movie-index with data from movies.json

movie-indexautomatically created when you start a project.

  • search.module.ts

  • search.service.ts

  • MovieModule, MovieService and MovieController

we create MovieController, MovieService and import SearchModule for access method search in SearchService

  • movie.module.ts

  • movie.controller.ts

  • movie.service.ts

  • AppModule

in this step we will create healthcheck endpoint in AppController for docker health.
we have to import MovieModule, ConfigModule and SearchModule into AppModule

  • app.module.ts

  • app.controller.ts

  • main.ts

  • create server/Dockerfile

docker image for Nest app

FROM node:13
WORKDIR /app/server
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
EXPOSE 3000/tcp
CMD [ "node", "dist/main.js" ]

Create .env file in server directory


how to find elastic url in docker:

docker inspect -f '{{range .NetworkSettings.Networks}}{{.IPAddress}}{{end}}' nest-elasticsearch

Replace the given dockerIp with ELASTICSEARCH_NODE=http://dockerIp:9200 in .env

2. Setup Vue app

  • Client directory structure:
├── Dockerfile
├── package.json
├── public
│   └── index.html
└── src
    ├── App.vue
    ├── asset
    ├── components
    │   └── Home.vue
    ├── main.js
    ├── plugins
    │   └── boostrap-vue.js
    └── router.js

  • App.vue

<router-view> The component is a functional component that renders the matched component for the given path. Components rendered in <router-view> can also contain their own <router-view>, which will render components for nested paths.

  • Home.vue
  • boostrap-vue.js

setup boostrap with vue

  • main.js
  • router.js

  • create client/Dockerfile

    docker for Vue app

FROM node:11.1-alpine as develop-stage
WORKDIR /app/client
COPY package*.json ./
RUN npm install
COPY . .
FROM develop-stage as build-stage
RUN npm run build
COPY --from=build-stage /app/client/dist /usr/share/nginx/html
CMD ["nginx", "-g", "daemon off;"]

3. Setup Docker for project

why use Docker?

Docker is a tool designed to make it easy to create, deploy and run application by using containers.

Check out the full project on GitHub

That's it!

Feel free to ask questions, make comments or suggestions, or just say hello in the comments below.

Discussion (1)

Editor guide
margkoss profile image

Hi, thanks for the tutorial
I'm following along but i get a connection timeout error when creating the index. I created an index with a curl command and it seems that the indices.exists(...) is working fine. Can you point me towards a solution?
(I can provide more info if needed)