Separating html and JavaScript in Flask
<p>Hey I've got the following problem:</p>

<p>I am building a little flask app, and usually i just stick with bootstrap and jinja templates to get what I want, but this time I needed a bit more customised version. In order to get a grip I started with a simple example of using custom js and flask to get the basic right. But lets go into detail:</p>

<p>Assume I have a simple flask web app called app.py located in my_app/ which looks like this</p>

<pre><code>from flask import Flask, render_template
app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

if __name__ == '__main__':
    app.run(port=8080, debug=True)
</code></pre>

<p>and the corresponding index.html, which is located in my_app/templates, is simply</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;body&gt;

&lt;p&gt;Clicking here will make me dissapear&lt;/p&gt;

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"&gt;            &lt;/script&gt;
&lt;script&gt;
$(document).ready(function() {
    $("p").click(function(event){
        $(this).hide();
    });
});
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>then I see the expected result, that is, i can click on the paragraph to make it disappear. </p>

<p>BUT: I would like to put the javascript part into a main.js file under static/js/. like so:</p>

<pre><code>$(document).ready(function() {
    $("p").click(function(event){
        $(this).hide();
    });
});
</code></pre>

<p>and the index.html becomes:</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;body&gt;

&lt;p&gt;Clicking here will make me dissapear&lt;/p&gt;

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"&gt;&lt;/script&gt;
&lt;script src='/js/main.js'&gt;&lt;/script&gt;            
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>Unfortunately nothing will happen. I have tried other ways of referencing the script file as well but until now nothing works. I have the impression im missing something really simple. Thanks in advance!</p>