added the express server files

srv/data.js

@@ -29,7 +29,7 @@ client.indices.create({
 });
 
 
-const cities = require('./data/cities.json');
+const cities = require('../data/cities.json');
 // declare an empty array called bulk
 var bulk = [];
 //loop through each city and create and push two objects into the array in each loop

srv/index.js

@@ -0,0 +1,71 @@
+const express = require('express');
+const bodyParser = require('body-parser')
+const path = require('path');
+const elasticsearch = require('elasticsearch');
+
+const client = new elasticsearch.Client({
+    hosts: ['http://localhost:9200']
+});
+
+const app = express();
+
+
+// ping the client to be sure Elasticsearch is up
+client.ping({
+    requestTimeout: 30000,
+}, function(error) {
+    if (error) {
+        console.error('elasticsearch cluster is down!');
+    } else {
+        console.log('Everything is ok');
+    }
+});
+
+app.use(bodyParser.json())
+
+app.set('port', process.env.PORT || 3001);
+
+
+app.use(express.static(path.join(__dirname, 'public')));
+
+
+app.use(function(req, res, next) {
+    res.header("Access-Control-Allow-Origin", "*");
+    res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
+    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
+    next();
+});
+
+
+app.get('/', function(req, res) {
+    res.sendFile('template.html', {
+        root: path.join(__dirname, '../views')
+    });
+})
+
+app.get('/search', function(req, res) {
+
+    let body = {
+        size: 200,
+        from: 0,
+        query: {
+            match: {
+                name: req.query['q']
+            }
+        }
+    }
+
+    client.search({ index: 'scotch.io-tutorial', body: body, type: 'cities_list' })
+        .then(results => {
+            res.send(results.hits.hits);
+        })
+        .catch(err => {
+            console.log(err)
+            res.send([]);
+        });
+
+})
+
+app.listen(app.get('port'), function() {
+    console.log('Express server listening on port ' + app.get('port'));
+});

views/template.html

@@ -0,0 +1,96 @@
+<!-- template.html -->
+<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
+<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue"></script>
+<div class="container" id="app">
+    <div class="row">
+        <div class="col-md-6 col-md-offset-3">
+            <h1>Search Cities around the world</h1>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-md-4 col-md-offset-3">
+            <form action="" class="search-form">
+                <div class="form-group has-feedback">
+                    <label for="search" class="sr-only">Search</label>
+                    <input type="text" class="form-control" name="search" id="search" placeholder="search" v-model="query" >
+                    <span class="glyphicon glyphicon-search form-control-feedback"></span>
+                </div>
+            </form>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-md-3" v-for="result in results">
+            <div class="panel panel-default">
+                <div class="panel-heading">
+                <!-- display the city name and country  -->
+                    {{ result._source.name }}, {{ result._source.country }} 
+                </div>
+                <div class="panel-body">
+                <!-- display the latitude and longitude of the city  -->
+                    <p>lat:{{ result._source.lat }}, long: {{ result._source.lng }}.</p>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<!--- some styling for the page -->
+<style>
+    .search-form .form-group {
+        float: right !important;
+        transition: all 0.35s, border-radius 0s;
+        width: 32px;
+        height: 32px;
+        background-color: #fff;
+        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
+        border-radius: 25px;
+        border: 1px solid #ccc;
+    }
+
+    .search-form .form-group input.form-control {
+        padding-right: 20px;
+        border: 0 none;
+        background: transparent;
+        box-shadow: none;
+        display: block;
+    }
+
+    .search-form .form-group input.form-control::-webkit-input-placeholder {
+        display: none;
+    }
+
+    .search-form .form-group input.form-control:-moz-placeholder {
+        /* Firefox 18- */
+        display: none;
+    }
+
+    .search-form .form-group input.form-control::-moz-placeholder {
+        /* Firefox 19+ */
+        display: none;
+    }
+
+    .search-form .form-group input.form-control:-ms-input-placeholder {
+        display: none;
+    }
+
+    .search-form .form-group:hover,
+    .search-form .form-group.hover {
+        width: 100%;
+        border-radius: 4px 25px 25px 4px;
+    }
+
+    .search-form .form-group span.form-control-feedback {
+        position: absolute;
+        top: -1px;
+        right: -2px;
+        z-index: 2;
+        display: block;
+        width: 34px;
+        height: 34px;
+        line-height: 34px;
+        text-align: center;
+        color: #3596e0;
+        left: initial;
+        font-size: 14px;
+    }
+</style>