Serving HTML+CSS+JS(angular) with flask

Question

What i want to do is, just send down the HTML+css+js files as static pages on some routes like:

@app.route('/', methods=[GET])
def index():
  return <html+css+js>

Particularly i would like to stay away from templates, and rely on ajax/websocket connecting to other routes of the flask app to get the JSON objects and update the webpage. Also I had a hard time in linking css and js files in html. The url_for method seems to completely rely on template system and doesn't seem to work properly in my case.

eg.

Directory Structure

redirect-server(app home folder)
- static
- index.html
- main.js
- venv(python3 virtualenv)
- main.py(flask app)

main.py

from flask import Flask, redirect
from flask import render_template

app = Flask(__name__)

@app.route('/')
def index():
    return redirect("/abc/xyz")

@app.route('/abc/xyz')
def abc():
    return app.send_static_file("index.html")

app.run(debug=True)

index.html

<!DOCTYPE html>

<html>
    <head>
        <title>Hello</title>
        <script type="text/javascript" src="{{ url_for('static', filename='main.js') }}"></script>
    </head>
    <body>
        <h1>Welcome!</h1>
    </body>
</html>

The error I get is the following

127.0.0.1 - - [28/Oct/2015 14:07:02] "GET /abc/%7B%7B%20url_for('static',%20filename='main.js')%20%7D%7D HTTP/1.1" 404 -

The HTML is returned fine but it cannot find the js file

decltype_auto · Answer 1 · 2015-10-28T11:28:50.473

0

You send the template as a static file.

app.send_static_file("index.html")

Better render it, as shown in the docs :)

edited Oct 28 '15 at 11:28

answered Oct 28 '15 at 10:31

decltype_auto

1,706
10
19

Already mentioned it above that linking it with js is not working – Ishan Khare Oct 28 '15 at 16:14
@IshanKhare: Substituting such template expressions **on the server** is exactly how flask, Django, Mason, Catalyst et al. work, and working against that paradigm mechanism has little to zero chances to succeed, let alone deliver maintainable code. Could you elaborate what symptoms exactly you try to express by "linking it [?] with js' is not working"? – decltype_auto Oct 28 '15 at 17:18
@IshanKhare Did it. And it appears you did as well, because from your own answer it appears you spotted that "127.0.0.1 - - [28/Oct/2015 14:07:02] "GET /abc/%7B%7B%20url_for('static',%20filename='main.js')%20%7D%7D HTTP/1.1" 404 -" is just the server log's way to tell you what I told you in prose. – decltype_auto Oct 29 '15 at 15:52
the `render_template` won't work because anywhere i use {{ }} for angular, jinja templates will raise an error trying to parse it as a template expression – Ishan Khare Oct 29 '15 at 17:06

score 0 · Accepted Answer · answered Oct 29 '15 at 08:05

there is no way i could find this to work without relying on templates.

The following worked for me

restructuring my directories as follows

redirect-server
- static
  - main.js
- templates
  - index.html
- main.py

main.py

from flask import Flask, redirect
from flask import render_template

app = Flask(__name__)

@app.route('/')
def index():
    return redirect("/abc/xyz")

@app.route('/abc/xyz')
def abc():
    return render_template("index.html")

app.run(debug=True)

index.html

<!DOCTYPE html>

<html>
    <head>
        <title>Hello</title>
        <script type="text/javascript" src="{{ url_for('static', filename='main.js') }}"></script>
    </head>
    <body>
        <h1>Welcome!</h1>
    </body>
</html>

Serving HTML+CSS+JS(angular) with flask

2 Answers2