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

Need a 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

Need a 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

Need a 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

Need a hint?

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