Static file organization in Flask - Step-by-Step Execution

Concept Flow - Static file organization

Start Flask App

↓

Request for Static File

↓

Flask looks in /static folder

↓

Find file?

No→404 Error

Yes↓

Serve file to browser

↓

Browser displays static content

This flow shows how Flask serves static files by looking in the /static folder when a request for a static file comes in.

Execution Sample

Flask

from flask import Flask
app = Flask(__name__)

# Static files served from 'static' folder by default

@app.route('/')
def home():
    return '<img src="/static/logo.png">'

This Flask app serves an image from the static folder when the home page is visited.

Execution Table

Step	Action	File Requested	Flask Folder Checked	File Found?	Response
1	User visits '/'	N/A	N/A	N/A	Return HTML with <img src='/static/logo.png'>
2	Browser requests '/static/logo.png'	/static/logo.png	/static	Yes	Serve logo.png file content
3	Browser displays image	N/A	N/A	N/A	Image shown on page
4	User requests '/static/missing.css'	/static/missing.css	/static	No	Return 404 Not Found

💡 Execution stops when file is served or 404 error is returned if file not found.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 4
Requested File	None	N/A	/static/logo.png	/static/missing.css
File Found	False	N/A	True	False
Response	None	HTML with img tag	File content served	404 Not Found

Key Moments - 2 Insights

Why does Flask look in the /static folder for static files?

Flask is configured by default to serve static files from the /static folder, so when a URL starts with /static, Flask checks this folder for the requested file (see execution_table rows 2 and 4).

What happens if the requested static file does not exist?

Flask returns a 404 Not Found error because it cannot find the file in the /static folder, as shown in execution_table row 4.

Visual Quiz - 3 Questions

Look at the execution table, what response does Flask send when '/static/logo.png' is requested?

A Serve logo.png file content

B Return 404 Not Found

C Return HTML with img tag

D Redirect to home page

💡 Hint

Check execution_table row 2 under 'Response'

At which step does Flask return a 404 error for a missing static file?

A Step 1

B Step 4

C Step 2

D Step 3

💡 Hint

Look at execution_table row 4 for the 'Response' column

If the static folder was renamed, how would the execution table change?

A Flask would find files in the new folder automatically

B Flask would serve files from both folders

C Flask would still look in /static and return 404 for all static files

D Flask would crash immediately

💡 Hint

Flask defaults to /static folder unless configured otherwise, see concept_flow

Concept Snapshot

Flask serves static files from the /static folder by default.
When a URL starts with /static, Flask looks inside this folder.
If the file exists, Flask sends it to the browser.
If not, Flask returns a 404 error.
Keep static files organized inside /static for easy access.

Full Transcript

This lesson shows how Flask handles static files. When a user visits a page with static content like images or CSS, the browser requests those files from URLs starting with /static. Flask then looks inside the /static folder in your project to find the requested file. If the file is found, Flask sends it back to the browser to display. If the file is missing, Flask returns a 404 error. This default behavior helps keep your static files organized and easy to serve.

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