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.