Blueprint static files in Flask - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

How does Flask serve static files from a Blueprint?

Consider a Flask Blueprint named admin with a static folder configured. When you access /admin/static/logo.png, what happens?

Flask

from flask import Blueprint
admin = Blueprint('admin', __name__, static_folder='static')

A Flask serves the file located at <code>admin/static/logo.png</code> inside the Blueprint folder.

B Flask serves the file from the main app's static folder ignoring the Blueprint's static folder.

C Flask raises a 404 error because static files cannot be served from Blueprints.

D Flask serves the file only if <code>static_url_path</code> is set explicitly in the Blueprint.

💡 Hint

Blueprints can have their own static folders served under a URL path.

Blueprints in Flask can have their own static folders. Flask automatically serves static files from the Blueprint's static_folder under the URL path /blueprint_name/static/.

📝 Syntax

intermediate

Correct Blueprint static folder URL path syntax

Which option correctly sets a Blueprint named shop to serve static files under the URL path /shop-assets/?

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

B shop = Blueprint('shop', __name__, static_folder='static', static_url_path='/shop-assets')

C shop = Blueprint('shop', __name__, static_folder='static', static_url_path='shop-assets')

D shop = Blueprint('shop', __name__, static_folder='static', static_url_path='//shop-assets')

💡 Hint

The static_url_path must start with a slash to be a valid URL path.

The static_url_path parameter defines the URL prefix for static files. It must start with a slash to be valid. Option B correctly sets it to /shop-assets.

🔧 Debug

advanced

Why does Flask not serve Blueprint static files?

Given this Blueprint setup, static files are not served at /blog/static/. What is the likely cause?

blog = Blueprint('blog', __name__)

@app.route('/blog/static/')
def static_files(filename):
    return send_from_directory('static', filename)

A Blueprints cannot serve static files; static files must be served only by the main app.

B The route <code>/blog/static/&lt;path:filename&gt;</code> conflicts with Flask's default static route causing a server error.

C The Blueprint lacks <code>static_folder</code> configuration, so Flask does not serve static files automatically.

D The <code>send_from_directory</code> function is used incorrectly and raises a TypeError.

💡 Hint

Blueprints serve static files automatically only if static_folder is set.

If a Blueprint does not specify static_folder, Flask does not serve static files for it automatically. The manual route shown does not replace this behavior.

❓ state_output

advanced

What is the URL for a Blueprint static file with custom static_url_path?

A Blueprint api is created with static_folder='assets' and static_url_path='/api-static'. What URL serves the file logo.png inside assets?

Flask

api = Blueprint('api', __name__, static_folder='assets', static_url_path='/api-static')

A /api-static/logo.png

B /api/assets/logo.png

C /api/static/logo.png

D /static/api/logo.png

💡 Hint

The static_url_path defines the URL prefix for static files.

The static_url_path parameter sets the URL path prefix for the Blueprint's static files. So the file logo.png is served at /api-static/logo.png.

🧠 Conceptual

expert

Why use Blueprint static files instead of main app static folder?

What is the main advantage of serving static files from a Flask Blueprint's static folder instead of the main app's static folder?

A It enables serving static files only over HTTPS for security.

B It improves server performance by caching static files separately per Blueprint.

C It automatically compresses static files for faster delivery without extra configuration.

D It allows modular organization so each Blueprint can manage its own static assets independently.

💡 Hint

Think about how Blueprints help organize code and resources.

Blueprint static folders let each Blueprint keep its own static files. This keeps the project modular and easier to maintain, especially in large apps.

Practice

1. What is the main purpose of setting static_folder in a Flask blueprint?

easy

A. To specify the folder where the blueprint's static files are stored

B. To define the URL prefix for all routes in the blueprint

C. To register the blueprint with the Flask app

D. To set the template folder for the blueprint

Solution

1. Step 1: Understand the role of static_folder

   The static_folder parameter tells Flask where to find static files like CSS or images for that blueprint.

2. Step 2: Differentiate from other parameters

   It does not affect routes or templates; it only points to the static files directory.

3. Final Answer:

   To specify the folder where the blueprint's static files are stored -> Option A

4. Quick Check:

   static_folder = static files location [OK]

Hint: static_folder always points to static files folder [OK]

Common Mistakes:

• Confusing static_folder with template_folder
• Thinking static_folder sets URL prefix
• Assuming static_folder registers blueprint

