Static file organization in Flask - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of the static folder in a Flask project?

The static folder holds files like images, CSS, and JavaScript that the browser can load directly. It keeps these files separate from Python code for better organization.

beginner

How do you reference a static file in a Flask HTML template?

Use the url_for('static', filename='path/to/file') function. For example, <img src="{{ url_for('static', filename='images/logo.png') }}"> loads an image from the static folder.

beginner

Why should static files be organized into subfolders like css, js, and images inside the static folder?

Organizing static files into subfolders helps keep the project tidy and makes it easier to find and manage files, just like sorting your documents into labeled folders at home.

beginner

What happens if you place a CSS file outside the static folder in Flask?

Flask will not serve the CSS file automatically, so the browser won’t load it. Static files must be inside the static folder to be accessible via URLs.

intermediate

How can you customize the static folder location in a Flask app?

You can set the static_folder parameter when creating the Flask app, like app = Flask(__name__, static_folder='assets'). This changes where Flask looks for static files.

Where should you put JavaScript files in a Flask project?

A Inside the <code>static/js</code> folder

B Inside the <code>templates</code> folder

C In the root project folder

D Inside the <code>instance</code> folder

JavaScript files belong in the static/js folder so Flask can serve them as static content.

How do you link a CSS file named style.css located in static/css in a Flask template?

A &lt;link href="/css/style.css"&gt;

B &lt;link href="{{ url_for('static', filename='css/style.css') }}"&gt;

C &lt;link href="static/css/style.css"&gt;

D &lt;link href="{{ url_for('templates', filename='css/style.css') }}"&gt;

Use url_for('static', filename='css/style.css') to generate the correct URL for static files.

What is the default name of the folder Flask uses to serve static files?

A assets

B public

C static

D media

By default, Flask serves static files from the static folder.

If you want to change the static folder to assets, how do you do it?

A app = Flask(__name__, static_folder='assets')

B app.static_folder = 'assets'

C Set STATIC_FOLDER = 'assets' in config

D Rename the <code>static</code> folder to <code>assets</code> without code changes

You specify the static folder when creating the Flask app with static_folder='assets'.

Why is it important to keep static files separate from Python code in Flask?

A To make the app run faster

B Because Python cannot read static files

C To prevent static files from running as code

D To improve code readability and browser access

Separating static files keeps the project organized and allows browsers to load these files directly.

Explain how to organize and reference static files in a Flask project.

Think about how you keep your desk tidy with folders and labels.

Describe what happens if a static file is placed outside the static folder in Flask.

Imagine trying to find a book that is not on the shelf where you expect it.

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