Build assets with django_vite

Fix all of the friggin eslint errors

Add admin js entries

Check for dead code

Fix lint

.github/workflows/_test.yml

@@ -44,10 +44,6 @@ jobs:
             run: |
               make compile_locales
               make test_needs_locales_compilation
-          -
-            name: Static Assets
-            services: ''
-            run: make test_static_assets
           -
             name: Internal Routes
             services: ''

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)
@@ -61,7 +65,8 @@ setup-ui-tests:
 lint: ## lint the code
 	ruff check .
 	ruff format --check .
-	npm exec $(NPM_ARGS) -- prettier --check '**'
+	npm run lint
+	npm run knip
 	curlylint src/
 
 lint-codestyle: lint
@@ -92,17 +97,11 @@ test_needs_locales_compilation:
 		-m 'needs_locales_compilation' \
 		$(ARGS)
 
-.PHONY: test_static_assets
-test_static_assets: run_js_tests
-	pytest $(PYTEST_SRC) \
-		-m 'static_assets' \
-		$(ARGS)
-
 .PHONY: test_main
 test_main:
 	pytest $(PYTEST_SRC) \
 		-n auto \
-		-m 'not es_tests and not needs_locales_compilation and not static_assets and not internal_routes_allowed' \
+		-m 'not es_tests and not needs_locales_compilation and not internal_routes_allowed' \
 		$(ARGS)
 
 .PHONY: test_internal_routes_allowed
@@ -120,7 +119,7 @@ test_internal_routes_allowed:
 test_es_tests:
 	pytest \
 		$(PYTEST_SRC) \
-		-m 'es_tests and not needs_locales_compilation and not static_assets' \
+		-m 'es_tests and not needs_locales_compilation' \
 		$(ARGS)
 
 .PHONY: test
@@ -166,15 +165,15 @@ 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
 
 .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
 
 .PHONY: format
 format: ## Autoformat our codebase.
-	npm exec $(NPM_ARGS) -- prettier --write '**'
+	npm run lint:fix
 	ruff check --fix-only .
 	ruff format .
 

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;
+}

docs/topics/development/static-files.md

@@ -62,7 +62,7 @@ Static files specific to the addons-server project are stored in the `./static`
 In reality there are 3 static directories in our docker compose container:
 
 - `/data/olympia/static`: Contains static files that are mounted directly from the host.
-- `/data/olympia/static-build`: Contains static files that are built by `compress_assets`.
+- `/data/olympia/static-build`: Contains static files that are built by `vite`.
 - `/data/olympia/site-static`: Contains static files that are collected by the `collectstatic` command.
 
 The only of these directories that is exposed to your host is the `./static` directory.
@@ -83,5 +83,5 @@ During development they are served by the django development server.
 
 ### npm Dependencies
 
-We have a (complex) set of npm static assets that are built by the `compress_assets` management command.
-During development, these assets are served directly from the node_modules directory using a custom static finder.
+Static assets are built with vite and served via the django-vite plugin or in development
+via the vite development server.

docs/topics/playground.md

@@ -77,7 +77,7 @@ Here is the content
 
 You can inline render images
 
-![favicon](../../static/img/favicon.ico)
+![favicon](../../static/public/img/favicon.ico)
 
 ### Formatting
 

eslint.config.js

@@ -0,0 +1,58 @@
+// eslint.config.js
+import js from '@eslint/js';
+import pluginPrettier from 'eslint-plugin-prettier';
+import globals from 'globals';
+
+export default [
+  {
+    files: ['tests/js/**/*.js'],
+    ...js.configs.recommended,
+    languageOptions: {
+      ecmaVersion: 'latest',
+      sourceType: 'module',
+      globals: {
+        ...globals.jest,
+        ...globals.node,
+      },
+    },
+  },
+  {
+    files: ['**/*.js'],
+    ignores: [
+      'deps/**',
+      'node_modules/**',
+      'site-static/**',
+      'static-build/**',
+    ],
+    ...js.configs.recommended,
+    languageOptions: {
+      ecmaVersion: 'latest',
+      sourceType: 'module',
+      globals: {
+        ...globals.browser,
+        gettext: 'readonly',
+        ngettext: 'readonly',
+      },
+    },
+
+    plugins: {
+      prettier: pluginPrettier,
+    },
+
+    rules: {
+      'no-undef': 2,
+      'no-implicit-globals': 'error',
+      strict: ['error', 'global'],
+
+      'prettier/prettier': [
+        'error',
+        {
+          arrowParens: 'always',
+          singleQuote: true,
+          trailingComma: 'all',
+          proseWrap: 'never',
+        },
+      ],
+    },
+  },
+];

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',

knip.json

@@ -0,0 +1,14 @@
+{
+  "$schema": "https://unpkg.com/knip@5/schema.json",
+  "entry": ["static/js/*.js", "static/css/*.{less,css}"],
+  "project": ["static/**/*.{js,less,css}"],
+  "vite": {
+    "config": "vite.config.js"
+  },
+  "jest": {
+    "config": "jest.config.js"
+  },
+  "eslint": {
+    "config": "eslint.config.js"
+  }
+}