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-08 17:37:50Z

135

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 8, 2019 at 17:37

answered Feb 5, 2013 at 15:57

Martijn Pieters

1.1m326 gold badges4.2k silver badges3.4k bronze badges

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

2 Comments

seokhoonlee Over a year ago

@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.

Martijn Pieters Over a year ago

@seokhoonlee: Flask creates a special route for /static, which serves anything under the static directory, as documented in the quickstart. 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).

AiOsN · Accepted Answer · 2017-01-25 06:29:02Z

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, 2017 at 6:29

AiOsN

2,3452 gold badges23 silver badges30 bronze badges

Comments

Muyinda Rogers · Accepted Answer · 2018-12-01 12:27:19Z

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 1, 2018 at 12:27

Muyinda Rogers

1573 silver badges14 bronze badges

1 Comment

Martijn Pieters Over a year ago

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.

Mykhailo Seniutovych · Accepted Answer · 2018-08-02 14:00:49Z

-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 2, 2018 at 14:00

Mykhailo Seniutovych

3,8015 gold badges38 silver badges57 bronze badges

1 Comment

Martijn Pieters Over a year ago

That’s how the HTML <script> tag works, yes. My answer has always used the first form, <script> can’t be used as an empty tag. Note that that’s not specific to Flask.

Collectives™ on Stack Overflow

External JavaScript file is not getting added when running on Flask

4 Answers 4

2 Comments

Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related