Blueprint routes and templates in Flask - Mini Project: Build & Apply

Blueprint Routes and Templates in Flask

📖 Scenario: You are building a simple Flask web app that has a main page and a user page. To keep your code organized, you want to use a Blueprint for the user-related routes and templates.

🎯 Goal: Create a Flask Blueprint named user_bp with a route /profile that renders a template profile.html. Also, set up the main Flask app to register this Blueprint and render a home page at /.

📋 What You'll Learn

Create a Flask Blueprint called user_bp in a separate module

Define a route /profile inside user_bp that renders profile.html

Create a simple profile.html template with a heading

In the main app, register the user_bp Blueprint

Define a route / in the main app that renders home.html

Create a simple home.html template with a welcome message

💡 Why This Matters

🌍 Real World

Blueprints help organize larger Flask apps by grouping related routes and templates, making code easier to maintain.

💼 Career

Understanding Blueprints is essential for backend web developers working with Flask to build scalable and modular web applications.

1

Create the Blueprint and its route

In a file named user.py, create a Flask Blueprint called user_bp. Define a route /profile inside user_bp that returns render_template('profile.html').

Flask

# Your code here to create user_bp Blueprint and /profile route

Hint

Use Blueprint from flask and set template_folder='templates' to locate templates.

2

Create the profile.html template

Create a file named templates/profile.html. Add a simple HTML page with a heading <h1>User Profile</h1>.

Flask

from flask import Blueprint, render_template

user_bp = Blueprint('user_bp', __name__, template_folder='templates')

@user_bp.route('/profile')
def profile():
    return render_template('profile.html')

# Create templates/profile.html with a heading User Profile

Hint

Use a basic HTML5 structure with a heading inside the body.

3

Set up the main Flask app and register the Blueprint

In app.py, create a Flask app instance. Import and register the user_bp Blueprint. Define a route / that returns render_template('home.html').

Flask

from flask import Flask, render_template
from user import user_bp

app = Flask(__name__)

# Register the user_bp Blueprint

# Define the / route to render home.html

# Your code here

Hint

Import Flask and render_template. Use app.register_blueprint(user_bp) to add the Blueprint.

4

Create the home.html template

Create a file named templates/home.html. Add a simple HTML page with a heading <h1>Welcome to the Home Page</h1>.

Flask

from flask import Flask, render_template
from user import user_bp

app = Flask(__name__)

app.register_blueprint(user_bp)

@app.route('/')
def home():
    return render_template('home.html')

# Create templates/home.html with a heading Welcome to the Home Page

Hint

Use a basic HTML5 page with a heading inside the body.

Practice

1. What is the main purpose of using a Blueprint in a Flask application?

easy

A. To handle user authentication automatically

B. To organize routes and templates into reusable components

C. To create a new Flask app instance

D. To connect Flask with a database

Solution

1. Step 1: Understand Blueprint role

   A Blueprint groups related routes and templates to keep code organized.

2. Step 2: Compare other options

   Connecting to databases, creating app instances, or handling authentication are separate tasks.

3. Final Answer:

   To organize routes and templates into reusable components -> Option B

4. Quick Check:

   Blueprint = organize routes/templates [OK]

Hint: Blueprints group routes/templates for better app structure [OK]

Common Mistakes:

• Thinking Blueprint creates the app instance
• Confusing Blueprint with database connection
• Assuming Blueprint handles authentication automatically

2. Which of the following is the correct way to register a Blueprint named blog with a Flask app app using the URL prefix /blog?

easy

A. app.register_blueprint(blog, url_prefix='/blog')

B. app.register_blueprint('/blog', blog)

C. app.register_blueprint(blog.prefix('/blog'))

D. app.register_blueprint(blog, prefix_url='/blog')

Solution

1. Step 1: Recall correct method signature

   The method is register_blueprint(blueprint, url_prefix='...').

2. Step 2: Check options for correct syntax

   Only app.register_blueprint(blog, url_prefix='/blog') uses the correct method and parameter names.

3. Final Answer:

   app.register_blueprint(blog, url_prefix='/blog') -> Option A

4. Quick Check:

   register_blueprint with url_prefix = app.register_blueprint(blog, url_prefix='/blog') [OK]

Hint: Use url_prefix parameter to set Blueprint URL base [OK]

Common Mistakes:

• Swapping parameter order
• Using wrong parameter name like prefix_url
• Calling prefix as a method on Blueprint

3. Given this Blueprint code:

from flask import Blueprint, render_template
blog = Blueprint('blog', __name__, template_folder='templates')

@blog.route('/post')
def show_post():
    return render_template('post.html')

And this main app code:

from flask import Flask
app = Flask(__name__)
app.register_blueprint(blog, url_prefix='/blog')

What URL should you visit to see the post.html template rendered?

medium

A. /blog

B. /post

C. /blog/post

D. /post/blog

Solution

1. Step 1: Understand route and url_prefix

   The Blueprint route is '/post', and the Blueprint is registered with prefix '/blog'.

2. Step 2: Combine prefix and route

   The full URL becomes '/blog/post' to access the route.

3. Final Answer:

   /blog/post -> Option C

4. Quick Check:

   url_prefix + route = /blog/post [OK]

Hint: Combine url_prefix and route for full URL [OK]

Common Mistakes:

• Ignoring url_prefix and using only route
• Swapping url_prefix and route order
• Assuming url_prefix is not added to route

4. What is wrong with this Blueprint registration code?

from flask import Flask
app = Flask(__name__)
app.register_blueprint(blog, prefix='/blog')

medium

A. You cannot register blueprints in Flask

B. Blueprint must be registered before app creation

C. Blueprint name must be 'app' to register

D. The parameter should be url_prefix, not prefix

Solution

1. Step 1: Check parameter name in register_blueprint

   The correct parameter to set URL prefix is url_prefix, not prefix.

2. Step 2: Validate other options

   Blueprints register after app creation; name can be anything; Flask supports blueprints.

3. Final Answer:

   The parameter should be url_prefix, not prefix -> Option D

4. Quick Check:

   Correct param is url_prefix [OK]

Hint: Use url_prefix, not prefix, when registering Blueprint [OK]

Common Mistakes:

• Using prefix instead of url_prefix
• Trying to register Blueprint before app exists
• Thinking Blueprint name must be 'app'

5. You have two Blueprints, admin and user, both with a route /dashboard. How can you register them in your Flask app to avoid URL conflicts and keep URLs clear?

hard

A. Register each Blueprint with a different url_prefix, like /admin and /user

B. Rename one Blueprint's route to /dashboard2

C. Register both Blueprints without any url_prefix

D. Use the same url_prefix for both Blueprints

Solution

1. Step 1: Understand URL conflicts

   Both Blueprints have the same route /dashboard, which causes conflicts if no prefix is used.

2. Step 2: Use url_prefix to separate routes

   Assigning different url_prefix values like /admin and /user keeps URLs unique and organized.

3. Final Answer:

   Register each Blueprint with a different url_prefix, like /admin and /user -> Option A

4. Quick Check:

   Different url_prefix avoids route conflicts [OK]

Hint: Use unique url_prefix for each Blueprint to avoid conflicts [OK]

Common Mistakes:

• Not using url_prefix and causing route clashes
• Renaming routes manually instead of using prefixes
• Using same url_prefix for multiple Blueprints