Static resource problem referencing .js file in html using Flask

Question

When opened directly, my html file will load my OpenLayers JavaScript file (which loads a map frame). However when I run the html from my Flask python app, the JavaScript file/object doesn't load (no map showing, just some heading text).

This issue appears to be sorted here:

External JavaScript file is not getting added when running on Flask

However due to my folder structure, I can't seem to get the .js to load. No errors, just no map loading in the page. I think I need some help with the syntax of the 'static' reference. I think this is the issue, however I am very new to website building. This is my project folder structure:

ol_app.py
/pages
    olquickstart.html
/static
    /scripts
        ol_script.js
/libs
    /v6.3.1-dist
        ol.css
        ol.css.map
        ol.js
        ol.js.map

My Flask python app:

from flask import Flask, render_template
import os
import webbrowser
from threading import Timer

template_dir = os.path.abspath(r'D:\PathToProject\ol_quickstart\pages')
app = Flask(__name__, template_folder=template_dir)

#home page
@app.route('/')
def index():
    return '<a href="http://127.0.0.1:5000/ol_qs">OL QuickStart</a>'

#openlayers test page
@app.route('/ol_qs')
def ol_qs():
    return render_template("olquickstart.html")

#run app
def open_browser():
    webbrowser.open_new('http://127.0.0.1:5000/')

if __name__ == "__main__":
    Timer(1, open_browser).start();
    app.run(port=5000)

my html:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="../libs/v6.3.1-dist/ol.css" type="text/css">
    <style>
      .map {
        height: 900px;
        width: 100%;
      }
    </style>
    <script src="../libs/v6.3.1-dist/ol.js"></script>
    <title>OpenLayers Quickstart</title>
  </head>
  <body>
    <h2>OL Quickstart Map</h2>
    <div id="js-map" class="map"></div>
    <!-- <script src='../static/scripts/ol_script.js'></script> I USE THIS LINE WHEN OPENING THE HTML DIRECTLY WITHOUT FLASK-->
    <script type="text/javascript"
        src="{{ url_for('static', filename='scripts/ol_script.js') }}"></script>
  </body>
</html>

Is this part the problem?

<script type="text/javascript" src="{{ url_for('static', filename='scripts/ol_script.js') }}"></script>

Your server can handle **MIME** outputs (Origin,Filesize,)? Add an internal **File Creator Script** for this but dont link file object(will be duplicate more than one time). Your server default output type is `text/html`. — dsgdfg, Apr 24 '20 at 20:15
@dsgdfg sorry not sure I understand what mime is. I’m running my site from local server on my PC. — Theo F, Apr 24 '20 at 21:35
You will be want on next level. who serve static files **and** how to manage user scripts ? — dsgdfg, May 01 '20 at 00:15

v25 · Accepted Answer · 2020-04-25T14:35:19.193

1

Looks like you need to move the libs directory into static and then include those files with similar url_for functions to what you already have:

<link rel="stylesheet" type="text/css"
 href="{{ url_for('static', filename='libs/v6.3.1-dist/ol.css') }}">

<script type="text/javascript"
 src="{{ url_for('static', filename='libs/v6.3.1-dist/ol.js') }}"></script>

Your exsiting one for scripts/ol_script.js looks correct.

However to debug this yourself you should load the dev tools in your webbrowser and view the Network tab to ensure that each JS file loads sucessfully and doesn't 404.

Similarly the Console tab will show you any javascript errors within the page.

edited Apr 25 '20 at 14:35

answered Apr 24 '20 at 22:25

v25

7,096
2
20
36

thanks this works! Could you explain what was going on? and why moving libs into static solved it? Also, you were missing a trailing `` tag at the end of that codeblock there. – Theo F Apr 25 '20 at 14:15
@TheoF Simply, anything provided as the `filename` arg to `url_for('static', filename='anything')` has to exist within the `static/` directory! – v25 Apr 25 '20 at 14:39

Static resource problem referencing .js file in html using Flask

1 Answers1