Ideal Flask App Structure

Claude Artifact

Ideal flask app structure I need. I want to have multiple submodules like birthdays, link storage, pastebin like my version, rss feed my implementation, and so on. I won't build all things immediately. One by one at some time I'll build. I'll also add few more like json viewer and so on later.

How can we do that? I'm planning to use htmx, bootstrap for fe with template rendering of flask.

I'll help you design a scalable Flask application structure that can accommodate multiple modules and future additions.

myapp/
    ├── __init__.py               # Flask app initialization
    ├── config.py                # Configuration settings
    ├── extensions.py            # Flask extensions (SQLAlchemy, etc.)
    ├── models/                  # Database models
    │   ├── __init__.py
    │   ├── birthday.py
    │   ├── link.py
    │   ├── paste.py
    │   └── rss.py
    ├── modules/                 # Feature modules
    │   ├── __init__.py
    │   ├── birthdays/
    │   │   ├── __init__.py
    │   │   ├── routes.py
    │   │   └── templates/
    │   │       └── birthdays/
    │   │           ├── index.html
    │   │           └── add.html
    │   ├── links/
    │   │   ├── __init__.py
    │   │   ├── routes.py
    │   │   └── templates/
    │   │       └── links/
    │   │           ├── index.html
    │   │           └── add.html
    │   ├── pastebin/
    │   │   ├── __init__.py
    │   │   ├── routes.py
    │   │   └── templates/
    │   │       └── pastebin/
    │   │           ├── index.html
    │   │           └── view.html
    │   └── rss/
    │       ├── __init__.py
    │       ├── routes.py
    │       └── templates/
    │           └── rss/
    │               └── index.html
    ├── static/                  # Static files
    │   ├── css/
    │   │   └── style.css
    │   ├── js/
    │   │   └── htmx.min.js
    │   └── img/
    ├── templates/              # Global templates
    │   ├── base.html
    │   └── index.html
    └── utils/                  # Utility functions
        ├── __init__.py
        └── helpers.py

# Core application initialization (__init__.py)
from flask import Flask
from flask_sqlalchemy import SQLAlchemy
from .config import Config
from .extensions import db

def create_app(config_class=Config):
    app = Flask(__name__)
    app.config.from_object(config_class)

    # Initialize extensions
    db.init_app(app)

    # Register blueprints
    from .modules.birthdays import bp as birthdays_bp
    from .modules.links import bp as links_bp
    from .modules.pastebin import bp as pastebin_bp
    from .modules.rss import bp as rss_bp

    app.register_blueprint(birthdays_bp, url_prefix='/birthdays')
    app.register_blueprint(links_bp, url_prefix='/links')
    app.register_blueprint(pastebin_bp, url_prefix='/paste')
    app.register_blueprint(rss_bp, url_prefix='/rss')

    return app

# Example module structure (modules/birthdays/__init__.py)
from flask import Blueprint

bp = Blueprint('birthdays', __name__, template_folder='templates')

from . import routes

# Example module routes (modules/birthdays/routes.py)
from flask import render_template
from . import bp

@bp.route('/')
def index():
    return render_template('birthdays/index.html')

# Example base template (templates/base.html)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}{% endblock %} - MyApp</title>
    <link href="<https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css>" rel="stylesheet">
    <script src="{{ url_for('static', filename='js/htmx.min.js') }}"></script>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container">
            <a class="navbar-brand" href="{{ url_for('index') }}">MyApp</a>
            <div class="navbar-nav">
                <a class="nav-link" href="{{ url_for('birthdays.index') }}">Birthdays</a>
                <a class="nav-link" href="{{ url_for('links.index') }}">Links</a>
                <a class="nav-link" href="{{ url_for('pastebin.index') }}">Pastebin</a>
                <a class="nav-link" href="{{ url_for('rss.index') }}">RSS</a>
            </div>
        </div>
    </nav>

    <main class="container mt-4">
        {% block content %}{% endblock %}
    </main>

    <script src="<https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js>"></script>
</body>
</html>

# Example module template (modules/birthdays/templates/birthdays/index.html)
{% extends "base.html" %}

{% block title %}Birthdays{% endblock %}

{% block content %}
<div class="row">
    <div class="col">
        <h1>Birthdays</h1>
        <div hx-get="{{ url_for('birthdays.list') }}"
             hx-trigger="load"
             hx-target="#birthday-list">
        </div>
        <div id="birthday-list"></div>
    </div>
</div>
{% endblock %}

This structure follows Flask's blueprint pattern and provides several benefits:

Modularity: Each feature (birthdays, links, etc.) is self-contained with its own routes, templates, and static files.
Scalability: You can easily add new modules by creating new directories in the modules folder and registering new blueprints.
Organization: Clear separation of concerns with models, views (templates), and controllers (routes).

To implement a new feature:

Create a new directory in modules/
Add __init__.py to create a blueprint
Add routes.py for your endpoints
Create templates in the module's templates/ directory