Serving JavaScript files in Flask - Cheat Sheet & Quick Revision

Recall & Review

beginner

How do you serve static JavaScript files in a Flask application?

Place your JavaScript files in the 'static' folder of your Flask project. Then, use the url_for('static', filename='yourfile.js') function in your HTML to link to the JavaScript file.

beginner

What is the default folder name Flask uses to serve static files like JavaScript?

Flask uses a folder named static by default to serve static files such as JavaScript, CSS, and images.

beginner

Why should JavaScript files be placed in the 'static' folder in Flask?

Because Flask automatically serves files from the 'static' folder at the URL path '/static/'. This makes it easy to link JavaScript files in your HTML without extra configuration.

beginner

How do you include a JavaScript file named 'app.js' located in the static folder in your Flask HTML template?

Use the script tag with Flask's url_for function:
<script src="{{ url_for('static', filename='app.js') }}"></script>

intermediate

Can you serve JavaScript files from a folder other than 'static' in Flask by default?

No, Flask serves static files only from the 'static' folder by default. To serve files from another folder, you must configure Flask explicitly.

Where should you place JavaScript files in a Flask project to serve them easily?

A In the root folder

B In the 'templates' folder

C In the 'js' folder

D In the 'static' folder

Flask serves static files like JavaScript from the 'static' folder by default.

How do you reference a JavaScript file named 'main.js' in a Flask HTML template?

A <script src="/main.js"></script>

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

C <script src="{{ url_for('static', filename='main.js') }}"></script>

D <script src="{{ main.js }}"></script>

Use Flask's url_for function to generate the correct URL for static files.

What URL path does Flask use by default to serve static files?

A /static/

B /assets/

C /public/

D /files/

Flask serves static files under the '/static/' URL path by default.

If you want to serve JavaScript files from a different folder than 'static', what must you do?

A Configure Flask to serve static files from the new folder

B Use a different web framework

C Place files in 'templates' folder

D Rename the folder to 'static'

Flask requires explicit configuration to serve static files from folders other than 'static'.

Why is it important to serve JavaScript files as static files in Flask?

A Because JavaScript files change often

B Because static files are served efficiently without processing

C Because Flask cannot serve dynamic files

D Because JavaScript files must be compiled

Static files are served directly by Flask without extra processing, making it efficient for files like JavaScript.

Explain how to serve a JavaScript file in a Flask application and how to link it in an HTML template.

Think about where Flask looks for static files and how templates reference them.

Describe the default behavior of Flask regarding static files and what URL path is used to access them.

Consider the folder name and URL prefix Flask uses.

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