Revert "Remove django_node_assets"

This reverts commit ede7c2e.

.dockerignore

@@ -61,3 +61,6 @@ docker-bake.hcl
 docker-compose*.yml
 Dockerfile*
 Makefile-os
+
+# Ignore all .git directories in any subdirectory
+.git/

Dockerfile

@@ -175,6 +175,9 @@ RUN \
     --mount=type=bind,src=src,target=${HOME}/src \
     --mount=type=bind,src=Makefile-docker,target=${HOME}/Makefile-docker \
     --mount=type=bind,src=manage.py,target=${HOME}/manage.py \
+    --mount=type=bind,src=package.json,target=${HOME}/package.json \
+    --mount=type=bind,src=package-lock.json,target=${HOME}/package-lock.json \
+    --mount=type=bind,src=vite.config.js,target=${HOME}/vite.config.js \
 <<EOF
 echo "from olympia.lib.settings_base import *" > settings_local.py
 DJANGO_SETTINGS_MODULE="settings_local" make -f Makefile-docker update_assets

Makefile-docker

@@ -71,6 +71,7 @@ data_load:
 
 .PHONY: update_assets
 update_assets:
+	npm $(NPM_ARGS) run build
 	# Copy files required in compress_assets to the static folder
 	# If changing this here, make sure to adapt tests in amo/test_commands.py
 	$(PYTHON_COMMAND) manage.py compress_assets

docker-compose.yml

@@ -49,6 +49,14 @@ services:
       - ${HOST_MOUNT_SOURCE:?}deps:/deps
       - data_site_static:/data/olympia/site-static
       - ${HOST_MOUNT_SOURCE:?}storage:/data/olympia/storage
