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.

Practice

1. Where should you place CSS, JavaScript, and image files in a Flask project to serve them correctly?

easy

A. Inside the static folder

B. Inside the templates folder

C. In the root project directory

D. Inside the views folder

Solution

1. Step 1: Understand Flask static file convention

   Flask expects static files like CSS, JS, and images to be inside a folder named static for automatic serving.

2. Step 2: Identify correct folder for static files

   Files placed in templates or other folders won't be served as static assets by Flask.

3. Final Answer:

   Inside the static folder -> Option A

4. Quick Check:

   Static files = static folder [OK]

Hint: Static files always go in the 'static' folder [OK]

Common Mistakes:

• Putting CSS or JS inside the templates folder
• Placing images in the root directory
• Not using a static folder at all

2. Which of the following is the correct way to link a CSS file named style.css located inside a css folder within the static directory in a Flask template?

easy

A. <link href="/css/style.css" rel="stylesheet">

B. <link href="{{ url_for('static', filename='css/style.css') }}" rel="stylesheet">

C. <link href="static/css/style.css" rel="stylesheet">

D. <link href="/static/style.css" rel="stylesheet">

Solution

1. Step 1: Use Flask's url_for to generate static file paths

   Flask recommends using url_for('static', filename='...') to get the correct URL for static files, ensuring it works in all environments.

2. Step 2: Check the filename path inside url_for

   The CSS file is inside css folder, so the filename should be css/style.css.

3. Final Answer:

   <link href="{{ url_for('static', filename='css/style.css') }}" rel="stylesheet"> -> Option B

4. Quick Check:

   Use url_for('static', filename=path) for static links [OK]

Hint: Always use url_for('static', filename='path') in templates [OK]

Common Mistakes:

• Hardcoding paths without url_for
• Missing subfolder in filename path
• Using incorrect folder names

3. Given this Flask project structure:

project/
 ├─ static/
 │   ├─ js/
 │   │   └─ app.js
 │   └─ images/
 │       └─ logo.png
 └─ templates/
     └─ index.html

What will be the rendered HTML for linking app.js inside index.html using:

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

medium

A.

B.

C.

D.

Solution

1. Step 1: Understand url_for('static', filename=...)

   This generates a URL starting with /static/ followed by the filename path.

2. Step 2: Apply filename 'js/app.js'

   The full URL becomes /static/js/app.js, so the script tag will have src="/static/js/app.js".

3. Final Answer:

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

4. Quick Check:

   url_for static adds '/static/' prefix [OK]

Hint: url_for('static', filename=...) adds '/static/' prefix automatically [OK]

Common Mistakes:

• Omitting the /static/ prefix in URL
• Using relative paths without /static/
• Confusing static folder with root

4. You wrote this in your Flask template to include an image:
<img src="{{ url_for('static', filename='images/logo.png') }}" alt="Logo">
But the image does not show up in the browser. What is the most likely cause?

medium

A. The url_for function cannot be used for images

B. The alt attribute is missing

C. The filename should not include the folder name

D. The static folder is missing or misplaced in the project

Solution

1. Step 1: Check static folder location

   Flask serves static files only if the static folder is in the correct place (usually project root). If missing or misplaced, files won't be found.

2. Step 2: Validate usage of url_for and filename

   The url_for usage is correct including folder name. The alt attribute does not affect image loading.

3. Final Answer:

   The static folder is missing or misplaced in the project -> Option D

4. Quick Check:

   Static folder must exist and be correctly placed [OK]

Hint: Ensure 'static' folder exists at project root [OK]

Common Mistakes:

• Forgetting to create the static folder
• Placing static folder inside templates
• Removing folder path from filename

5. You want to organize your static files neatly by placing CSS files in a css folder, JavaScript files in a js folder, and images in an images folder inside the static directory. Which of the following Flask template snippets correctly links a CSS file named main.css located in static/css/ and a JavaScript file named app.js located in static/js/?

hard

A. <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
<script src="{{ url_for('static', filename='js/app.js') }}"></script>

B. <link rel="stylesheet" href="/css/main.css">
<script src="/js/app.js"></script>

C. <link rel="stylesheet" href="static/main.css">
<script src="static/app.js"></script>

D. <link rel="stylesheet" href="{{ url_for('static', filename='main.css') }}">
<script src="{{ url_for('static', filename='app.js') }}"></script>

Solution

1. Step 1: Use url_for with correct subfolder paths

   Since files are inside subfolders css and js, the filename argument must include these folders.

2. Step 2: Confirm correct HTML tags and attributes

   The <link> tag for CSS and <script> tag for JS are correctly formed with href and src respectively.

3. Final Answer:

   Use url_for with 'css/main.css' and 'js/app.js' paths -> Option A

4. Quick Check:

   Subfolders in filename + url_for = correct static linking [OK]

Hint: Include subfolder names in url_for filename for neat static files [OK]

Common Mistakes:

• Omitting subfolder names in filename
• Hardcoding paths without url_for
• Using wrong HTML attributes for CSS or JS