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.