Serving from Flask I cannot load javascript file

Question

I am trying to build my first Single Page Application following a tutorial but I cannot load the local javascript file.

My Python code:

from flask import Flask, current_app


app = Flask(__name__, static_folder='')

@app.route('/')
def index():
    return current_app.send_static_file('index.html')

if __name__ == "__main__":
    app.run()

My HTML:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>My Page</title>
    <script
    src="https://code.jquery.com/jquery-3.4.0.min.js"
    integrity="sha256-BJeo0qm959uMBGb65z40ejJYGSgR7REI4+CW1fNKwOg="
    crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.9/angular.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>

    <div ng-controller="IndexController">
        <p>{{message}}</p>
    </div>


    <script src="./static/js/app.js"></script>
</body>
</html>

My JavaScript:

var myApp = angular.module('myApp', []);

myApp.controller('IndexController', function($scope){
    $scope.message = 'binded ok';
});

The folder structure is:

MyApp
 |-static
 | |-js
 |   |-app.js
 |-index.html
 |-server.py

Everything loads okay except for app.js that gives me:

Request URL: http://localhost:5000/static/js/app.js

Status Code: 404 NOT FOUND

EDIT: If I open index.html directly using the browser app.js is loaded. So I think that Flask is creating an issue here.

Related: https://stackoverflow.com/questions/20646822/how-to-serve-static-files-in-flask — bhansa, Apr 15 '19 at 09:33

score 1 · Answer 1 · answered Apr 15 '19 at 09:44

1

Try referencing your JS file like so:

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

answered Apr 15 '19 at 09:44

brunns

2,689
1
13
24

Doesn't work. 404 Not Found once again, with different path. – chakepid Apr 15 '19 at 09:48
Ah, right, I see, sorry. Problem here is that you are serving your index.html as a static file rather than as a template. I'm not sure it you'll be able to refer to your JS file that way. – brunns Apr 15 '19 at 10:01
So what changes would you recommend in my `server.py`? – chakepid Apr 15 '19 at 10:02
1

Something like [this](http://flask.pocoo.org/docs/1.0/quickstart/#rendering-templates). – brunns Apr 15 '19 at 10:19
I don't want it to be treated with jinja. Tried to use `send_file()` but same problem. – chakepid Apr 15 '19 at 10:29
Ah, OK. Sorry, then, I can't answer this one. – brunns Apr 15 '19 at 10:29

score 0 · Answer 2 · answered Apr 15 '19 at 10:59

0

Create your App with app = Flask(__name__, static_folder='', static_url_path='')

answered Apr 15 '19 at 10:59

Adrian Krupa

1,877
1
15
24

Serving from Flask I cannot load javascript file

2 Answers2