2. Which of the following is the correct way to create a Flask blueprint with static files located in a folder named assets?

easy

A. Blueprint('bp', __name__, static_folder='assets')

B. Blueprint('bp', __name__, static_url_path='assets')

C. Blueprint('bp', __name__, template_folder='assets')

D. Blueprint('bp', __name__, static_folder='/assets')

Solution

1. Step 1: Identify correct parameter for static files folder

   The static_folder parameter sets the folder name relative to the blueprint.

2. Step 2: Check syntax correctness

   Blueprint('bp', __name__, static_folder='assets') correctly uses static_folder='assets' without a leading slash, which is correct.

3. Final Answer:

   Blueprint('bp', __name__, static_folder='assets') -> Option A

4. Quick Check:

   static_folder='assets' is correct syntax [OK]

Hint: Use static_folder='foldername' without leading slash [OK]

Common Mistakes:

• Using static_url_path instead of static_folder for folder name
• Adding leading slash in static_folder path
• Confusing template_folder with static_folder

3. Given this blueprint setup:

bp = Blueprint('bp', __name__, static_folder='static', static_url_path='/bp_static')

What URL will serve the file logo.png located inside the static folder of this blueprint?

medium

A. /static/logo.png

B. /bp_static/logo.png

C. /bp/logo.png

D. /bp_static/static/logo.png

Solution

1. Step 1: Understand static_url_path usage

   The static_url_path sets the URL prefix for serving static files of the blueprint.

2. Step 2: Combine URL prefix with filename

   Since static_url_path='/bp_static', the file logo.png is served at /bp_static/logo.png.

3. Final Answer:

   /bp_static/logo.png -> Option B

4. Quick Check:

   static_url_path + filename = URL [OK]

Hint: static_url_path sets URL prefix for blueprint static files [OK]

Common Mistakes:

• Assuming static_folder name appears in URL
• Using blueprint name as URL prefix by default
• Confusing static_url_path with static_folder

4. You have this blueprint code:

bp = Blueprint('bp', __name__, static_folder='static')

@app.route('/logo')
def logo():
    return url_for('bp.static', filename='logo.png')

When running the app, you get a BuildError. What is the likely cause?

medium

A. The filename logo.png does not exist

B. The static_folder path is incorrect

C. The url_for call should use 'static' instead of 'bp.static'

D. The blueprint bp was not registered with the Flask app

Solution

1. Step 1: Understand BuildError in url_for

   A BuildError means Flask cannot find the endpoint named bp.static.

2. Step 2: Check blueprint registration

   If the blueprint bp is not registered with the app, its static endpoint won't exist, causing the error.

3. Final Answer:

   The blueprint bp was not registered with the Flask app -> Option D

4. Quick Check:

   Unregistered blueprint causes BuildError [OK]

Hint: Always register blueprint before using its static endpoint [OK]

Common Mistakes:

• Forgetting to register blueprint with app
• Using wrong endpoint name in url_for
• Assuming file existence causes BuildError

5. You want to serve static files from two blueprints: bp1 with static files in static1 folder and URL prefix /static1, and bp2 with static files in static2 folder and URL prefix /static2. How do you correctly set up both blueprints to avoid URL conflicts and serve files properly?

hard

A. Set static_folder only for bp1 and leave bp2 without static files.

B. Use the same static_url_path for both blueprints but different static_folder names.

C. Set static_folder='static1' and static_url_path='/static1' for bp1, and static_folder='static2' and static_url_path='/static2' for bp2, then register both blueprints.

D. Register both blueprints without setting static_url_path to use default static URL.

Solution

1. Step 1: Avoid URL conflicts by setting unique static_url_path

   Each blueprint must have a unique static_url_path to prevent URL clashes.

2. Step 2: Assign correct static_folder for each blueprint

   Set static_folder to the folder containing that blueprint's static files.

3. Step 3: Register both blueprints with the app

   Only after registration will the static files be served at their URL prefixes.

4. Final Answer:

   Set static_folder='static1' and static_url_path='/static1' for bp1, and static_folder='static2' and static_url_path='/static2' for bp2, then register both blueprints. -> Option C

5. Quick Check:

   Unique static_url_path + correct static_folder + registration = correct setup [OK]

Hint: Use unique static_url_path for each blueprint's static files [OK]

Common Mistakes:

• Using same static_url_path for multiple blueprints
• Not setting static_url_path causing conflicts
• Forgetting to register blueprints