Using Jinja templates in FastAPI

To get started, we need to install the Jinja package and create a new folder, templates, in our project directory. This folder will store all our Jinja files, which are HTML files mixed with Jinja’s syntax. Since this book does not focus on user interface design, we will be making use of the CSS Bootstrap library and avoid writing our own styles.

The Bootstrap library will be downloaded from the CDN upon page load. However, extra assets can be stored in a different folder. We will look into serving static files in the next chapter.

We’ll start by creating the homepage template, which will house the section for creating new todos. The following is a mockup of how we want our homepage template to look:

Figure 4.1 – Mockup of our homepage template

1. First, let’s install the Jinja package and create the templates folder:

   (venv)$ pip install jinja2
   (venv)$ mkdir templates

2. In the newly created...