Javascript file not found using relative path during Flask render_template


I’m using Python and Flask to build a simple interaction web app.
Testing on localhost:5000 using Chrome.

I have one template and one associated javascript file located at:

The main.html template includes the scripts file like this:

<script src="main_scripts.js"></script>

When I render the template using this Python code…

return render_template('main.html', session_id=session_id, title=sess.title)

The main.html page is rendered, but I get this error in the Chrome console:

Failed to load resource: the server responded with a status of 404 (NOT FOUND)

Using the Chrome console to inspect the location of the unfound ‘main_scripts.js’ when the error occurs, the browser thinks it is trying to load it from inside my virtual environment at:


…and not from the same directory as the template.

I can’t seem to force the rendered template to understand where it’s script file is located. So far I have tried src paths like “./main_scripts.js” and even “/appdir/main_scripts.js” with the exact same results.

Asked By: vbsql7



You first need to create a static folder at the same level as the templates folder. Then create a js subfolder and put the js file in that folder. Now you can call it in your html.
Here’s the "pythonic" way do that:

<script src="{{ url_for('static', filename='js/main_scripts.js') }}"></script>

As explained here in the official Flask documentation, your project structure should look like this:

Answered By: Espoir Murhabazi