How To Build Autocomplete search with Nestjs, Elasticsearch and Vue

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

#App
APP_ENV=dev
GLOBAL_PREFIX=api
#Elastic
ELASTICSEARCH_NODE=http://dockerip:9200
NODE_PORT=3000
ELASTICSEARCH_INDEX=movies-index

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
EXPOSE 80
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.

• install docker

• create dev.yml

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.

Comments

[Margkoss]

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)

[HARRISKING]

how to get the docker IP?

[crazyoptimist]

Service name (nest-elasticsearch in above case) is used when you use docker-compose for ochestrating everything. Otherwise, bind the port to the host and use localhost. For example:

ports:
  - 9200:9200
  - 9300:9300

Then you can access the elasticsearch node using http://localhost:9200

[mkop]

github.com/kop7/nest-elasticsearch...