tlambert03 · tlambert03 · Nov 5, 2025 · Oct 30, 2025 · Oct 29, 2025 · Oct 29, 2025
diff --git a/.claude/CLAUDE.md b/.claude/CLAUDE.md
@@ -8,11 +8,12 @@ Django web app for <https://www.fpbase.org> with React frontend. PostgreSQL data
 - unless explicitly told otherwise, don't run `git commit`, let me review changes.
 - avoid nested imports unless specifically used to avoid circular imports or delay heavy imports.
 - avoid arbitrary time.sleep() calls in tests; use proper waits on a specific condition instead.
+- the current year is 2025 (not 2024), for web-searches
 
 ## Tech Stack
 
 **Backend**: Django, Python, DRF, GraphQL (graphene-django), PostgreSQL, Celery + Redis
-**Frontend**: React, Webpack, pnpm monorepo (packages: spectra, blast use Vite)
+**Frontend**: React, vite, pnpm monorepo (packages: spectra, blast use Vite)
 **Science**: BioPython, NumPy, Pandas, SciPy, Matplotlib
 
 ## Key Overrides
@@ -29,7 +30,7 @@ uv sync                                # Install/update Python deps
 pnpm install                           # Install Node deps
 
 # Development
-pnpm dev                               # Start webpack + Django dev server
+pnpm dev                               # Start vite + Django dev server
 uv run backend/manage.py shell_plus    # Interactive shell with auto-imports
 
 # Testing

diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md
@@ -1,7 +1,7 @@
 # FPbase Copilot Instructions
 
 ## Project Overview
-FPbase is a Django/React monorepo for the Fluorescent Protein Database (fpbase.org). The backend uses Django 4.x with GraphQL and REST APIs, while the frontend is a hybrid of server-rendered Django templates with embedded React apps built via Webpack and Vite.
+FPbase is a Django/React monorepo for the Fluorescent Protein Database (fpbase.org). The backend uses Django 4.x with GraphQL and REST APIs, while the frontend is a hybrid of server-rendered Django templates with embedded React apps built via Vite.
 
 ## Architecture
 
@@ -12,12 +12,12 @@ FPbase is a Django/React monorepo for the Fluorescent Protein Database (fpbase.o
   - `references/`: Publication and citation management
   - `fpseq/`: Bioinformatics sequence alignment and analysis using Biopython
   - `favit/`: User favorites system
-- **`frontend/`**: Webpack-bundled assets integrated via `django-webpack-loader`
+- **`frontend/`**: vite-bundled assets integrated via `django-vite`
 - **`packages/`**: Standalone Vite apps (`blast/`, `spectra/`) embedded in Django templates
 
 ### Key Technologies
 - **Backend**: Django, Django REST Framework, Graphene (GraphQL), Celery (Redis), PostgreSQL
-- **Frontend**: React, Material-UI, Webpack, Vite
+- **Frontend**: React, Material-UI, Vite
 - **Search**: Algolia for protein/organism search
 - **Bioinformatics**: Biopython (sequence alignment), BLAST (local binaries in `backend/bin/`)
 - **Deployment**: Heroku, AWS S3 (media), Sentry (error tracking)
@@ -50,7 +50,6 @@ Django settings split across `backend/config/settings/`:
 - `base.py`: Shared configuration
 - `local.py`: Development (DEBUG=True, dummy cache, console email)
 - `production.py`: Production (Heroku, AWS S3, real cache)
-- `test.py`: Testing (uses `MockWebpackLoader` to skip frontend builds)
 
 Environment variables loaded via `django-environ` from `.env` file (set `DJANGO_READ_DOT_ENV_FILE=True`).
 
@@ -91,11 +90,6 @@ Core models in `models/`:
 
 ## Frontend Integration
 
-### Webpack + Django Templates
-- Webpack builds to `frontend/dist/` with stats tracked in `webpack-stats.json`
-- Django loads bundles via `{% load webpack_loader %}` template tags
-- Hot reload available with `HOT_RELOAD=1` env var
-- Entry points in `frontend/src/`: `index.js`, `spectra-viewer.js`, `blast-app.js`, etc.
 
 ### Vite Apps (packages/)
 - Standalone React apps (`@fpbase/blast`, `@fpbase/spectra`) embedded as iframes or via CDN
@@ -110,7 +104,6 @@ Core models in `models/`:
 ## Testing Patterns
 - Tests in `*/tests/` directories (pytest)
 - Use `@pytest.mark.django_db` for database access
-- Frontend-dependent tests use `@pytest.mark.usefixtures("uses_frontend", "use_real_webpack_loader")`
 - Factory fixtures preferred over manual object creation
 
 ## Custom Middleware

diff --git a/.gitignore b/.gitignore
@@ -363,9 +363,6 @@ _data
 .pytest_cache
 
 /fpseq/addgene.py
-
-webpack-stats.json
-
 /.sentryclirc
 .vscode/
 
@@ -386,3 +383,4 @@ memray_*/
 test_fix*.bin
 __snapshots__/
 snapshot_failures/
+frontend/stats.html
diff --git a/backend/config/settings/base.py b/backend/config/settings/base.py
@@ -226,16 +226,16 @@
     "django.contrib.staticfiles.finders.AppDirectoriesFinder",
 ]
 
