Build assets with django_vite

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)

docker-compose.yml

@@ -46,6 +46,17 @@ services:
     volumes:
       # used by: web, worker, nginx
       - ./:/data/olympia
+
+  static:
+    <<: *olympia
+    ports:
+      - "5173:5173"
+    volumes:
+      - ./:/data/olympia
+    command: make run_vite
+    depends_on:
+      - olympia_volumes
+
   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;
+}

jest.config.js

@@ -1,6 +1,6 @@
 // For a detailed explanation regarding each configuration property, visit:
 // https://jestjs.io/docs/en/configuration.html
-module.exports = {
+export default {
   setupFiles: ['<rootDir>/tests/js/setup.js'],
   testMatch: ['<rootDir>/tests/**/*.spec.js'],
   testEnvironment: 'jsdom',