Python - flask server with angularjs front end, can't locate javascript or css files in index.html

Question

I'm building a basic website that works with a python backend in Flask and an Angularjs frontend. I'm currently running into 404 issues when the index template is loading js files and css files

My directory structure is as follows:

-console/
---lib/
   ---css/
       ---bootstrap.css
---app.module.js
---index.html
-src/
---_init_.py
---api.py

My code for server api.py is as follows:

from flask import (Flask, jsonify, request, abort, render_template)

app = Flask(__name__, template_folder='../console')


@app.route('/', methods=['GET'])
def index():
    return render_template('index.html')

This locates the index file with no issues, but when the index file tries to load the necessary css and js files, it fails to locate them. My current code for the basic index page is as follows:

<!DOCTYPE html>
<html ng-app="championsLeague" lang="en-US">

<head>
    <title>Champions League</title>

    <link rel="stylesheet" href="lib/css/bootstrap.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <script src="app.module.js"></script>
</head>

<body>

    <div ng-view>
        <p>test</p>
    </div>
</body>

</html>

When I start my server and navigate to my localhost, these errors appear in the console:

127.0.0.1/:7 GET http://127.0.0.1:5000/lib/css/bootstrap.css net::ERR_ABORTED 404 (NOT FOUND)
2127.0.0.1/:9 GET http://127.0.0.1:5000/app.module.js net::ERR_ABORTED 404 (NOT FOUND)
angular.js:88 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.6.9/$injector/modulerr?p0=championsLeague&p1=Error%3A%20%5B%24injector%3Anomod%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.6.9%2F%24injector%2Fnomod%3Fp0%3DchampionsLeague%0A%20%20%20%20at%20https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A7%3A76%0A%20%20%20%20at%20https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A26%3A408%0A%20%20%20%20at%20b%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A25%3A439)%0A%20%20%20%20at%20https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A26%3A182%0A%20%20%20%20at%20https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A42%3A332%0A%20%20%20%20at%20r%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A8%3A7)%0A%20%20%20%20at%20g%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A42%3A180)%0A%20%20%20%20at%20gb%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A46%3A250)%0A%20%20%20%20at%20c%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A22%3A19)%0A%20%20%20%20at%20Uc%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A22%3A332)
    at angular.js:88
    at angular.js:5023
    at r (angular.js:408)
    at g (angular.js:4983)
    at gb (angular.js:4900)
    at c (angular.js:1955)
    at Uc (angular.js:1976)
    at we (angular.js:1861)
    at angular.js:34354
    at HTMLDocument.b (angular.js:3488)

I'm assuming the angular error is being caused by the app.module.js file not being found. Any ideas on what the issue could be? It's a requirement that I use flask as my server for this task, so other servers aren't an option.

Derlin · Answer 1 · 2018-12-03T18:46:55.137

0

Your js files are not templates, but static resources. Try this:

app = Flask(__name__, 
        template_folder='../console',
        static_url_path='../console')

Another problem could be that your Flask app is in a subdirectory. It should be a the root of your application files.

More info: How to serve static files in Flask

Side note: personally I would use a slightly different structure. There are some conventions on how to structure a Flask app, as explained here:

This was really helpful to me.

edited Dec 03 '18 at 18:46

answered Dec 03 '18 at 18:38

Derlin

9,572
2
32
53

That doesn't seem to have resolved the issue unfortunately, still getting 404's on those files. I'll try restructing my directory and see if that helps – Mark O'Hare Dec 03 '18 at 18:45
I added a link to another question that should help – Derlin Dec 03 '18 at 18:47
Thanks, I'll have a look. I've restructed my app to have all the front end code within the src folder, so the flask server is higher in the directory. I'll try out some of the solutions in that answer and see what happens – Mark O'Hare Dec 03 '18 at 19:04

Python - flask server with angularjs front end, can't locate javascript or css files in index.html

1 Answers1