Hi everyone.

Today is a the 17th day of me learning Flask.

A lot of time passed since my last post about building a Flask MVP.

As I stated on my 9th day, I went to 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.

But today, after main page is finished, I want to add 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 url template tag.

After googling for 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 corresponding view exists.

Flask is really smart, but that means I have to create missing view first, before I can work on my template.

Let’s create new subfolder “about” in “templates” folder.

I will store all template snippets used in about us page there.

Also I create new view in routes.py file.

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

Next, create new html template file aboutLayout.html in 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 an another exception.

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

Really, so the template link must be named the same way as corresponding view?

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

{{ url_for('about') }}

Beautiful.

Now I can finally see my about us page.

Yeah, if I read official Flask documentation before hand, 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 is always start with view and routes first, then work on templates.

Also 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.

Share it!