How To Build Autocomplete search with Nestjs, Elasticsearch and Vue
Tags: node, elasticsearch, vue, nestjs
Published: 2020-08-09 06:09:01

![](https://media.giphy.com/media/dVcFFjF3hXihQNnxAS/giphy.gif)

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`
{% gist https://gist.github.com/kop7/821eef615018c6ef2789abd7a72fd6e3
%}

* `config.service.ts`
{% gist https://gist.github.com/kop7/f453d6a691054ad72d02fd1df340cbc1
%}

- SearchModule and SearchService

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

> `movie-index`automatically created when you start a project.


* `search.module.ts`
{% gist https://gist.github.com/kop7/2acfa52075222647d684a5972a40f5ea
%}

* `search.service.ts`
{% gist https://gist.github.com/kop7/be9278db0383a5da012815ef0f35c327
%}


- MovieModule, MovieService and MovieController

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

* `movie.module.ts`
{% gist https://gist.github.com/kop7/31cdbaef699645f98d25cb0cf1955651
%}

* `movie.controller.ts`
{% gist https://gist.github.com/kop7/d088360fe8bf9ebf49a0e0fb091d818b
%}

* `movie.service.ts`
{% gist https://gist.github.com/kop7/fcf53b287e28d2c37c4fa9340fb741ef
%}


- 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`
{% gist
https://gist.github.com/kop7/b6837a3d0b0dadfbb863fbfd3ee3012e
%}

* `app.controller.ts`
{% gist https://gist.github.com/kop7/75dde75b1e326ae7a625001705267870
%}

* `main.ts`
{% gist https://gist.github.com/kop7/f3e7cada76e306446edaff256efa405d
%}

* create server/Dockerfile

> docker image for Nest app

```docker
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
```env
#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 <router-view> 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.

{% gist 
https://gist.github.com/kop7/8c0ab09df02ef059de8ad145724c1695
 %}

- `Home.vue`

{% gist 
https://gist.github.com/kop7/9ee7d6a561fbcad14bbd0ca01c9eaa0f
 %}

- `boostrap-vue.js`

> setup boostrap with vue

{% gist 
https://gist.github.com/kop7/d12f4c0abc401f095750b0ba2b43eaa5
 %}

- `main.js`

{% gist 
https://gist.github.com/kop7/5cf1245838c65608cd103819f0a80703
 %}

- `router.js`
{% gist 
https://gist.github.com/kop7/5510de2241dfcab1fbfaa6b9bbc7a7d9
 %}

- create client/Dockerfile
> docker for Vue app

```docker
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](https://docs.docker.com/engine/install) 

- create dev.yml

{% gist 
https://gist.github.com/kop7/2ca71f4c209f4181bad2534ba5655acb
 %}


Check out the full project on [GitHub](https://github.com/kop7/nest-elasticsearch-vue)


# That's it!
Feel free to ask questions, make comments or suggestions, or just say hello in the comments below.