tlambert03 · tlambert03 · Jun 13, 2023 · Jun 15, 2023 · Jun 18, 2023 · Jun 18, 2023
diff --git a/backend/config/settings/base.py b/backend/config/settings/base.py
@@ -204,26 +204,20 @@
 STATIC_URL = "/static/"
 
 # See: https://docs.djangoproject.com/en/dev/ref/contrib/staticfiles/#std:setting-STATICFILES_DIRS
-STATICFILES_DIRS = [str(ROOT_DIR.parent / "frontend" / "dist")]
+STATICFILES_DIRS = []
 
 # See: https://docs.djangoproject.com/en/dev/ref/contrib/staticfiles/#staticfiles-finders
 STATICFILES_FINDERS = [
     "django.contrib.staticfiles.finders.FileSystemFinder",
     "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")
+# Where vite assets are built to.
+DJANGO_VITE_ASSETS_PATH = str(ROOT_DIR.parent / "frontend" / "dist")
+STATICFILES_DIRS.append(DJANGO_VITE_ASSETS_PATH)
+# If use HMR or not.
+DJANGO_VITE_DEV_MODE = DEBUG
 
 
 # MEDIA CONFIGURATION

diff --git a/backend/config/settings/test.py b/backend/config/settings/test.py
@@ -4,8 +4,6 @@
 - Used to run tests fast on the continuous integration server and locally
 """
 
-from webpack_loader.loader import FakeWebpackLoader
-
 from .base import *  # noqa
 
 # DEBUG
@@ -63,11 +61,3 @@
         ],
     ],
 ]
-
-
-class MockWebpackLoader(FakeWebpackLoader):
-    def get_assets(self):
-        return {}
-
-
-WEBPACK_LOADER["DEFAULT"]["LOADER_CLASS"] = "config.settings.test.MockWebpackLoader"
diff --git a/backend/conftest.py b/backend/conftest.py
@@ -36,6 +36,17 @@ def uses_frontend(request):
         subprocess.check_output(["pnpm", "--filter", "fpbase", "build"], stderr=subprocess.PIPE)
 
 
+@pytest.fixture()
+def use_real_webpack_loader(monkeypatch):
+    from webpack_loader import config, loader, utils
+
+    monkeypatch.setattr(
+        utils,
+        "get_loader",
+        lambda config_name: loader.WebpackLoader(config_name, config.load_config(config_name)),
+    )
+
+
 @pytest.fixture(scope="session", autouse=True)
 def _mock_blast_db(tmp_path_factory: "TempPathFactory"):
     from proteins.util import blast
@@ -47,14 +58,3 @@ def _mock_blast_db(tmp_path_factory: "TempPathFactory"):
         yield
     finally:
         blast.BLAST_DB = prev
-
-
-@pytest.fixture()
-def use_real_webpack_loader(monkeypatch):
-    from webpack_loader import config, loader, utils
-
-    monkeypatch.setattr(
-        utils,
-        "get_loader",
-        lambda config_name: loader.WebpackLoader(config_name, config.load_config(config_name)),
-    )
diff --git a/backend/fpbase/templates/500.html b/backend/fpbase/templates/500.html
@@ -1,5 +1,5 @@
 {% extends "base.html" %}
-{% load webpack_static from webpack_loader %}
+{% load django_vite %}
 
 {% block title %}Server Error{% endblock %}
 
@@ -12,11 +12,9 @@ <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 }}' });
+  Sentry.init();
   Sentry.showReportDialog({
     eventId: '{{ sentry_event_id }}',
     user: window.FPBASE.user

diff --git a/backend/fpbase/templates/base.html b/backend/fpbase/templates/base.html
@@ -1,6 +1,6 @@
 {% load i18n %}
+{% load django_vite %}
 {% load static %}
-{% load render_bundle from webpack_loader %}
 {% load webp_picture from protein_tags %}
 
 <!DOCTYPE html>
@@ -16,6 +16,16 @@
     <meta http-equiv="Content-Language" content="en">
     <meta http-equiv="x-ua-compatible" content="ie=edge">
     <title>{% block title %}FPbase :: The Fluorescent Protein Database{% endblock title %}</title>
+
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
+
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/autocomplete.js/0/autocomplete.jquery.min.js"></script>
+
+    {% vite_hmr_client %}
     <script type="application/ld+json">
     {
       "@context": "http://schema.org",
@@ -36,7 +46,6 @@
     <meta name="author" content="Talley Lambert">
     <meta name="copyright" content="Talley Lambert" />
 
-
     {% block twitter_card %}
       <meta name="twitter:card" content="{% block twitter_card_type %}summary{% endblock twitter_card_type %}" />
       <meta name="twitter:site" content="@FPbase" />
@@ -54,7 +63,7 @@
       <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
     <![endif]-->
 
-    {% render_bundle 'main' 'css' %}
+    {% vite_asset 'index.js' %}
 
       <script>
         window.FPBASE = window.FPBASE || {};
@@ -142,12 +151,11 @@
     {% endblock body %}
 
       <!-- place project specific Javascript -->
-      {% render_bundle 'main' 'js' %}
-      <script>
+      {% vite_asset 'index.js' %}
+      <script type="module">
         FPBASE.initAutocomplete();
       </script>
 
-
       {% block javascript %}{% endblock %}
 
   </body>

diff --git a/backend/fpbase/templates/pages/about.html b/backend/fpbase/templates/pages/about.html
@@ -1,5 +1,6 @@
 {% extends "base.html" %}
 {% load webp_picture from protein_tags %}
+{% load django_vite %}
 {% load static %}
 
 {% block title %}About FPbase: The Fluorescent Protein Database {% endblock %}

diff --git a/backend/fpbase/templates/pages/home_old.html b/backend/fpbase/templates/pages/home_old.html
diff --git a/backend/fpbase/templates/pages/test_autocomplete.html b/backend/fpbase/templates/pages/test_autocomplete.html
@@ -1,6 +1,4 @@
 {% extends "base.html" %}
-{% load webpack_static from webpack_loader %}
-
 
 {% block content %}
 <div class="container">

diff --git a/backend/proteins/templates/ichart.html b/backend/proteins/templates/ichart.html
@@ -1,4 +1,5 @@
 {% extends "base.html" %}
+{% load django_vite %}
 {% load static %}
 
 {% block title %}Interactive Fluorescent Protein Property Visualization{% endblock %}

diff --git a/backend/proteins/templates/lineage.html b/backend/proteins/templates/lineage.html
@@ -1,8 +1,10 @@
 {% extends "base.html" %}
+{% load django_vite %}
 {% load static %}
 
 {% block extrahead %}
     <link rel="preload" href="{% static 'images/GFP_spinner.gif' %}" as="image">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js" integrity="sha512-oJp0DdQuQQrRsKVly+Ww6fAN1GwJN7d1bi8UubpEbzDUh84WrJ2CFPBnT4LqBCcfqTcHR5OGXFFhaPe3g1/bzQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 {% endblock extrahead %}
 
 {% block title %}Fluorescent Protein Lineages at FPbase{% endblock %}
@@ -30,7 +32,6 @@ <h1>Fluorescent Protein Lineages</h1>
 
 <script>
 
-
 $('.lineage').each(function(i, el){
   $(el).html('<p>loading lineage info... <img src="' + '{% static 'images/GFP_spinner.gif' %}' + '">');
   $.getJSON("/ajax" + window.location.pathname + window.location.search, function(data){