Blueprint static files in Flask - Step-by-Step Execution

Concept Flow - Blueprint static files

Create Blueprint with static_folder

↓

Register Blueprint in app

↓

Request for static file URL

↓

Flask serves static file from Blueprint folder

↓

Browser receives static file content

This flow shows how Flask uses a Blueprint's static folder to serve static files when requested.

Execution Sample

Flask

from flask import Flask, Blueprint
app = Flask(__name__)
bp = Blueprint('bp', __name__, static_folder='static')

@app.route('/')
def index():
    return '<img src="/bp/static/logo.png">'

app.register_blueprint(bp, url_prefix='/bp')

Defines a Blueprint with a static folder and uses an image from it in a route.

Execution Table

Step	Action	Blueprint State	Request URL	Response
1	Create Blueprint with static_folder='static'	bp.static_folder='static'	N/A	Blueprint ready
2	Register Blueprint 'bp' in Flask app	bp registered	N/A	App ready
3	Browser requests '/' route	bp static_folder='static'	/	HTML with <img src='/bp/static/logo.png'>
4	Browser requests '/bp/static/logo.png'	bp static_folder='static'	/bp/static/logo.png	Serve file logo.png from bp/static folder
5	Browser receives image file content	bp static_folder='static'	N/A	Image displayed on page

💡 Static file served from Blueprint's static folder, request completed.

Variable Tracker

Variable	Start	After Blueprint Creation	After Registration	After Request '/'	After Request static file
bp.static_folder	None	'static'	'static'	'static'	'static'
Request URL	None	None	None	'/'	'/bp/static/logo.png'
Response	None	Blueprint ready	App ready	HTML with img tag	Image file content

Key Moments - 3 Insights

Why do we need to set static_folder in the Blueprint?

Setting static_folder tells Flask where to find static files for that Blueprint. Without it, Flask won't serve static files from the Blueprint folder (see execution_table step 1 and 4).

Why is the static file URL prefixed with '/bp/static/'?

The URL includes the Blueprint name ('bp') as a prefix to avoid conflicts with other static files. This is shown in execution_table step 4 where the request URL is '/bp/static/logo.png'.

What happens if the static file does not exist in the Blueprint folder?

Flask will return a 404 error because it cannot find the file to serve. This would happen at step 4 if 'logo.png' is missing.

Visual Quiz - 3 Questions

Look at the execution table, what is the response when the browser requests '/bp/static/logo.png'?

A Return 404 error

B Serve file logo.png from bp/static folder

C Serve file from app static folder

D Redirect to '/' route

💡 Hint

Check execution_table row 4 under Response column

At which step does the Blueprint get registered in the Flask app?

A Step 2

B Step 3

C Step 1

D Step 4

💡 Hint

Look at execution_table Step column and Action description

If you change the Blueprint name from 'bp' to 'static_bp', how does the static file URL change?

A /static/logo.png

B /bp/static/logo.png

C /static_bp/static/logo.png

D /logo.png

💡 Hint

Blueprint name prefixes the static URL as shown in execution_table step 4

Concept Snapshot

Blueprint static files in Flask:
- Define Blueprint with static_folder='foldername'
- Register Blueprint in app
- Access static files via '/blueprint_name/static/filename'
- Flask serves files from Blueprint's static folder
- Keeps static files organized per Blueprint

Full Transcript

This visual execution trace shows how Flask Blueprints serve static files. First, a Blueprint is created with a static folder specified. Then it is registered in the Flask app. When a browser requests a route that includes an image from the Blueprint's static folder, Flask serves the file from that folder using a URL prefixed by the Blueprint name. The execution table tracks each step from Blueprint creation to serving the static file. Variable tracking shows how the static folder and request URLs change. Key moments clarify why the static folder is needed and how URLs are formed. The quiz tests understanding of the flow and URL structure. This helps beginners see how Blueprint static files work step-by-step.