title: Flask static path and multi level route
body: <p>So I a new to the whole web and Flask programming. I was moving along pretty good displaying information from my database in web pages then I mixed a little bit of java script in. But then because of what I have been reading on the internet I got the idea to organize my URLs like so</p>
  
  <ul>
  <li>localhost:5000/data/daily</li>
  <li>localhost:5000/data/weekly</li>
  <li>localhost:5000/data/monthly</li>
  </ul>
  
  <p>However when I make my URLs more then one level deep when flask pulls up the page I end up getting java script errors because these extra levels have been append to my src attribute path in my script tags.</p>
  
  <p>So what is going on here? Is there just some basic tid bit of web programming knowledge I am missing? I added some code bits below that shows example of what I am encountering.</p>
  
  <p>The files below are in the following folder configuration</p>
  
  <pre><code>project_root
  ├── app.py
  ├── static
  │   └── js
  │       └── clock.js
  └── templates
      ├── clock.html
      └── index.html
  </code></pre>
  
  <p>app.py</p>
  
  <pre><code>import flask
  
  app = flask.Flask(__name__)
  
  @app.route('/clock')
  def clock():
      return flask.render_template('clock.html')
  
  @app.route('/deep/clock')
  def deep_clock():
      return flask.render_template('clock.html')
  
  if __name__ == '__main__':
      app.run(debug=True)
  </code></pre>
  
  <p>clock.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
      &lt;script src="static/js/clock.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body onload="startTime()"&gt;
  
  &lt;div id="txt"&gt;&lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>clock.js</p>
  
  <pre><code>function startTime() {
      var today = new Date();
      var h = today.getHours();
      var m = today.getMinutes();
      var s = today.getSeconds();
      m = checkTime(m);
      s = checkTime(s);
      document.getElementById('txt').innerHTML =
      h + ":" + m + ":" + s;
      var t = setTimeout(startTime, 500);
  }
  function checkTime(i) {
      if (i &lt; 10) {i = "0" + i};  // add zero in front of numbers &lt; 10
      return i;
  }
  </code></pre>
  
  <p>So if you copy everything and run the app.py then </p>
  
  <ul>
  <li>localhost:5000/deep/clock <strong>will fail</strong></li>
  </ul>
  
  <p>and</p>
  
  <ul>
  <li>localhost:5000/clock <strong>works</strong></li>
  </ul>
  
  <p>So what is going on here? What do I need to do to get them both to work in the current configuration?</p>