How do I include jQuery code in my node.js web app?
<p>so I've been working on a (fairly simple) RESTful app using node.js, and I've made it towards the very last bit, now the only bit missing is using jQuery to manipulate the html page so I can edit the content of the html - and it's driving me absolutely mad.</p>

<p>I took the try.jquery.com tutorial, and it was pretty smooth; I'd by no means call myself a master of jquery, but I have very little trouble writing the code for basic html manipulation, except I never really considered where the jquery code would go. I've tried a bunch of different stuff and only one (really inconvenient) way has worked, so I was wondering if I could get some clarification.</p>

<p>(Note: all the js files are in the root folder, and index.html is in root/public; and I'm basically just running app.js through npm/package.json)</p>

<p><strong>I've tried</strong> including the jQuery code in the main app.js file:</p>

<p><em>app.js</em></p>

<pre><code>//some imports/requires here
var $ = require('jquery');
//more imports/requires here

//error; document is undefined
$(document).ready($('h1').text('Im Here');

app.get('/', function (req, res) {

    res.sendFile(__dirname+'/public/index.html');

});
</code></pre>

<p><em>index.html</em></p>

<pre><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;title&gt;Inspiratorator&lt;/title&gt;
    &lt;link rel="stylesheet" type="text/css" href="css/style.css"&gt;
    &lt;script="../app.js"&gt;&lt;/script&gt;
</code></pre>

<p><strong>I've tried</strong> including the jQuery code in its own file (tried just letting the code sit in the js file, and tried exporting the code as a function and calling it from app.js - both did nothing):</p>

<p><em>jusQueryin.js</em></p>

<pre><code>var $ = require('jQuery'); //tried with and without this

$(document).ready(function () {
    $(' button ').on( 'click', $('h1').text("I'm here") );
    console.log('kpa'); 
});
</code></pre>

<p><em>index.html</em></p>

<pre><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;title&gt;Inspiratorator&lt;/title&gt;
    &lt;link rel="stylesheet" type="text/css" href="css/style.css"&gt;
    &lt;script="../jusQueryin.js"&gt;&lt;/script&gt;
</code></pre>

<p><strong>I've also tried</strong> (this worked, but I don't know how I would deal with the code in here from other .js file, if it is possible):</p>

<p><em>index.html</em></p>

<pre><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;title&gt;Inspiratorator&lt;/title&gt;
    &lt;link rel="stylesheet" type="text/css" href="css/style.css"&gt;
    &lt;script&gt;
        $(document).ready(function () {
        $(' button ').on( 'click', $('h1').text("I'm here") );
        console.log('kpa'); 
    });
&lt;/script&gt;
</code></pre>

<p>I've also tried different variations(i.e. including the 2nd part of the ready function in a function (or not), using an onClick event inside the dom.ready function, etc..), but the only one that worked was the last approach</p>

<p>Ideally, I'd like to be able to use the jQuery code inside app.js, less ideally would be in its own file; or if I have to include it inside the html file for some reason, I would at least need to be able to communicate with the code in the script block so that I can give it info from the database and so on.</p>