Serving JavaScript files in Flask - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output when serving a JavaScript file with Flask static folder?

Given this Flask app setup, what will the browser receive when requesting /static/app.js?

Flask

from flask import Flask
app = Flask(__name__)

# Assume 'static/app.js' contains: console.log('Hello from JS');

if __name__ == '__main__':
    app.run()

A Flask returns a 404 error because static files are not served by default.

B The browser receives the JavaScript file content: console.log('Hello from JS');

C The browser receives an HTML page with the text 'Hello from JS'.

D Flask returns a 500 internal server error due to missing route.

💡 Hint

Flask automatically serves files from the 'static' folder at the '/static' URL path.

Flask by default serves files placed in the 'static' folder when requested via '/static/filename'. So requesting '/static/app.js' returns the JavaScript file content.

📝 Syntax

intermediate

Which Flask route correctly serves a JavaScript file from a custom folder?

You want to serve JavaScript files from a folder named 'js' inside your project root. Which route code correctly serves the file filename?

A

@app.route('/js/<filename>')
def serve_js(filename):
    return redirect('/static/js/' + filename)

B

@app.route('/js/<filename>')
def serve_js(filename):
    return open('js/' + filename).read()

C

@app.route('/js/<filename>')
def serve_js(filename):
    return send_file('js/' + filename)

D

from flask import send_from_directory
@app.route('/js/<path:filename>')
def serve_js(filename):
    return send_from_directory('js', filename)

💡 Hint

Use Flask's send_from_directory to serve files from a folder.

send_from_directory safely serves files from a folder. Option D uses it correctly with the route parameter as a path to allow subfolders.

🔧 Debug

advanced

Why does this Flask app fail to serve JavaScript files from 'static' folder?

Consider this Flask app code snippet: from flask import Flask app = Flask(__name__, static_folder='assets') # JavaScript file is located at 'assets/app.js' if __name__ == '__main__': app.run() When requesting '/static/app.js', the browser gets a 404 error. Why?

A Because the static_folder is set to 'assets', Flask serves static files at '/assets', not '/static'.

B Because Flask requires a route to serve static files explicitly when static_folder is set.

C Because the JavaScript file must be inside a folder named 'static' for Flask to serve it.

D Because the app.run() call is missing debug=True to enable static serving.

💡 Hint

Changing static_folder changes the URL path prefix for static files.

When you set static_folder='assets', Flask serves files from 'assets' folder at the URL path '/assets', not '/static'. So requesting '/static/app.js' returns 404.

❓ state_output

advanced

What is the Content-Type header when Flask serves a JavaScript file?

If Flask serves a file named 'script.js' from the static folder, what is the Content-Type header sent to the browser?

A application/javascript

B text/html

C text/plain

D application/json

💡 Hint

Browsers expect JavaScript files to have a specific MIME type.

Flask uses mimetypes to set Content-Type headers. For '.js' files, it sets 'application/javascript' so browsers treat it as JavaScript.

🧠 Conceptual

expert

How to serve versioned JavaScript files to avoid browser caching in Flask?

You want to serve JavaScript files with a version query parameter like /static/app.js?v=123 to force browsers to reload updated files. Which approach is best in Flask?

A Rename the JavaScript file on disk every time you update it and serve it normally.

B Set a custom route to serve JavaScript files and ignore query parameters to always reload.

C Use Flask's <code>url_for('static', filename='app.js', v='123')</code> to generate URLs with version query parameters.

D Disable browser caching globally in Flask by setting response headers for all static files.

💡 Hint

Flask's url_for can add query parameters to static file URLs.

Using url_for with extra query parameters adds versioning info to URLs, which browsers treat as new resources, forcing reloads without renaming files or disabling caching globally.