External JavaScript file is not getting added when running on Flask

Question

I have an HTML file named showMap.html:

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <title>Map</title>
  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
  </script>
  <script type="text/javascript" src="js/map.js"></script>
</head>

<body onload="showPosition()">
  <div id="map_canvas" style="width:500px;height:500px;"></div>
</body>

</html>

And another JavaScript file map.js is placed in the js folder of the same directory.

This code works fine when the HTML file is loaded, but this does not work when I run it in the server.

I use Python's Flask framework for back-end programming and the funny thing is that the same thing will work well if I expand the JavaScript code inside the HTML file. The only problem is with the external file.

Martijn Pieters · Accepted Answer · 2019-09-08T17:37:50.293

133

Serve the map.js file as a static resource:

move the file to a static/ subdirectory of your package

generate a static URL for it in a Jinja2 template like so:

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

The filename parameter takes a relative path; you can use subdirectories was needed.

edited Sep 08 '19 at 17:37

answered Feb 05 '13 at 15:57

Martijn Pieters

1,048,767
296
4,058
3,343

2

@MartijnPieters Is Flask only able to import from static subdirectory? I had made a directory on the same level as static and put my js file inside which chrome was not successful in import. However, when I moved the directory into static, it was successfully imported. Maybe if this behaviour is true, can it should highlighted and explained. – seokhoonlee Mar 30 '16 at 02:11
3

@seokhoonlee: `Flask` creates a special route for `/static`, which serves anything under the `static` directory, as [documented in the quickstart](http://flask.pocoo.org/docs/0.10/quickstart/#static-files). If you need to serve data from more directories, you'd need to create more such views (how exactly is too long to explain in a comment). – Martijn Pieters Mar 30 '16 at 09:49

score 16 · Answer 2 · answered Jan 25 '17 at 06:29

16

Step 1: Create folder with name static on project root

Step 2: Add static files in static folder

Step 3 Add in template

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

answered Jan 25 '17 at 06:29

AiOsN

2,305
2
23
29

score 0 · Answer 3 · answered Dec 01 '18 at 12:27

0

I experience the same issue, for stylesheet, the URL_FOR works but for javascript. I had to write

<script type="text/javascript" src="static/map.js"/>

It worked for me

answered Dec 01 '18 at 12:27

Muyinda Rogers

147
3
13

This would only work for routes that use, at most, a single slash. For routes with multiple components (e.g. `/foo/bar/baz`) your relative path will resolve to a non-existing URL. It’ll also break when mounting your Flask app as a WSGI component under a base url with a path component. Don’t hardcore the static path, use the `url_for()` utility and have Flask generate the correct path for you. – Martijn Pieters Sep 08 '19 at 17:43

score -1 · Answer 4 · answered Aug 02 '18 at 14:00

-1

I want to add to Martijn's answer, that you have to link your js file exactly like this:

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

and not like this:

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

answered Aug 02 '18 at 14:00

Mykhailo Seniutovych

3,527
4
28
50

That’s how the HTML ` – Martijn Pieters Sep 08 '19 at 17:45

External JavaScript file is not getting added when running on Flask

4 Answers4

Linked