title: Separating html and JavaScript in Flask
body: <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>