Why static file serving matters in Flask - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to serve static files in a Flask app.

Flask

from flask import Flask
app = Flask(__name__, static_folder=[1])

@app.route('/')
def home():
    return 'Welcome!'

Drag options to blanks, or click blank then click option'

A'templates'

B'static'

C'assets'

D'files'

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'templates' instead of 'static' for static files folder.

The static_folder parameter tells Flask where to find static files like CSS and images. The default folder is static.

2fill in blank

medium

Complete the code to link a CSS file from the static folder in an HTML template.

Flask

<link rel="stylesheet" href="{{ url_for('static', filename=[1]) }}">

Drag options to blanks, or click blank then click option'

A'style.css'

B'index.html'

C'app.py'

D'script.js'

Attempts:

3 left

💡 Hint

Common Mistakes

Using HTML or Python files instead of CSS file names.

The url_for('static', filename='style.css') generates the URL for the CSS file inside the static folder.

3fill in blank

hard

Fix the error in the Flask route to serve a static image file.

Flask

@app.route('/image')
def image():
    return app.send_static_file([1])

Drag options to blanks, or click blank then click option'

A'/image.png'

Bimage.png

C'/static/image.png'

D'image.png'

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting quotes around the filename string.

Including the '/static/' prefix in the filename.

The send_static_file method expects the filename as a string relative to the static folder, so quotes are needed.

4fill in blank

hard

Fill both blanks to create a dictionary comprehension that maps filenames to their sizes for files in the static folder.

Flask

sizes = {file: os.path.getsize(os.path.join(app.static_folder, [1])) for file in os.listdir(app.static_folder) if file.endswith([2])}

Drag options to blanks, or click blank then click option'

Afile

B'.png'

C'.jpg'

D'static'

Attempts:

3 left

💡 Hint

Common Mistakes

Using folder names instead of filenames in path join.

Using wrong file extensions.

The comprehension uses file to join the path and filters files ending with '.png'.

5fill in blank

hard

Fill all three blanks to create a Flask route that serves a static JavaScript file with caching headers.

Flask

@app.route('/js/<filename>')
def serve_js(filename):
    response = app.send_static_file([1])
    response.headers['Cache-Control'] = [2]
    response.headers['Content-Type'] = [3]
    return response

Drag options to blanks, or click blank then click option'

Afilename

B'max-age=3600'

C'application/javascript'

D'script.js'

Attempts:

3 left

💡 Hint

Common Mistakes

Using a fixed filename instead of the variable.

Wrong content type string.

Missing quotes around header values.

The route sends the requested file by filename, sets caching to one hour, and sets the content type to JavaScript.