Pathing in HTML to a static file

Question

I'm trying to server an HTML page with some Javascript from a Flask Server

Python Code:

from flask import Flask
from flask import render_template
app = Flask(__name__)

@app.route("/")
def hello():
    return render_template('simple.html')

if __name__ == "__main__":
    app.run()

My directory looks something like this:

The HTML file I'm rendering is in the templates file.

To load the JS file I have <script type="text/javascript" src="../static/js/script.js"></script>

I keep getting an error

"browser.min.js:3 GET http://localhost:5000/script.js 404 (NOT FOUND)n.load @ browser.min.js:3s @ browser.min.js:3i @ browser.min.js:3
browser.min.js:3 Uncaught Error: Could not load http://localhost:5000/script.js(…)s.onreadystatechange @ browser.min.js:3

What am I doing wrong?

You need to provide a [mcve]. Where's the Python that is supposed to serve up the JS? — Quentin, Nov 14 '16 at 21:47
http is usually run on port 80, not 5000. most of the time when it's changed it's changed to 8080. did you explicitly set it to run on 5000? — I wrestled a bear once., Nov 14 '16 at 21:52

score 0 · Answer 1 · answered Nov 14 '16 at 21:35

0

You need to write paths relative to URL loaded by the browser, not the physical path on disk where your template lives.

The browser has no idea that the HTML it serves was written in a file in the templates directory; it just sees HTML source behind a URL.

It's usually best to always use absolute paths, especially if your template can be served by views from multiple routes.

answered Nov 14 '16 at 21:35

SLaks

868,454
176
1,908
1,964

I understand what you are saying, just not sure how to do it...can you give me an example? – Morgan Allen Nov 14 '16 at 21:40

arhak · Answer 2 · 2016-11-14T21:47:07.833

0

try without the dots: <script type="text/javascript" src="//static/js/script.js"></script>

http://webpy.org/cookbook/staticfiles

or let the proper path be built from within python url_for('static', filename='js/script.js')

http://flask.pocoo.org/docs/0.11/quickstart/#static-files

edited Nov 14 '16 at 21:47

answered Nov 14 '16 at 21:45

arhak

2,488
1
24
38

unfortunately that didn't work either – Morgan Allen Nov 14 '16 at 21:45
when you visit the home page of your website, what is the URL? `http://localhost:5000/`? – arhak Nov 14 '16 at 21:48
yes that is the homepage – Morgan Allen Nov 14 '16 at 21:50
and what do you get if you put this URL in your browser `http://localhost:5000/static/js/script.js` ? – arhak Nov 14 '16 at 21:53
I don't have an endpoint for that in my Flask App, just '/', updated my question to reflect this – Morgan Allen Nov 14 '16 at 21:55
don't think you need a route for static files, see http://exploreflask.com/en/latest/static.html#serving-a-favicon . it looks like you can directly do `` can't you? – arhak Nov 14 '16 at 22:30
"A special endpoint ‘static’ is used to generate URL for static files." https://www.tutorialspoint.com/flask/flask_static_files.htm – arhak Nov 14 '16 at 22:31

Pathing in HTML to a static file

2 Answers2