[standalone_app] Migrate to Vite from Webpack

.github/workflows/e2e-standalone-tests.yml

@@ -5,18 +5,18 @@ on:
       - main
     paths:
       - '.github/workflows/e2e-standalone-tests.yml'
-      - '**.py'
-      - '**.ts'
-      - '**.tsx'
-      - 'package.json'
-      - 'package-lock.json'
-      - 'tsconfig.json'
+      - 'standalone_app/**.ts'
+      - 'standalone_app/**.tsx'
+      - 'standalone_app/package.json'
+      - 'standalone_app/package-lock.json'
+      - 'standalone_app/tsconfig.json'
+      - 'standalone_app/vite.config.js'
 jobs:
   test:
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-latest
     strategy:
       matrix:
-        optuna-version: ['git+https://github.com/optuna/optuna.git']
+        optuna-version: ['optuna']
     steps:
       - uses: actions/checkout@v3
 
@@ -41,8 +41,15 @@ jobs:
           python -m pip install --progress-bar off .
           python -m pip install --progress-bar off pytest-playwright==0.4.3  # next version is flaky
 
+      - name: Build rustlib
+        working-directory: rustlib
+        run: wasm-pack build --target web
+
       - name: Build standalone_app
-        run: make MODE="prd" standalone_app/public/bundle.js
+        working-directory: standalone_app
+        run: |
+          npm install
+          npx vite build --outDir dist
 
       - name: Install the required browsers
         run: playwright install

.github/workflows/gh-pages.yml

@@ -30,20 +30,18 @@ jobs:
         uses: actions/setup-node@v2
         with:
           node-version: '18'
+      - name: Build rustlib
+        working-directory: rustlib
+        run: wasm-pack build --target web
       - name: Build standalone_app
-        env:
-          PUBLIC_PATH: /optuna-dashboard/public/
-        run: make MODE="prd" standalone_app/public/bundle.js
-      - name: Create publish directory
+        working-directory: standalone_app
         run: |
-          mkdir gh-publish
-          cp -r standalone_app/public gh-publish/public
-          cp standalone_app/favicon.ico gh-publish/favicon.ico
-          cp standalone_app/github-pages.html gh-publish/index.html
+          npm install
+          npx vite build --base=/optuna-dashboard/public/ --outDir ./gh-pages
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v2
         with:
-          path: './gh-publish'
+          path: './standalone_app/gh-pages'
       - name: Deploy to GitHub Pages
         id: deployment
         uses: actions/deploy-pages@v2

.gitignore

@@ -10,7 +10,6 @@ optuna_dashboard/public/
 
 # JS
 node_modules/
-standalone_app/public/
 
 # VSCode
 vscode/assets/

Makefile

@@ -4,27 +4,23 @@ PYTHON ?= python3
 MODE ?= dev
 RST_FILES := $(shell find docs -name '*.rst')
 PYTHON_FILES := $(shell find optuna_dashboard/ -name '*.py')
-DASHBOARD_TS_IN := $(shell find ./optuna_dashboard -name '*.ts' -o -name '*.tsx')
+DASHBOARD_TS_SRC := $(shell find ./optuna_dashboard -name '*.ts' -o -name '*.tsx')
 DASHBOARD_TS_OUT = optuna_dashboard/public/bundle.js optuna_dashboard/public/favicon.ico
 RUSTLIB_OUT = rustlib/pkg/optuna_wasm.js rustlib/pkg/optuna_wasm_bg.wasm rustlib/pkg/package.json
-STANDALONE_OUT = standalone_app/public/bundle.js vscode/assets/bundle.js
+STANDALONE_SRC := $(shell find ./standalone_app/src -name '*.ts' -o -name '*.tsx')
 
 $(RUSTLIB_OUT): rustlib/src/*.rs rustlib/Cargo.toml
 	cd rustlib && wasm-pack build --target web
 
-$(STANDALONE_OUT): $(RUSTLIB_OUT)
-	cd standalone_app && npm install && npm run build:$(MODE)
+vscode/assets/bundle.js: $(RUSTLIB_OUT) $(STANDALONE_SRC)
+	cd standalone_app && npm install && npm run build:vscode
 
-$(DASHBOARD_TS_OUT): $(DASHBOARD_TS_IN)
+$(DASHBOARD_TS_OUT): $(DASHBOARD_TS_SRC)
 	npm install && npm run build:$(MODE)
 
-.PHONY: watch-standalone-app
-watch-standalone-app: standalone_app/public/bundle.js
-	cd standalone_app && npm run watch
-
 .PHONY: serve-browser-app
-serve-browser-app: standalone_app/public/bundle.js
-	$(PYTHON) -m http.server 9000 --directory ./standalone_app/
+serve-browser-app: $(RUSTLIB_OUT)
+	cd standalone_app && npm run watch
 
 .PHONY: vscode-extension
 vscode-extension: vscode/assets/bundle.js

e2e_tests/test_server.py

@@ -43,7 +43,7 @@ def stop_server() -> None:
 def make_standalone_server(request: pytest.FixtureRequest) -> str:
     addr = "127.0.0.1"
     port = get_free_port()
-    directory = "./standalone_app/"
+    directory = "./standalone_app/dist/"
 
     Handler = http.server.SimpleHTTPRequestHandler
     httpd = socketserver.TCPServer(

standalone_app/index.html

@@ -3,8 +3,13 @@
 <head>
   <meta charset="utf-8" />
   <title>Optuna Dashboard (Wasm ver.)</title>
-  <script defer type="module" src="/public/bundle.js"></script>
-  <link rel="icon" href="/favicon.ico" />
+  <script defer type="module" src="/src/browser_app_entry.tsx"></script>
+  <link rel="icon" href="/public/favicon.ico" />
+
+  <meta property="og:title" content="Optuna Dashboard (Wasm ver.)" />
+  <meta property="og:type" content="website" />
+  <meta property="og:url" content="https://optuna.github.io/optuna-dashboard/" />
+  <meta property="og:description" content="Web Dashboard for Optuna, Python library for hyperparameter optimization" />
 </head>
 <body>
   <div id="root"></div>