Flask: Adding Templates and Introduction to Jinja2

Hello 👋

Welcome to another post of mine about Flask. In the previous article, we saw how to make a simple Hello World app on Flask and setting up the virtual environment, and firing up the development server to display the output.

This time we dive into a little more detail about how HTML files, which are called templates in Flask lingo, and stylesheets tie in with the python driver code to run the app and add a different dimension in which the app can grow.

Templates and how to use them

As I mentioned before, templates are simply HTML files that become the canvas for your Flask app to display itself on. These templates, then connect with css files of your choice and they give rise to detailed, interactive and responsive front end which doesnt really affect the performance of the app but it definitely helps maintain the aesthetic.

So, how do you add these templates? Just head over to your project directory and in it, create a folder named templates. In the directory you just created, create a new file: filename.html. Now, this is where you write HTML code for your app and add elements to it. I would suggest you build from the boilerplate HTML code and then pick it up from there.

Now, head over to app.py and import url_for and render_template along side Flask, which should look something like this:

from flask import Flask, url_for, render_template

(We'll get to the url_for part in just a moment)

Now, paste the following code📝:

@app.route('/')
def index():
      return render_tempate('filename.html')

This part is pretty simple. The render_template keyword does exactly what it looks like it does. It renders the template and displays the template file mentioned along with the render_template command.

Now, at this point, you might want to link the css file to the template. Create a subdirectory in your project directory and name it static. In it, create yet another sub directory and name it css. Here, create a css file: file-name.css. Lastly, in the HTML file, insert this line in the boilerplate code📝:

<link href = "{{ url_for('static', filename='css/file-name.css')  }} "  rel = "stylesheet">

You must be wondering why we used the keyword url_for and went to the trouble of importing it when we could've so easily achieved the same target with the conventional way. The documentation of Flask puts it better than I could, so here it is, straight from the horse's mouth-

To build a URL to a specific function, use the url_for() function. It accepts the name of the function as its first argument and any number of keyword arguments, each corresponding to a variable part of the URL rule. Unknown variable parts are appended to the URL as query parameters.

Enter Jinja2

Jinja2 is a templating engine that comes built in when you install Flask. It basically provides you an option to Python-ise your HTML code, play with variables and move data using conditional statements. Consider Jinja2 to be the lifeline of your Flask app.

In the code block we saw above, where we linked the css file to the template, we actually used the Jinja2 syntax.

Here's something you should keep in mind when implementing Jinja2 syntax:

{{ variable_name }} - Use this when you need to substitute variable values

{% code_statement %}{% endblock %} - Use this when you need to add conditional statements or code

Using a base template for other HTML files

You must have observed how if you add a lot of HTML elements in your main template it starts to become cluttered, difficult to manage, and just plain unwelcoming. So, to solve this problem and keep everything you want to focus on in one place, in the templates directory, make a file called base.html.

This file will serve as the base for your templates and will soon become a reusable component. Now, move all of the code from the main template to base.html and cut out the code in the body tag. In the place of the code you just cleared out, paste📝:

{% block body %}{% endblock %}

Then in the now empty filename.html, paste the following code📝:

{% extends 'base.html' %}

{% block body %}
<!--insert code from body tag here-- >
{% endblock %}

This makes your code appear cleaner and also makes it reusable. Other templates can also use the base.html with the same command and draw sources and scripts from the base.

Go ahead and play around with Jinja2 to see what else you can uncover for yourself.

Coming up next: How to build a To-do List App on Flask

That is it for this time. Till then, experiment with what we just made, and try to build something for yourself.