Migrate to vite for webui

docker-compose.yml

@@ -189,9 +189,9 @@ services:
     entrypoint: >
       bash -c "
       sleep 10;
-      echo yes | redis-cli --user openvsx --cluster create 
-      redis-node-1:7000 redis-node-2:7000 redis-node-3:7000 
-      redis-node-4:7000 redis-node-5:7000 redis-node-6:7000 
+      echo yes | redis-cli --user openvsx --cluster create
+      redis-node-1:7000 redis-node-2:7000 redis-node-3:7000
+      redis-node-4:7000 redis-node-5:7000 redis-node-6:7000
       --cluster-replicas 1"
     profiles:
       - redis
@@ -225,11 +225,12 @@ services:
       - backend
 
   webui:
-    image: node:18
+    image: node:22
     working_dir: /app
-    command: sh -c 'yarn && yarn build && yarn build:default && yarn watch & yarn watch:default & yarn start:default'
+    command: sh -c 'yarn install --immutable && yarn build:server && yarn watch:default & yarn start:default'
     volumes:
       - ./webui:/app
+      - /app/node_modules
     ports:
       - 3000:3000
     depends_on:
@@ -239,7 +240,7 @@ services:
       - frontend
 
   cli:
-    image: node:18
+    image: node:22
     working_dir: /app
     command: sh -c 'yarn && yarn watch'
     volumes:

webui/.gitignore

@@ -5,6 +5,7 @@
 !.yarn/releases
 !.yarn/sdks
 !.yarn/versions
+/dist/
 /lib/
 /static/bundle.*
 /static/*-report.html

webui/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 This change log covers only the frontend library (webui) of Open VSX.
 
+## [v0.19.0] (unreleased)
+
+### Changed
+
+- Switch from webpack to vite for building the bundle ([#1399](https://github.com/eclipse/openvsx/pull/1399))
+
 ## [v0.18.0] (Feb. 2026)
 
 ### Added

webui/Dockerfile

@@ -1,10 +1,11 @@
-FROM node:20-alpine3.17 AS builder
+FROM node:22-alpine3.22 AS builder
 
 # Copy sources
-COPY --chown=node:node package.json tsconfig.json yarn.lock .yarnrc.yml /home/node/builder/
+COPY --chown=node:node package.json tsconfig.json vite.config.ts yarn.lock .yarnrc.yml /home/node/builder/
 WORKDIR /home/node/builder
 COPY --chown=node:node .yarn ./.yarn/
 COPY --chown=node:node configs ./configs/
+COPY --chown=node:node index.html ./
 COPY --chown=node:node src ./src/
 COPY --chown=node:node static ./static/
 COPY --chown=node:node test ./test/
@@ -14,14 +15,13 @@ RUN corepack enable
 RUN corepack prepare yarn@stable --activate
 RUN yarn install --immutable
 RUN yarn test
-RUN yarn build
 RUN yarn build:default
 
 
-FROM node:20-alpine3.17
+FROM node:22-alpine3.22
 
 # Copy build result to runtime directory
-COPY --chown=node:node --from=builder /home/node/builder/static /home/node/webui/static/
+COPY --chown=node:node --from=builder /home/node/builder/dist /home/node/webui/dist/
 COPY --chown=node:node --from=builder /home/node/builder/lib/default/server.js /home/node/webui/lib/default/
 WORKDIR /home/node/webui
 

webui/configs/app.tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "extends": "./base.tsconfig.json",
+  "compilerOptions": {
+    "noEmit": true
+  },
+  "include": [
+    "../src/**/*"
+  ],
+  "exclude": [
+    "../src/default/server.ts"
+  ]
+}

webui/configs/base.tsconfig.json

