Files and Templates

Instead of typing our HTML markup into the return statements, we can use the render_template() function:

from flask import Flask
from flask import render_template
app = Flask(__name__)

@app.route("/about")
def about():
    return render_template("about-us.html")

if __name__ == "__main__":
    app.run(host="0.0.0.0", port=80, debug=True)

This will use our template file about-us.html. To ensure our application can find this file we must organize our directory in the following format:

- application.py
/templates
    - about-us.html
    - login-form.html
/static
    /styles
        - about-style.css
        - login-style.css
    /scripts
        - about-script.js
        - login-script.js

Most importantly, references to these files in the HTML must look like this:

<link rel="stylesheet" type="text/css", href="{{url_for('static', filename='styles/about-style.css')}}">

which will direct the application to look for about-style.css in the styles folder under the static folder. The same format of path applies to all references to images, styles, scripts, or files.