Flask for Beginners: Understanding Routes and HTML Templates

In this tutorial on Flask Routes and Templates, we’ll go beyond returning a simple text string. In our previous tutorial, you built a Flask app that returns a simple text string. But real websites have many pages and use HTML to look good.

Today, we’ll upgrade your app with two core Flask concepts: Dynamic Routes and Templates. These are essential for managing Flask routes effectively.

Part 1: Dynamic Routes (Making Smart URLs)

A “route” is just a URL on your site (like /about or /contact).

In Flask, you create routes using the @app.route() decorator, essential for effective route management.

Static Routes

These are simple, fixed URLs.

@app.route("/about")
def about_page():
    return "This is the About Page."

Dynamic Routes (Variables in URLs)

What if you want a profile page for every user, like /user/alice or /user/bob? You don’t want to write a separate function for each person!

You can put variables in the URL using . This showcases how flexible Flask routes can be.

@app.route("/user/<username>")
def user_profile(username):
    return f"Hello, {username}! Welcome to your profile."</username>

Now, if you visit /user/alice, Flask will pass “alice” to the function, and it will return “Hello, alice!”.

Part 2: Templates (Using Real HTML)

Returning raw strings is ugly. We want to return full HTML pages. Flask uses a template engine called Jinja2 to do this. Templates are integral to building Flask apps.

Step 1: The templates Folder

Flask looks for HTML files in a specific folder. Consider this when designing your Flask template system.

1. Create a new folder named templates right next to your app.py file.
2. Inside that folder, create a file named index.html.

templates/index.html content:

    <title>My Flask Site</title>


    <h1>Welcome to my Home Page!</h1>
    <p>This HTML file is being served by Flask.</p>

Step 2: Rendering the Template

Now, update your app.py to use render_template. This integrates Flask routes seamlessly with templates.

from flask import Flask, render_template  # Import render_template

app = Flask(__name__)

@app.route("/")
def home():
    # Tell Flask to look in the 'templates' folder for this file
    return render_template("index.html")

if __name__ == "__main__":
    app.run(debug=True)

When you run your app and visit /, you’ll see your nice HTML page!

Part 3: Passing Data to Templates (The Magic of Jinja2)

The real power of templates is that you can inject Python variables into your HTML. This demonstrates the synergy between Flask templates and routes.

Update your app.py:

@app.route("/hello/<name>")
def hello(name):
    # Pass the 'name' variable to the template
    return render_template("hello.html", user_name=name)

Create templates/hello.html:

<h1>Hello, {{ user_name }}!</h1>
<p>Welcome to our site.</p>

The {{ user_name }} is Jinja2 syntax. It tells Flask: “Put the value of the user_name variable right here.”

Conclusion

You’ve just unlocked the ability to build real websites. Mastery of Flask routes and templates greatly enhances your web development capabilities.

• Routes let you create many different pages.
• Templates let you use HTML to make them look great.
• Jinja2 lets you combine them by putting Python data into your HTML.