Blueprint static files in Flask - Mini Project: Build & Apply

Blueprint Static Files in Flask

📖 Scenario: You are building a Flask web application that uses a blueprint to organize routes and static files separately. You want to serve static files like CSS and images from the blueprint folder.

🎯 Goal: Create a Flask blueprint named shop that serves static files from a folder called static_shop. Then register this blueprint in the main Flask app so that the static files are accessible under the URL prefix /shop/static.

📋 What You'll Learn

Create a Flask blueprint named shop with static folder static_shop

Set the static URL path of the blueprint to /shop/static

Register the shop blueprint in the main Flask app

Ensure static files are served correctly from the blueprint's static folder

💡 Why This Matters

🌍 Real World

Web applications often use blueprints to organize code and static files for different parts of the site, like admin panels or user areas.

💼 Career

Understanding blueprints and static file management is essential for building scalable Flask applications in professional web development.

1

Create the Flask blueprint with static folder

Create a Flask blueprint called shop with the static folder set to static_shop and the static URL path set to /shop/static.

Flask

# Create the shop blueprint with static folder and static URL path
# Your code here

Need a hint?

Use Blueprint constructor with parameters static_folder and static_url_path.

2

Create the main Flask app

Create a Flask app instance called app using Flask(__name__).

Flask

from flask import Flask

shop = Blueprint('shop', __name__, static_folder='static_shop', static_url_path='/shop/static')

# Create the Flask app instance
# Your code here

Need a hint?

Use Flask(__name__) to create the app instance.

3

Register the blueprint with the app

Register the shop blueprint with the app using app.register_blueprint(shop).

Flask

from flask import Flask
from flask import Blueprint

shop = Blueprint('shop', __name__, static_folder='static_shop', static_url_path='/shop/static')

app = Flask(__name__)

# Register the shop blueprint with the app
# Your code here

Need a hint?

Use app.register_blueprint(shop) to connect the blueprint to the app.

4

Add a route to the blueprint

Add a route / to the shop blueprint that returns the string 'Welcome to the Shop!'.

Flask

from flask import Flask
from flask import Blueprint

shop = Blueprint('shop', __name__, static_folder='static_shop', static_url_path='/shop/static')

app = Flask(__name__)
app.register_blueprint(shop)

# Add a route '/' to shop blueprint that returns 'Welcome to the Shop!'
# Your code here

Need a hint?

Use @shop.route('/') decorator and define a function that returns the welcome string.