Elasticsearch : Uncaught ReferenceError: elasticsearch is not defined
<p>I am trying to create a NodeJS application using Elasticsearch</p>

<p>here is my code</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;script src="../bower_components/elasticsearch/elasticsearch.js"&gt;&lt;/script&gt;
&lt;script&gt;
function esPinger() {
    var elasticsearch = require('elasticsearch');
var client = elasticsearch.Client({
  host: 'localhost:9200',
  log: 'trace'
});

client.ping({
  // ping usually has a 3000ms timeout
  requestTimeout: Infinity,

  // undocumented params are appended to the query string
  hello: "elasticsearch!"
}, function (error) {
  if (error) {
    console.trace('elasticsearch cluster is down!');
  } else {
    console.log('All is well');
    alert("YAY");
  }
});
}
&lt;/script&gt;
&lt;html&gt;

  &lt;head&gt;
    &lt;title&gt;NodeJS Starter Application&lt;/title&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="stylesheet" href="stylesheets/style.css"&gt;
  &lt;/head&gt;

  &lt;body&gt;

    &lt;center&gt;
    &lt;button onclick="esPinger()"&gt;Ping ES&lt;/button&gt;
    &lt;/center&gt;
  &lt;/body&gt;

&lt;/html&gt;
</code></pre>

<p>i installed the elasticsearch client as</p>

<pre><code>npm install elasticsearch 
</code></pre>

<p>and also</p>

<pre><code>bower install elasticsearch 
</code></pre>

<p>in my project folder, i can see that there is a <code>bower_componenets</code> folder that has all of the .js files for elasticsearch, including <code>elasticsearch.js</code></p>

<p>now, when i run my page and click on the button, i get</p>

<pre><code>Uncaught ReferenceError: elasticsearch is not defined
</code></pre>

<p>any idea why? am i missing some configuration?</p>

<p>for reference, here is what my project structure looks like</p>

<p><a href="https://i.stack.imgur.com/U8BFR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/U8BFR.png" alt="enter image description here"></a></p>

<p><strong>Edit</strong></p>

<p>Here is what i see in the inspect element console</p>

<p><a href="https://i.stack.imgur.com/0ITY6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0ITY6.png" alt="enter image description here"></a></p>

<p><strong>how can it not get the library!</strong></p>