Flask - (2)

Templates and static files.

2019-12-24
by cS


Ok, so we have the application object and we are ready to make the templates for our routes; refer to this previous post if you need the code to create a flask app first.

On the previous post we had set app.static_folder and app.templates_folder as properties of the app object, the app object now is aware that there must be two folders in the same directory as the app.py file, one for static assets and the other for html templates.

This is what the directory structure that contains the app.py file could look like.

my_site 
    - app.py
    - static 
        - js 
            - main.js
        - css 
            - main.css
        - img 
    - templates 
        - inc 
        - index.html
        - home.html

We will get to the includes folder lates once we touch on template inheritance, for now create that structure and open the index.html file. We are trying to load one stylesheet from the static/css, and one javascript file from static/js, we will load the stylesheet at the head of the document, and the script and the bottom, unless you have toggled with videogames code you know load order matters, same rolls for the browser.

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <title>My site</title>
    <!--
        we will call the bultin template function url_for, which is included by flask and jinja, 
        the template engine.url_for takes two parametes, the static folder and the filename, 
    -->
    <link rel="stylesheet" href="{{  url_for('static', filename='css/main.css') }}">
  </head>
  <body style="background-color: black; color: white;">
    <div class="main-wrapper">
        <!-- we will be injecting the content of every other site page in bewtween this block of content -->
        {% block content %} {% endblock %}
    </div>
    <!-- we load the js at the end so that the document is ready to be manipulated -->
    <script src="{{  url_for('static', filename='js/main.js') }}"></script>
  </body>
</html>

The url_for() function comes in very handy, as you can tell, and, it is available to us in all of our apps templates, automatically.

Ok, but now what do we do, well we are going to use one line of jinja2 to make that index site reusable, this is called template inheritance, and it is great because it saves us time, we want to be lazy when writing code.

Open home.html and copy and paste the code.

{% extends 'index.html' %}

{% block content %}
    <h3 style="color: white;"> Some content </h3>
{% endblock %}

Thats it, extends will pull the base template index.html and then anything that falls in betwee the block content and end block tags will be injected to the base template; what is cool is that we can use all sorts of blocks to alter different parts of the document we are rendering.

Render a template from within the app objects route index.

# we start by importing render_template
from flask import render_template

. . .
. . .
. . .


# The render template function takes a template_list_or_name keyword argument,
# The route, first param -- url string, will go over that later.
# The methods takes an iterable of http methods, tuples are ok.
# - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

@app.route("/", methods=("GET",)) 
def index():

    # return render_template with the home.html template.
    return render_template("home.html")

. . .
. . .
. . .

Start the server again by heading to the main directory and executing the app.py file, the DEBUG constant and the rest of the configuration settings need to be True, refer to this previous post if you need.

python<version> app.py

If you head over to 127.0.0.1:8080 or whatever port you use, you should see the h3 and the black background.

The next part of the tutorial is about response headers, setting them in the response.