Hi everyone.

Today is the 17th day of my Flask journey. A lot of time passed since my last post about building a Flask MVP.

My Flask MVP progress

As I stated on my 9th day, I went to a completely silent development mode, so I could finish Flask MVP without any distractions.

I planned to keep it that way until I finish my Flask MVP, but today, I faced some beginner issues with creating new routes, views, and pages in Flask.

I thought it might be interesting for you to learn from my mistakes. My progress from day 10th to day 16th was purely HTML - CSS - Bootstrap 4 design-wise.

Financia Preview 2

Using an URL tag in Flask template

But today, after the main page is finished, I want to add a new page. An About Us page, that will provide basic information about who am I and why I did this MVP.

Let's start by adding a link to about us page to the header menu.

{% url 'about-us' %}

Which results in an error.

jinja2.exceptions.TemplateSyntaxError: Encountered unknown tag 'url’.

How come I never make it work on the first try :) Maybe my Jinja2 template tag syntax is wrong.

Try to use different closing brackets.

{{ url 'about-us' }}

This will throw an error as well.

jinja2.exceptions.TemplateSyntaxError: expected token 'end of print statement', got ‘string'

Seems like Flask is not aware of a URL template tag.

After googling for a few minutes I found the correct Jinja2 template tag for creating links.

{{ url_for('about-us') }}

I had high hopes, but there is still some error.

werkzeug.routing.BuildError: Could not build url for endpoint 'about us'. Did you mean 'fontawesome.static' instead?

I understand, that Flask looks at the link and tries to check if the corresponding view exists. Flask is smart, but that means I have to create a missing view first before I can work on my template.

Adding new Flask route and template

Let's create a new subfolder "about" in the "templates" folder. I will store all template snippets used in about us page there.

Also, I create a new view in routes.py file.

@app.route('/about-us/', methods=['GET', 'POST'])
def about():
    return render_template('about/aboutLayout.html')

Next, create a new HTML template file aboutLayout.html in a recently created folder.

Then fill it with some dummy content.

{% extends 'index.html' %}
{% block content %}

<section class="container">
    <div class="jumbotron bg-white pb-0">
        ABOUT US
    </div>
</section>

{% endblock %}

Restart Gunicorn and test our new about us page.

Still nothing.

Flask throws another exception.

werkzeug.routing.BuildError: Could not build url for endpoint 'about-us'. Did you mean 'about' instead?

So the template link must be named the same way as the corresponding view?

Okay then, let's edit our link in the header menu.

{{ url_for('about') }}

Beautiful.

Now I can finally see my about us page.

Yeah, if I read official Flask documentation beforehand, then I could save myself a lot of time. But I know better. It is better to execute now and solve issues on the fly than read a theory and plan every future step and eventually never execute.

So the main lesson today always starts with view and routes first, then work on templates. Also, the template link name must be equal to the view name.

So that is all folks. I hope this is not my last development diary for Flask MVP.

See you in the next post.

Building MVP with Flask Day 10-17 – Adding Flask Routes

My Flask MVP progress

Using an URL tag in Flask template

Adding new Flask route and template