@@ -1,24 +1,24 @@
 {
-    "compilerOptions": {
-        "target": "es6",
-        "module": "es6",
-        "moduleResolution": "node",
-        "allowSyntheticDefaultImports": true,
-        "lib": [
-            "es6", "es2020.string", "dom"
-        ],
-        "typeRoots": [
-            "node_modules/@types", "typings"
-        ],
-        "sourceMap": true,
-        "declaration": true,
-        "declarationMap": true,
-        "noImplicitAny": true,
-        "noImplicitThis": true,
-        "noImplicitReturns": true,
-        "noUnusedLocals": true,
-        "strictNullChecks": true,
-        "jsx": "react",
-        "baseUrl": "./src"
-    }
-}
+  "compilerOptions": {
+    "target": "es6",
+    "module": "es6",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "lib": [
+      "es6", "es2020.string", "dom"
+    ],
+    "typeRoots": [
+      "node_modules/@types", "typings"
+    ],
+    "sourceMap": true,
+    "declaration": true,
+    "declarationMap": true,
+    "noImplicitAny": true,
+    "noImplicitThis": true,
+    "noImplicitReturns": true,
+    "noUnusedLocals": true,
+    "strictNullChecks": true,
+    "jsx": "react-jsx",
+    "baseUrl": "./src"
+  }
+}

webui/configs/eslintrc.mjs

@@ -65,6 +65,7 @@ export default [...compat.extends(
         "@/semi": ["error", "always"],
         "@stylistic/type-annotation-spacing": "warn",
         "react/prop-types": "off",
+        "react/react-in-jsx-scope": ["off"],
         "array-bracket-spacing": ["warn", "never"],
 
         "arrow-spacing": ["warn", {

webui/configs/lib.tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "extends": "./base.tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../lib"
+  },
+  "include": [
+    "../src/**/*"
+  ],
+  "exclude": [
+    "../src/default/server.ts"
+  ]
+}

webui/configs/node.tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+
+    "lib": [
+      "ESNext"
+    ],
+
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+
+  "include": [
+    "../vite.config.ts",
+    "../configs/**.ts"
+  ]
+}

webui/configs/server.tsconfig.json

@@ -1,11 +1,13 @@
 {
-    "extends": "./base.tsconfig.json",
-    "compilerOptions": {
-        "module": "commonjs",
-        "lib": ["es6"],
-        "outDir": "../lib/default"
-    },
-    "files": [
-        "../src/default/server.ts"
-    ]
-}
+  "extends": "./base.tsconfig.json",
+  "compilerOptions": {
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "lib": ["es6"],
+    "skipLibCheck": true,
+    "outDir": "../lib/default"
+  },
+  "include": [
+    "../src/default/server.ts"
+  ]
+}

webui/configs/test.tsconfig.json

@@ -1,9 +1,10 @@
 {
     "extends": "./base.tsconfig.json",
     "compilerOptions": {
-        "module": "commonjs"
+        "module": "commonjs",
+        "moduleResolution": "node"
     },
     "include": [
         "src", "test", "typings"
     ]
-}
+}

webui/configs/tsconfig.app.json

@@ -0,0 +1,45 @@
+{
+    "compilerOptions": {
+        "target": "es6",
+        "module": "es6",
+
+        "lib": [
+            "es6", "es2020.string", "dom"
+        ],
+        "typeRoots": [
+            "node_modules/@types", "typings"
+        ],
+
+        "sourceMap": true,
+        "declaration": true,
+        "declarationMap": true,
+        "esModuleInterop": true,
+
+        "moduleResolution": "bundler",
+        "allowImportingTsExtensions": true,
+        "allowSyntheticDefaultImports": true,
+        "isolatedModules": true,
+        "moduleDetection": "force",
+        "noEmit": true,
+        "jsx": "react-jsx",
+
+        "strict": true,
+        "noUnusedLocals": true,
+        "noUnusedParameters": false,
+        "noFallthroughCasesInSwitch": true,
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "noImplicitReturns": true,
+        "strictNullChecks": true,
+
+        "baseUrl": "./src"
+    },
+
+    "include": [
+      "../src", "../typings"
+    ],
+
+    "exclude": [
+      "**/*.spec.ts", "**/*.spec.tsx", "**/server.ts"
+    ]
+}

webui/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
+</head>
+
+<body>
+  <div id="main"></div>
+  <script type='module' src='/src/default/default-app.tsx'></script>
+</body>
+
+</html>