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.

Practice

1. In Flask, where should you place your JavaScript files so they can be served correctly to the browser?

easy

A. Inside the static folder

B. Inside the templates folder

C. In the root project directory

D. Inside the instance folder

Solution

1. Step 1: Understand Flask static file serving

   Flask automatically serves files placed in the static folder to the browser.

2. Step 2: Identify correct folder for JavaScript files

   JavaScript files must be inside the static folder to be accessible via URL.

3. Final Answer:

   Inside the static folder -> Option A

4. Quick Check:

   Static folder = JavaScript files served [OK]

Hint: Always put JS files in the static folder for Flask to serve them [OK]

Common Mistakes:

• Placing JS files in templates folder
• Putting JS files in root directory
• Expecting instance folder to serve static files

2. Which of the following is the correct way to link a JavaScript file named app.js located in the static folder inside your Flask HTML template?

easy

A. <script src="/templates/app.js"></script>

B. <script src="/static/app.js"></script>

C. <script href="/static/app.js"></script>

D. <link src="/static/app.js">

Solution

1. Step 1: Use correct HTML tag for JavaScript

   The <script> tag with the src attribute is used to link JS files.

2. Step 2: Use correct path to static folder

   Flask serves static files under the /static/ URL prefix, so path should be /static/app.js.

3. Final Answer:

   <script src="/static/app.js"></script> -> Option B

4. Quick Check:

   Script tag + /static path = correct link [OK]

Hint: Use

Common Mistakes:

• Using <link> instead of <script>
• Using href instead of src in <script>
• Linking to /templates folder

3. Given this Flask route and folder structure, what will happen when the browser requests /static/script.js?

app.py:
from flask import Flask
app = Flask(__name__)

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

Folder structure: - static/ - script.js - app.py

medium

A. The home route will return 'Hello' instead

B. A 404 Not Found error will occur

C. Flask will raise a runtime error

D. The file script.js will be served automatically

Solution

1. Step 1: Understand Flask static file serving default behavior

   Flask automatically serves files inside the static folder at the URL path /static/filename.

2. Step 2: Check if route conflicts with static path

   The / route does not conflict with /static/script.js, so static file is served.

3. Final Answer:

   The file script.js will be served automatically -> Option D

4. Quick Check:

   Static folder files served automatically at /static/ [OK]

Hint: Files in static folder served at /static/filename URL [OK]

Common Mistakes:

• Thinking Flask needs explicit route for static files
• Confusing root route with static file path
• Expecting 404 without static folder

4. You wrote this Flask route to serve a JavaScript file manually:

@app.route('/js/app.js')
def serve_js():
    return open('static/app.js').read()

But the browser shows the JavaScript code as plain text instead of running it. What is the problem?

medium

A. The response is missing the correct Content-Type header for JavaScript

B. The file path 'static/app.js' is incorrect

C. You cannot serve JavaScript files manually in Flask

D. The route path should be '/static/app.js' instead of '/js/app.js'

Solution

1. Step 1: Check how Flask serves static files

   Flask sets the Content-Type header to 'application/javascript' automatically for static files.

2. Step 2: Identify missing Content-Type in manual response

   Returning raw file content without setting Content-Type causes browser to treat it as plain text.

3. Final Answer:

   The response is missing the correct Content-Type header for JavaScript -> Option A

4. Quick Check:

   Set Content-Type to application/javascript for JS files [OK]

Hint: Always set Content-Type header when serving JS manually [OK]

Common Mistakes:

• Not setting Content-Type header
• Assuming Flask auto-sets headers in manual routes
• Using wrong file path without checking

5. You want to serve multiple JavaScript files from a custom folder named assets/js instead of the default static folder. Which Flask code snippet correctly serves these files at URL path /js/<filename>?

hard

A. @app.route('/js/<filename>')
def serve_js(filename):
return open(f'assets/js/{filename}').read()

B. from flask import send_file

@app.route('/js/<filename>')
def serve_js(filename):
return send_file(f'assets/js/{filename}')

C. from flask import send_from_directory

@app.route('/js/<filename>')
def serve_js(filename):
return send_from_directory('assets/js', filename)

D. @app.route('/js/<filename>')
def serve_js(filename):
return redirect(f'/static/{filename}')

Solution

1. Step 1: Use send_from_directory to serve files from custom folder

   Flask's send_from_directory safely serves files from any folder with correct headers.

2. Step 2: Map URL path to custom folder

   The route /js/<filename> calls send_from_directory('assets/js', filename) to serve files from assets/js.

3. Final Answer:

   Use send_from_directory with assets/js folder -> Option C

4. Quick Check:

   send_from_directory + custom folder = correct serving [OK]

Hint: Use send_from_directory to serve files outside static folder [OK]

Common Mistakes:

• Using send_file without setting headers
• Reading file content without headers
• Redirecting to static folder without files there