Static file organization in Flask - Mini Project: Build & Apply

Static file organization in Flask

📖 Scenario: You are building a simple Flask web app that shows a welcome page with a styled heading and an image. To keep your project clean and organized, you need to place your CSS and image files in the correct static folders.

🎯 Goal: Organize static files by creating a CSS file and an image file in the static folder, then link the CSS and image properly in your Flask template.

📋 What You'll Learn

Create a static folder in your Flask project root.

Inside static, create a css folder and add a file named style.css with a simple style.

Inside static, create an images folder and add an image file named welcome.png (assume the file exists).

Create a Flask route that renders an HTML template linking to the CSS and displaying the image using Flask's url_for function.

💡 Why This Matters

🌍 Real World

Organizing static files properly is essential for any web app to keep code clean and maintainable. This structure helps browsers find CSS, images, and scripts easily.

💼 Career

Web developers frequently work with static assets in frameworks like Flask. Knowing how to organize and link these files is a basic but crucial skill.

1

Create the Flask app and static folders

Create a Flask app in a file named app.py with a route / that renders a template called index.html. Also, create a folder named static/css and inside it create a file named style.css with the content h1 { color: blue; }.

Flask

# Create app.py with Flask app and route
# Create static/css/style.css with h1 color blue

Hint

Remember to import Flask and render_template. The CSS file should be inside static/css folder.

2

Add an images folder and place welcome.png

Inside the static folder, create a new folder named images. Assume you have an image file named welcome.png placed inside static/images.

Flask

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def home():
    return render_template('index.html')

# Place welcome.png inside static/images folder

Hint

Create the images folder inside static and place the welcome.png file there.

3

Create the HTML template linking CSS and image

Create a file named templates/index.html. Inside it, write HTML that links the CSS file using url_for('static', filename='css/style.css') and displays the image using url_for('static', filename='images/welcome.png'). The page should have an <h1> with text Welcome to Flask!.

Flask

Hint

Use the Jinja2 syntax {{ url_for('static', filename='...') }} to link CSS and image files.

4

Run the Flask app and verify static files load

Add the code to run the Flask app only if the file is run directly by checking if __name__ == '__main__': and call app.run(debug=True).

Flask

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def home():
    return render_template('index.html')

# static/css/style.css content:
# h1 { color: blue; }
# static/images/welcome.png assumed to be placed




    
    
    Welcome
    


    Welcome to Flask!
    



# Add code to run the app below
# Your code here

Hint

Use the standard Flask app run guard to start the server with debug mode on.

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