Static file organization in Flask - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

Serving static CSS files in Flask

You have a Flask app with a CSS file located at static/css/style.css. What URL path will Flask use to serve this CSS file by default?

A /assets/css/style.css

B /css/style.css

C /static/css/style.css

D /public/css/style.css

💡 Hint

Flask serves files from the static folder under the /static/ URL prefix by default.

Flask automatically serves files placed in the static folder under the URL path /static/. So a file at static/css/style.css is accessible at /static/css/style.css.

📝 Syntax

intermediate

Referencing static images in Flask templates

In a Flask Jinja2 template, which is the correct way to reference an image file named logo.png inside the static/images folder?

A <img src="{{ url_for('static', filename='images/logo.png') }}" alt="Logo">

B <img src="/images/logo.png" alt="Logo">

C <img src="{{ static('images/logo.png') }}" alt="Logo">

D <img src="{{ url_for('images', filename='logo.png') }}" alt="Logo">

💡 Hint

Use Flask's url_for function with the 'static' endpoint to generate URLs for static files.

In Flask templates, url_for('static', filename='path') generates the correct URL for static files. So to reference static/images/logo.png, use url_for('static', filename='images/logo.png').

🔧 Debug

advanced

Static file not found error in Flask

You placed a JavaScript file app.js inside static/js/ but when accessing /static/js/app.js in the browser, you get a 404 error. Which of the following is the most likely cause?

A The URL should be <code>/js/app.js</code> instead of <code>/static/js/app.js</code>.

B The Flask app is missing the <code>static_url_path</code> parameter in <code>Flask()</code> constructor.

C The <code>app.js</code> file has incorrect file permissions and cannot be read.

D The <code>static</code> folder is not in the same directory as the Flask app script.

💡 Hint

Flask serves static files relative to the location of the app script by default.

By default, Flask looks for the static folder in the same directory as the app script. If the folder is misplaced, Flask cannot find the files and returns 404.

❓ state_output

advanced

Effect of changing static_url_path in Flask

If you create a Flask app with app = Flask(__name__, static_url_path='/assets') and place a file logo.png inside static/, what URL path will serve this file?

A /assets/static/logo.png

B /assets/logo.png

C /logo.png

D /static/logo.png

💡 Hint

The static_url_path changes the URL prefix for static files.

Setting static_url_path='/assets' tells Flask to serve static files under the /assets URL path instead of the default /static. So static/logo.png is served at /assets/logo.png.

🧠 Conceptual

expert

Best practice for organizing static files in Flask

Which of the following is the best practice for organizing static files in a Flask project to keep it maintainable and scalable?

A Organize static files into subfolders like <code>css/</code>, <code>js/</code>, and <code>images/</code> inside <code>static/</code>.

B Place all static files directly inside the <code>static/</code> folder without subfolders.

C Store static files outside the Flask project and serve them with a separate web server only.

D Use a single large CSS and JS file placed in the root project folder.

💡 Hint

Think about clarity and ease of finding files as your project grows.

Organizing static files into subfolders like css/, js/, and images/ inside the static/ folder helps keep the project clean and makes it easier to maintain and scale.