Serving HTML+CSS+JS(angular) with flask

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

Solution

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>