Flask Static Files (CSS, JS, Images)

1. Setting Up Flask Project

Step 1: Install Flask and Create a Project Directory

pip install flask
mkdir flask_static_files
cd flask_static_files

Step 2: Create the Basic Flask App

Inside your project folder, create a file named app.py:

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)

2. Organizing Static Files

Step 3: Create the Static and Templates Directories

Inside your project folder, create the following structure:

flask_static_files/
│-- static/
│   │-- css/
│   │   ├─ styles.css
│   │-- js/
│   │   ├─ script.js
│   │-- images/
│   │   ├─ flask-logo.png
│-- templates/
│   ├─ index.html
│-- app.py

3. Adding Static Files to the Project

Step 4: Create a CSS File (`static/css/styles.css`)

body {
    background-color: #f4f4f4;
    font-family: Arial, sans-serif;
    text-align: center;
}
h1 {
    color: #333;
}

Step 5: Create a JavaScript File (static/js/script.js)

document.addEventListener("DOMContentLoaded", function () {
    alert("Welcome to Flask with Static Files!");
});

Step 6: Add an Image (`static/images/flask-logo.png`)

Download a Flask logo and place it inside the images folder.

4. Linking Static Files in Templates

Step 7: Create an HTML File (`templates/index.html`)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flask Static Files</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
    <script src="{{ url_for('static', filename='js/script.js') }}" defer></script>
</head>
<body>
    <h1>Flask Static Files Example</h1>
    <img src="{{ url_for('static', filename='images/flask-logo.png') }}" alt="Flask Logo" width="200">
</body>
</html>

5. Running the Flask App

Step 8: Start the Flask Server

Run the following command:

python app.py

Open http://127.0.0.1:5000/ in your browser, and you will see:
✅ Styled page with CSS
✅ JavaScript alert message
✅ Flask logo image

Conclusion

In this guide, you have learned how to:

✅ Organize static files in Flask
✅ Link CSS, JavaScript, and images in templates
✅ Use url_for() to reference static files

Now, you can enhance your Flask applications with styles, interactivity, and images! 🚀

PYTHON FLASK