+
+  static:
+    <<: *olympia
+    volumes:
+      - ${HOST_MOUNT_SOURCE:?}:/data/olympia
+      - ${HOST_MOUNT_SOURCE:?}deps:/deps
+    command: npm run dev -d
+
   worker:
     <<: *olympia
     command: [
@@ -103,7 +111,6 @@ services:
     image: nginx
     volumes:
       - data_nginx:/etc/nginx/conf.d
-      - ${HOST_MOUNT_SOURCE:?}:/srv
       - data_site_static:/srv/site-static
       - ${HOST_MOUNT_SOURCE:?}storage:/srv/storage
     ports:

docker/nginx/addons.conf

@@ -10,13 +10,10 @@ server {
         alias /srv/storage/;
     }
 
+    # Try 3 locations in order: site-static, vite assets (@static), and olympia (@olympia)
+    # TODO: this is not resolving correctly
     location /static/ {
-         alias /srv/static/;
-
-         # Fallback to the uwsgi server if the file is not found in the static files directory.
-         # This will happen for vendor files from pytnon or npm dependencies that won't be available
-         # in the static files directory.
-         error_page 404 = @olympia;
+        try_files $uri @static @olympia;
     }
 
     location /user-media/ {
@@ -39,6 +36,11 @@ server {
         try_files $uri @frontendamo;
     }
 
+    location @static {
+        proxy_pass http://static:5173;
+        add_header X-Served-By "static" always;
+    }
+
     location @olympia {
         uwsgi_pass  web;
         include     uwsgi_params;
@@ -50,6 +52,8 @@ server {
         uwsgi_param   X-Real-IP             $remote_addr;
         uwsgi_param   X-Forwarded-For       $proxy_add_x_forwarded_for;
         uwsgi_param   X-Forwarded-Protocol  ssl;
+
+        add_header X-Served-By "olympia" always;
     }
 
     location @frontendamo {

package.json

@@ -5,6 +5,12 @@
   "engines": {
     "node": ">= 18.18"
   },
+  "type": "module",
+  "scripts": {
+    "dev": "vite -d",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
   "dependencies": {
     "@claviska/jquery-minicolors": "2.3.6",
     "addons-linter": "7.6.0",
@@ -31,6 +37,7 @@
     "jest-environment-jsdom": "^29.7.0",
     "lodash": "^4.17.21",
     "prettier": "^3.3.3",
-    "terser": "^5.36.0"
+    "terser": "^5.36.0",
+    "vite": "^6.0.3"
   }
 }

requirements/prod.txt

@@ -1205,3 +1205,9 @@ watchdog[watchmedo]==3.0.0 \
     --hash=sha256:c9d8c8ec7efb887333cf71e328e39cffbf771d8f8f95d308ea4125bf5f90ba64 \
     --hash=sha256:d00e6be486affb5781468457b21a6cbe848c33ef43f9ea4a73b4882e5f188a44 \
     --hash=sha256:d429c2430c93b7903914e4db9a966c7f2b068dd2ebdd2fa9b9ce094c7d459f33
+django-vite==3.0.5 \
+    --hash=sha256:049b74f38c999cbfcf0e2c21b254c2e059bb97bfd7e4049caf2d0f9fba0b482f \
+    --hash=sha256:431c1212e7627adc20666d150578f1a8983f043e90f3905778fb3c5c0ffe6963
+django-node-assets==0.9.14 \
+    --hash=sha256:80cbe3d10521808309712b2aa5ef6d69799bbcafef844cf7f223d3c93f405768 \
+    --hash=sha256:d5b5c472136084d533268f52ab77897327863a102e25c81f484aae85eb806987

settings.py

@@ -9,6 +9,7 @@
 import os
 from urllib.parse import urlparse
 
+from olympia.core.utils import get_version_json
 from olympia.lib.settings_base import *  # noqa
 
 
@@ -198,3 +199,8 @@ def insert_debug_toolbar_middleware(middlewares):
 }
 
 ENABLE_ADMIN_MLBF_UPLOAD = True
+
+print('DJANGO_VITE banana', get_version_json().get('target'))
+
+# Override the dev mode from the base settings depending on if we are in a production image
+DJANGO_VITE["default"]["dev_mode"] = get_version_json().get('target') != 'production'

src/olympia/core/apps.py

@@ -1,3 +1,4 @@
+import json
 import logging
 import os
 import subprocess
@@ -120,6 +121,29 @@ def static_check(app_configs, **kwargs):
             )
         )
 
+    if not os.path.exists(settings.STATIC_BUILD_MANIFEST_PATH):
+        errors.append(
+            Error(
+                f'Static build manifest file does not exist: {settings.STATIC_BUILD_MANIFEST_PATH}',
+                id='setup.E003',
+            )
+        )
+    else:
+        with open(settings.DJANGO_VITE['default']['manifest_path'], 'r') as f:
+            manifest = json.load(f)
+
+            for name, asset in manifest.items():
+                # Assets compiled by vite are in the static root directory
+                # after running collectstatic. So we should look there.
+                path = os.path.join(settings.STATIC_ROOT, asset['file'])
+                if not os.path.exists(path):
+                    errors.append(
+                        Error(
+                            f'Static asset {name} does not exist at expected path: {path}',
+                            id='setup.E003',
+                        )
+                    )
+
     return errors
 
 

src/olympia/devhub/templates/devhub/index.html

@@ -3,6 +3,10 @@
 <!DOCTYPE html>
 <html lang="{{ LANG }}" dir="{{ DIR }}">
   <head>
+    <!-- vite -->
+    {{ vite_hmr_client() }}
+    # TODO: cannot resolve the asset in prod mode
+    {{ vite_asset('js/blue.js') }}
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     {% if not settings.ENGAGE_ROBOTS %}

src/olympia/lib/settings_base.py

@@ -376,6 +376,10 @@ def get_db_config(environ_var, atomic_requests=True):
             path('src/olympia/templates'),
         ),
         'OPTIONS': {
+            'globals': {
+                'vite_hmr_client': 'django_vite.templatetags.django_vite.vite_hmr_client',
+                'vite_asset': 'django_vite.templatetags.django_vite.vite_asset',
+            },
             # http://jinja.pocoo.org/docs/dev/extensions/#newstyle-gettext
             'newstyle_gettext': True,
             # Match our regular .html and .txt file endings except
@@ -562,6 +566,8 @@ def get_db_config(environ_var, atomic_requests=True):
     'rangefilter',
     'django_recaptcha',
     'drf_yasg',
+    'django_vite',
+    'django_node_assets',
     # Django contrib apps
     'django.contrib.admin',
     'django.contrib.auth',
@@ -1324,13 +1330,17 @@ def read_only_mode(env):
 STATICFILES_FINDERS = (
     'django.contrib.staticfiles.finders.FileSystemFinder',
     'django.contrib.staticfiles.finders.AppDirectoriesFinder',
+    'django_node_assets.finders.NodeModulesFinder',
 )
 
 NODE_MODULES_ROOT = path('node_modules')
 NODE_PACKAGE_JSON = path('package.json')
 NODE_PACKAGE_MANAGER_INSTALL_OPTIONS = ['--dry-run']
 
-STATIC_BUILD_PATH = os.path.join('/', 'data', 'olympia', 'static-build')
+STATIC_BUILD_PATH = path('static-build')
+# The manifest file is created in static-build but copied into the static root
+# so we should expect to find it at /<static_root/<static_build>/manifest.json
+STATIC_BUILD_MANIFEST_PATH = path(STATIC_BUILD_PATH, 'manifest.json')
 
 STATICFILES_DIRS = (
     path('static'),
@@ -1617,3 +1627,13 @@ def read_only_mode(env):
 TESTING_ENV = False
 
 ENABLE_ADMIN_MLBF_UPLOAD = False
+
+# TODO: we need to make this work for production environments as well.
+DJANGO_VITE = {
+  "default": {
+    # Always use prod mode in the base settings. We can override this in settings.py
+    "dev_mode": False,
+    # "static_url_prefix": "",
+    "manifest_path": STATIC_BUILD_MANIFEST_PATH,
+  }
+}

static/css/index.css

@@ -0,0 +1,3 @@
+* {
+  color: red;
+}

static/css/index.css.js

@@ -0,0 +1 @@
+import './index.css';

static/js/blue.css

@@ -0,0 +1,3 @@
+* {
+  color: blue !important;
+}

static/js/blue.js

@@ -0,0 +1,3 @@
+import './blue.css';
+
+alert('blue');

static/js/common/index.js

@@ -0,0 +1,15 @@
+import 'underscore/underscore.js';
+import '../zamboni/init.js';
+import '../zamboni/capabilities.js';
+import '../lib/format.js';
+import 'jquery.cookie/jquery.cookie.js';
+import '../zamboni/storage.js';
+import '../common/keys.js';
+import '../zamboni/helpers.js';
+import '../zamboni/global.js';
+import '../zamboni/l10n.js';
+// Unicode letters for our makeslug function
+import '../zamboni/unicode.js';
+// Login tweaks
+import '../zamboni/users.js';
+import '../common/lang_switcher.js';

static/js/index.js

@@ -0,0 +1 @@
+console.log('Hello World');