--- name: frontend-module description: myfy FrontendModule for server-side rendering with Jinja2, Tailwind 4, DaisyUI 5, and Vite. Use when working with FrontendModule, templates, render_template, static files, Tailwind CSS, or Vite HMR. --- # FrontendModule - Server-Side Rendering FrontendModule provides Jinja2 templates with Tailwind 4, DaisyUI 5, and Vite bundling. ## Quick Start ```python from myfy.core import Application from myfy.web import WebModule, route from myfy.frontend import FrontendModule, render_template app = Application() app.add_module(WebModule()) app.add_module(FrontendModule(auto_init=True)) # Auto-scaffolds! @route.get("/") async def home() -> str: return render_template("home.html", title="Welcome") ``` ## Configuration Environment variables use the `MYFY_FRONTEND_` prefix: | Variable | Default | Description | |----------|---------|-------------| | `MYFY_FRONTEND_ENVIRONMENT` | `development` | Environment mode | | `MYFY_FRONTEND_ENABLE_VITE_DEV` | `True` | Start Vite dev server | | `MYFY_FRONTEND_VITE_DEV_SERVER` | `http://localhost:3001` | Vite server URL | | `MYFY_FRONTEND_STATIC_URL_PREFIX` | `/static` | Static files URL path | | `MYFY_FRONTEND_CACHE_STATIC_ASSETS` | `True` | Enable static caching | | `MYFY_FRONTEND_CACHE_MAX_AGE` | `31536000` | Cache max-age (1 year) | | `MYFY_FRONTEND_SHOW_VITE_LOGS` | `False` | Show Vite console output | ## Module Options ```python FrontendModule( templates_dir="frontend/templates", # Template directory static_dir="frontend/static", # Static files directory auto_init=True, # Auto-scaffold if missing ) ``` ## Auto-Scaffolding With `auto_init=True`, FrontendModule creates: ``` frontend/ templates/ base.html # Base template with Tailwind home.html # Example home page static/ src/ main.js # Entry point main.css # Tailwind imports package.json # Node dependencies vite.config.js # Vite configuration tailwind.config.js # Tailwind configuration ``` ## Template Rendering ### Basic Rendering ```python from myfy.frontend import render_template @route.get("/") async def home() -> str: return render_template("home.html", title="Home") ``` ### With Context ```python @route.get("/users/{user_id}") async def user_profile(user_id: int, session: AsyncSession) -> str: user = await session.get(User, user_id) return render_template("profile.html", user=user) ``` ### With Request Context ```python from starlette.requests import Request @route.get("/dashboard") async def dashboard(request: Request, user: User) -> str: return render_template( "dashboard.html", request=request, # For url_for, CSRF, etc. user=user, ) ``` ## Base Template ```html {% block title %}My App{% endblock %} {{ vite_assets("src/main.js") }}
My App
{% block content %}{% endblock %}
``` ## Page Template ```html {% extends "base.html" %} {% block title %}{{ title }} - My App{% endblock %} {% block content %}

Hello, World!

Welcome to your myfy application.

{% endblock %} ``` ## DaisyUI Components DaisyUI 5 provides ready-to-use components: ```html

Card Title

Card content here.

Success! Your action was completed.
``` ## Theme Switching ```html ``` ## Static Assets ### Vite Helper ```html {{ vite_assets("src/main.js") }} ``` ### Manual Asset URLs ```html Logo ``` ## Development Workflow 1. Start the application: ```bash myfy run ``` Vite dev server starts automatically with HMR. 2. Edit templates and CSS - changes reflect instantly. 3. Build for production: ```bash npm run build ``` Creates optimized assets in `frontend/static/dist/`. ## Production Build ```bash # Build assets npm run build # Set production mode export MYFY_FRONTEND_ENVIRONMENT=production export MYFY_FRONTEND_ENABLE_VITE_DEV=false # Run application myfy run ``` Assets are served from the built manifest with cache headers. ## Custom Jinja Filters ```python from myfy.frontend import FrontendModule from starlette.templating import Jinja2Templates # After module initialization templates: Jinja2Templates = container.get(Jinja2Templates) templates.env.filters["currency"] = lambda x: f"${x:.2f}" ``` Use in templates: ```html {{ price | currency }} ``` ## Best Practices 1. **Use auto_init for new projects** - Gets you started quickly 2. **Extend base.html** - Keep consistent layout 3. **Use DaisyUI components** - Pre-styled, accessible 4. **Enable caching in production** - Set long cache max-age 5. **Build assets before deploy** - Don't rely on Vite in production 6. **Use template inheritance** - Keep templates DRY 7. **Pass request for url_for** - Enables dynamic URL generation