-INSTALLED_APPS.append("webpack_loader")
-
-WEBPACK_LOADER = {
-    "DEFAULT": {
-        "CACHE": not DEBUG,
-        "BUNDLE_DIR_NAME": "/",
-        "STATS_FILE": str(ROOT_DIR.parent / "frontend" / "dist" / "webpack-stats.json"),
-        "POLL_INTERVAL": 0.1,
-        "TIMEOUT": None,
-        "IGNORE": [r".*\.hot-update.js", r".+\.map"],
+INSTALLED_APPS.append("django_vite")
+
+DJANGO_VITE = {
+    "default": {
+        "dev_mode": DEBUG,
+        "dev_server_protocol": "http",
+        "dev_server_host": "localhost",
+        "dev_server_port": 5173,
+        "static_url_prefix": "",
+        "manifest_path": str(ROOT_DIR.parent / "frontend" / "dist" / "manifest.json"),
     }
 }
 
@@ -336,8 +336,7 @@
 
 # See: https://docs.djangoproject.com/en/dev/ref/settings/#site-id
 SITE_ID = 1
-# CANONICAL_URL = env('CANONICAL_URL', default='https://www.fpbase.org')
-CANONICAL_URL = env("CANONICAL_URL", default=None)
+CANONICAL_URL = env("CANONICAL_URL", default="https://www.fpbase.org")
 
 
 # AVATAR CONFIGURATION

diff --git a/backend/config/settings/local.py b/backend/config/settings/local.py
@@ -1,15 +1,13 @@
 """Local settings for FPbase project."""
 
-import os
-
 import structlog
 
 from .base import *  # noqa
 
 # STATIC FILES - Add backend static directory for development
 # ------------------------------------------------------------------------------
 # Include backend/fpbase/static so Django can serve microscope.js and other
-# static files that don't go through webpack
+# static files that don't go through vite
 STATICFILES_DIRS = [*STATICFILES_DIRS, str(ROOT_DIR / "fpbase" / "static")]
 
 # DEBUG
@@ -19,6 +17,10 @@
 
 CRISPY_FAIL_SILENTLY = not DEBUG
 
+# DJANGO_VITE - Enable dev mode for local development
+# ------------------------------------------------------------------------------
+DJANGO_VITE["default"]["dev_mode"] = True
+
 # CSRF_COOKIE_HTTPONLY = True
 
 # SECRET CONFIGURATION
@@ -83,7 +85,6 @@
 ]
 
 # Structlog Configuration for Local Development
-# Reconfigure to add dev-specific processors (set_exc_info for better tracebacks)
 structlog.configure(
     processors=[
         *STRUCTLOG_SHARED_PROCESSORS,
@@ -127,74 +128,13 @@
         "level": "INFO",
     },
     "loggers": {
-        # Application loggers - DEBUG in local
-        "fpbase": {
-            "handlers": ["console"],
-            "level": "DEBUG",
-            "propagate": False,
-        },
-        "proteins": {
-            "handlers": ["console"],
-            "level": "DEBUG",
-            "propagate": False,
-        },
-        "references": {
-            "handlers": ["console"],
-            "level": "DEBUG",
-            "propagate": False,
-        },
-        "favit": {
-            "handlers": ["console"],
-            "level": "DEBUG",
+        "django.server": {
+            "level": "WARNING",  # Hide normal requests, use structlog instead
             "propagate": False,
         },
-        "celery": {
-            "handlers": ["console"],
-            "level": "DEBUG",
-            "propagate": False,
-        },
-        # Django framework
-        "django": {
-            "handlers": ["console"],
-            "level": os.getenv("DJANGO_LOG_LEVEL", "INFO"),
-            "propagate": False,
-        },
-        "django.db.backends": {
-            "handlers": ["console"],
-            "level": "INFO",  # Set to DEBUG to see SQL queries
-            "propagate": False,
-        },
-        # django-structlog
-        "django_structlog": {
-            "handlers": ["console"],
-            "level": "INFO",
+        "debug_toolbar": {
+            "level": "WARNING",  # Hide debug toolbar noise
             "propagate": False,
         },
     },
 }
-
-# Optional: Desktop logging for specific debugging
-if os.getenv("DESKTOP_LOG"):
-    from pathlib import Path
-
-    LOGGING["handlers"]["file"] = {
-        "level": "DEBUG",
-        "class": "logging.FileHandler",
-        "filename": str(Path.home() / "Desktop/fpbase.log"),
-        "formatter": "colored",
-    }
-    LOGGING["loggers"].update(
-        {
-            "django.template": {
-                "handlers": ["file"],
-                "level": "INFO",
-                "propagate": True,
-            },
-            "django.utils": {
-                "handlers": ["file"],
-                "level": "INFO",
-                "propagate": True,
-            },
-        }
-    )
-    LOGGING["loggers"]["django"]["handlers"].append("file")
diff --git a/backend/config/settings/production.py b/backend/config/settings/production.py
@@ -9,6 +9,7 @@
 
 """
 
+import re
 import ssl
 
 import sentry_sdk
@@ -113,6 +114,14 @@
 # ------------------------
 WHITENOISE_MAX_AGE = 600
 
+
+# http://whitenoise.evans.io/en/stable/django.html#WHITENOISE_IMMUTABLE_FILE_TEST
+# https://github.com/MrBin99/django-vite?tab=readme-ov-file#whitenoise
+def WHITENOISE_IMMUTABLE_FILE_TEST(path, url):
+    # Match vite (rollup)-generated hashes, à la, `some_file-CSliV9zW.js`
+    return re.match(r"^.+[.-][0-9a-zA-Z_-]{8,12}\..+$", url)
+
+
 # EMAIL
 # ------------------------------------------------------------------------------
 DEFAULT_FROM_EMAIL = env("DJANGO_DEFAULT_FROM_EMAIL", default="FPbase <[email protected]>")

diff --git a/backend/config/settings/test.py b/backend/config/settings/test.py
@@ -15,6 +15,11 @@
 DEBUG = False
 TEMPLATES[0]["OPTIONS"]["debug"] = True
 
+# ALLOWED_HOSTS
+# ------------------------------------------------------------------------------
+# Allow all hosts for testing (live_server uses random ports)
+ALLOWED_HOSTS = ["*"]
+
 # SECRET CONFIGURATION
 # ------------------------------------------------------------------------------
 # See: https://docs.djangoproject.com/en/dev/ref/settings/#secret-key
@@ -94,3 +99,12 @@
         ],
     ],
 ]
+
+
+# django-vite in test mode uses manifest (never dev server)
+DJANGO_VITE = {
+    "default": {
+        "dev_mode": False,
+        "manifest_path": str(ROOT_DIR.parent / "frontend" / "dist" / "manifest.json"),
+    }
+}
diff --git a/backend/fpbase/static/js/README.md b/backend/fpbase/static/js/README.md
@@ -1,6 +1,6 @@
 # Legacy Static JavaScript
 
-This directory contains legacy JavaScript that is **isolated from the main webpack bundle** and loaded separately via Django static files.
+This directory contains legacy JavaScript that is **isolated from the main vite bundle** and loaded separately via Django static files.
 
 ## Contents
 

diff --git a/backend/fpbase/templates/500.html b/backend/fpbase/templates/500.html
@@ -1,5 +1,4 @@
 {% extends "base.html" %}
-{% load webpack_static from webpack_loader %}
 
 {% block title %}Server Error{% endblock %}
 
@@ -12,8 +11,6 @@ <h3>Looks like something went wrong :(</h3>
 
 {% block javascript %}
 
-<script src="{% webpack_static 'sentry.js' %}"></script>
-
 {% if sentry_event_id %}
 <script>
   Sentry.init({ dsn: '{{ sentry_dsn }}' });