Skip to main content

Static Files

Overview​

SpeedPy uses WhiteNoise for serving static files and Tailwind CSS for styling. Media files are served via an Nginx container in development.

WhiteNoise​

WhiteNoise serves static files directly from the Django application, eliminating the need for a separate web server for static assets.

MIDDLEWARE = [
    "django.middleware.security.SecurityMiddleware",
    "whitenoise.middleware.WhiteNoiseMiddleware",
    ...
]

WHITENOISE_USE_FINDERS = True
WHITENOISE_AUTOREFRESH = DEBUG  # Auto-refresh in development

Static File Settings​

STATIC_URL = env.str("STATIC_URL", default="/static/")
STATIC_ROOT = env.str("STATIC_ROOT", default=BASE_DIR / "staticfiles")
STATICFILES_DIRS = [
    BASE_DIR / "static",
    ("versolyui", BASE_DIR / "node_modules" / "versoly-ui" / "dist"),
    ("floating-core", BASE_DIR / "node_modules" / "@floating-ui" / "core" / "dist"),
    ("floating-ui", BASE_DIR / "node_modules" / "@floating-ui" / "dom" / "dist"),
]

Tailwind CSS​

Tailwind is configured in tailwind.config.js with dark mode support, custom color themes, and several plugins.

Building CSS​

# One-time build
docker compose run --rm web npm run tailwind:build
# or
make twb

# Watch mode (rebuilds on changes)
docker compose run --rm web npm run tailwind:watch
# or
make tw

Tailwind compiles from static/mainapp/input.css to static/mainapp/styles.css.

Tailwind Directories​

SpeedPy includes a generate_tailwind_directories management command that creates a tailwind_directories.json file. This file lists additional directories for Tailwind's content scanner to check for class names.

docker compose run --rm web python manage.py generate_tailwind_directories

Plugins​

Tailwind is configured with:

  • @tailwindcss/forms — form element styling
  • @tailwindcss/typography — prose typography

Media Files​

Media files (user uploads like team logos) are stored in the media/ directory and served via an Nginx container in development:

media:
  image: nginx
  volumes:
    - ./media:/usr/share/nginx/html
  ports:
    - "127.0.0.1:9001:80"
MEDIA_ROOT = env("MEDIA_ROOT", default=BASE_DIR / "media")
MEDIA_URL = env("MEDIA_PATH", default="/media/")

In production, configure your web server or CDN to serve the media directory.

Collecting Static Files​

For production deployment, collect static files into STATIC_ROOT:

python manage.py collectstatic --noinput

WhiteNoise will serve these files with proper caching headers.