Introduce vite to transpile js/css assets for development and product…

…ion + vitest for static file testing (#22957)

* Build assets with django_vite

* Rename "preload" to "jquery_base"

* TMP: remove print

Dockerfile

@@ -182,6 +182,9 @@ RUN \
     --mount=type=bind,src=Makefile-docker,target=${HOME}/Makefile-docker \
     --mount=type=bind,src=scripts/update_assets.py,target=${HOME}/scripts/update_assets.py \
     --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
 make -f Makefile-docker update_assets
 EOF

Makefile-docker

@@ -48,6 +48,10 @@ data_load:
 update_assets: ## Update the static assets
 	$(HOME)/scripts/update_assets.py
 
+.PHONY: run_vite
+run_vite:
+	npm run $(NPM_ARGS) dev
+
 .PHONY: update_deps
 update_deps: ## Update the dependencies
 	$(HOME)/scripts/install_deps.py $(DEPS)
@@ -166,11 +170,11 @@ test_failed: ## rerun the failed tests from the previous run
 
 .PHONY: run_js_tests
 run_js_tests: ## Run the JavaScript test suite (requires compiled/compressed assets).
-	npm exec $(NPM_ARGS) -- jest tests/js
+	npm run test tests/js
 
 .PHONY: watch_js_tests
 watch_js_tests: ## Run+watch the JavaScript test suite (requires compiled/compressed assets).
-	npm exec $(NPM_ARGS) -- jest --watch
+	npm run test:watch tests/js
 
 .PHONY: format
 format: ## Autoformat our codebase.

Makefile-os

@@ -80,7 +80,7 @@ help_submake:
 
 .PHONY: test_setup
 test_setup:
-	npm exec jest -- ./tests/make --runInBand
+	npm run test tests/make
 
 .PHONY: setup
 setup: ## create configuration files version.json and .env required to run this project

docker-compose.yml

@@ -37,6 +37,15 @@ x-olympia: &olympia
   entrypoint: ["/data/olympia/docker/entrypoint.sh"]
 
 services:
+  static:
+    <<: *olympia
+    ports:
+      - "5173:5173"
+    volumes:
+      - ./:/data/olympia
+      - ./deps:/data/olympia/deps
+    command: make run_vite
+
   worker:
     <<: *olympia
     command: [

docker/nginx/addons.conf

@@ -10,6 +10,21 @@ server {
         alias /srv/storage/;
     }
 
+    location ^~ /static/bundle/ {
+        proxy_pass http://static;
+
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection 'upgrade';
+        proxy_set_header Host $host;
+        proxy_set_header X-Forwarded-For    $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto  $scheme;
+        proxy_http_version 1.1;
+        proxy_cache_bypass $http_upgrade;
+        proxy_buffering off;
+
+        add_header X-Served-By "vite" always;
+    }
+
     location ~ ^/static/(.*)$ {
         add_header X-Served-By "nginx" always;
 
@@ -98,3 +113,7 @@ upstream addons-frontend {
     # This port is set in the `docker-compose.yml` file of addons-server.
     server addons-frontend:7010;
 }
+
+upstream static {
+    server static:5173;
+}