Sample app for Flask templates - ITP DWD week 4
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

Getting Started with Flask and Templates

Sample code

Download from Github. See demo

Quick Start

  • Download code.

  • Open code directory in Terminal console.

  • Create Virtualenv (only needs to be run once).

      virtualenv venv
  • Initial PIP requirements install / Or when you need to update Python modules after modifying requirements.txt

      . runpip

    The runpip file is a helper file and has the following commands

      . venv/bin/activate
      pip install -r requirements.txt
  • Start the Server & Activate the Virtualenv if not already active.

      . start

    The start file has the following commands

      . venv/bin/activate
      foreman start
  • If successful you can navigate to http://localhost:5000.


Templates keep your code separated from your code and vice versa. Using templates allows you to focus on the code, logic and data then pass the needed data to an HTML template.

People often call this MVC, of Model-View-Controller, where data structures (M), templates (V) and code (C) are separated into different files and directories.

Our templates are located in the /templates directory. These can be organized in directories if needed. The templates are regular HTML files

Using a template library, we can inject data into HTML with the template library specific syntax.

Flask comes ready with Jinja2 for templates. Jinja2 is easy to use and learn, simple syntax. To use templates we'll include this line at the top of,

from flask import render_template

Template example

A basic HTML template with a single variable.


	<title>My first template</title>
		<h1>{{ message }}</h1>

A Flask route, passing a variable into a template

def mainpage():
	message = 'Hello World'
	return render_template('index.html', message=message)

Template multiple variables example


	<title>My first template</title>
		<h1>{{ message }}</h1>
		<p>{{ a_sentence }}</p>

The Flask route

def mainpage():
	templateData = {
		'message' : 'Hello World',
		'a_sentence' : 'A year passed: winter changed into spring, spring changed into summer, summer changed back into winter, and winter gave spring and summer a miss and went straight on into autumn... until one day..'

	return render_template('index.html', **templateData)

The ** operator in Python will convert a dictionary into a keyword list. The ** operator does the equilivent of this,

return render_template('index.html', message = 'Hello World', a_sentence = 'A year passed....')

Jinja2 basic

You can see all of Jinja2's reference guide here,

Displaying a variable

{{ foo }}  <!-- string or int -->
{{ foo['bar'] }} <!-- bar from dictionary -->
{{ }}  <!-- bar from object -->

Loops in

{% for name in names %}
<li>{{ name }}</li>
{% endfor %}

If/Elif/Else in Jinja2

{% if price == "1.00" %}
That's cheap!

{% elif price == "50.00" %}
Eh, okay, here's $50

{% else %}
I'll pay anything.

{% endif %}

Static files in Flask apps

You can put your CSS, images, JavaScript and other static files inside /static. This directory is known to Flask as the static directory and files inside can be referenced directly. For example a file css/styles.css can be referenced


Or an image, if it exists


The static file directory can also be referenced inside your templates with a function

{{ url_for('static', filename='css/styles.css') }}
{{ url_for('static', filename='img/dog.jpg') }}