How To Use Flask Page Templates

Sharing is caring 🙂

The last tutorial taught us how to set up some routes in Flask and in this tutorial we’ll see how page templates work in Flask. The original routes we created returned simple strings to the web browser when visiting a given route. Strings are not enough to create a website, we need things like HTML, CSS, and maybe some JavaScript to create more robust pages for our users. It’s not feasible to put all of that code into one long string and return that. This is where page templates come in when using Flask. Page templates will allow us to store all the HTML and associated data in a separate HTML file that can then be loaded via one line. Let’s learn a bit more about Jinja Page Templates in Flask.

Where To Put Flask Templates

In order to use page templates with your Flask application, you need to store them somewhere. This is done by creating a templates directory in the same directory that holds the app.py file. In our example, this is in a folder named flask-tutorial so that is where we will create this directory now.

Flask Templates Folder

How To Make a Flask HTML Template

Inside of the templates folder, we can create and store the HTML files that will act as the templates for the application. Let’s go ahead and create a new home.html file inside of the templates directory now.

HTML file inside templates folder

We can add some simple HTML markup to this new home.html file like so.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Homepage</title>
</head>
<body>
<h1>Hello Home Page!</h1>
</body>
</html>

How To Render A Flask Template

Now that we have an actual HTML file with some markup in it, how can we render or display that template to a user of the website? We can do this by changing the code in our app.py file to make use of the render_template() function. In the following code snippet, we import the needed function and then use it in our home route. Note that the render_template() function expects to be passed the name of the template that we want to render. In our case, that means we are passing home.html to the render_template() function.

from flask import Flask, render_template

app = Flask(__name__)


@app.route('/')
def home():
    return render_template('home.html')


@app.route('/about')
def about():
    return 'This is a tutorial Flask app on serving routes'

Looking Good!
Flask Render Template

Jinja Templates

This templating functionality is provided by Jinja, which is a powerful template engine that was created by the same people responsible for Flask. Jinja is also used in other projects besides Flask. It is quite popular, and there are many different options and functionality that you can use with Jinja. You can check out the Jinja website for more details about its features and use cases.

Passing Data To Templates

In the example above, we can see how to load a static HTML file using Jinja Templates and Flask via the render_template() function. We can also pass some data from the app.py file into the template file during rendering. This is important because it is how we can create dynamic pages that change based on the data that is passed to them. Let’s update both the app.py file and the home.html file to see how to pass this data and display it in the browser. First up, let’s see the change in app.py.

from flask import Flask, render_template

app = Flask(__name__)


@app.route('/')
def home():
    return render_template('home.html', name='Jinja')


@app.route('/about')
def about():
    return 'This is a tutorial Flask app on serving routes'

Notice that the render_template() function now has a second argument of name passed to it. In this case, we have set the value to ‘Jinja’.

Template Interpolation

How can we take this variable ‘name’ that we specified and access it inside of the template? In Jinja, you can use two curly brackets, then type out the name of your variable, which in this case is ‘name’, and then two ending curly brackets. This is a form of interpolation where what happens is the value of the variable is displayed, not the name of the variable. So here is our updated home.html file that makes use of the curly brackets in Jinja.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Homepage</title>
</head>
<body>
<h1>Hello {{ name }}!</h1>
</body>
</html>

Now when the homepage is loaded, we can see that the value of ‘Jinja’ which was passed from the app.py file to the home.html file is displayed on the screen.

pass variable to flask template

Changing Values In App.py

In order to solidify this concept, let’s try a couple of different values in the app.py file for the ‘name’ variable. We will leave the home.html file untouched, only the variable contents are being updated here.

from flask import Flask, render_template

app = Flask(__name__)


@app.route('/')
def home():
    return render_template('home.html', name='Flask')


@app.route('/about')
def about():
    return 'This is a tutorial Flask app on serving routes'

flask template variable

from flask import Flask, render_template

app = Flask(__name__)


@app.route('/')
def home():
    return render_template('home.html', name='Friend')


@app.route('/about')
def about():
    return 'This is a tutorial Flask app on serving routes'

testing flask template variable