How to serve static files in Flask

0 1400

How to Serve Static Files in Flask

Introduction

When building web apps with Flask, you'll often include CSS, JavaScript, images, or other assets. Flask simplifies this by automatically serving files placed in a dedicated static folder. In this article, you'll learn how to organize and reference static resources effectively.

Folder Structure

Start by creating a static directory alongside your Flask script. Inside, you can organize assets in subfolders such as:

static/css/style.css
static/js/app.js
static/images/logo.png

Using url_for to Reference Assets

Instead of hardcoding asset URLs, use Flask’s url_for helper in HTML templates:

<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
<script src="{{ url_for('static', filename='js/app.js') }}"></script>
<img src="{{ url_for('static', filename='images/logo.png') }}" alt="Logo">

Minimal Flask Application

Here's a simple Flask app that renders a template and serves static assets:

from flask import Flask, render_template

app = Flask(__name__)

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

if __name__ == '__main__':
    app.run(debug=True)

Example HTML Template

In templates/index.html, embed your static files like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Flask App</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
    <h1>Static Assets Test</h1>
    <img src="{{ url_for('static', filename='images/logo.png') }}" alt="Logo">
    <script src="{{ url_for('static', filename='js/app.js') }}"></script>
</body>
</html>

Customizing Asset Settings

Flask allows customizing static asset settings in the app initialization:

app = Flask(
    __name__,
    static_folder='assets',
    static_url_path='/resources'
)

With this configuration, your assets live in assets/ and are served at /resources/<filename>.

Benefits of This Setup

Clean Structure: Keeps front-end assets well-organized.
Automatic Handling: Flask serves static files in development mode.
Deploy Flexibility: Easily adjust asset paths for production servers.

Local Testing vs Production

In development mode (debug=True), Flask handles static files out of the box. In production, you’ll likely configure your web server (e.g., Nginx or Apache) to serve these assets more efficiently.

Conclusion

"How to serve static files in Flask" demonstrates organizing assets into a dedicated folder, referencing them with url_for, and customizing their location if needed. This results in a clean, maintainable setup for handling CSS, JS, images, and other static resources in your Flask web applications.

If you’re passionate about building a successful blogging website, check out this helpful guide at Coding Tag – How to Start a Successful Blog. It offers practical steps and expert tips to kickstart your blogging journey!

For dedicated UPSC exam preparation, we highly recommend visiting www.iasmania.com. It offers well-structured resources, current affairs, and subject-wise notes tailored specifically for aspirants. Start your journey today!