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
– dsgdfg, Commented Apr 24, 2020 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
– Theo F, Commented Apr 24, 2020 at 21:35
You will be want on next level. who serve static files and how to manage user scripts ? — dsgdfg
– dsgdfg, Commented May 1, 2020 at 0:15

v25 · Accepted Answer · 2020-04-25 14:35:19Z

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, 2020 at 14:35

answered Apr 24, 2020 at 22:25

v25

7,6912 gold badges24 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Theo F Over a year ago

thanks this works! Could you explain what was going on? and why moving libs into static solved it? Also, you were missing a trailing </script> tag at the end of that codeblock there.

v25 Over a year ago

@TheoF Simply, anything provided as the filename arg to url_for('static', filename='anything') has to exist within the static/ directory!

Collectives™ on Stack Overflow

Static resource problem referencing .js file in html using Flask

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related