Merge pull request #828 from c-bata/vite-standalone-app

[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 make_test_server(
 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/github-pages.html

@@ -1,19 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="utf-8" />
-  <title>Optuna Dashboard (Wasm ver.)</title>
-  <script defer type="module" src="/optuna-dashboard/public/bundle.js"></script>
-  <link rel="icon" href="/optuna-dashboard/favicon.ico" />
-
-  <!-- ogp -->
-  <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:image" content="/img/ogp_image.png" />
-  <meta property="og:description" content="Web Dashboard for Optuna, Python library for hyperparameter optimization" />
-</head>
-<body>
-  <div id="root"></div>
-</body>
-</html>

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>

standalone_app/package.json

@@ -4,20 +4,18 @@
   "version": "0.0.0",
   "description": "",
   "scripts": {
-    "watch": "NODE_ENV=development TYPESCRIPT_LOADER=esbuild-loader webpack --watch",
-    "serve": "python3 -m http.server 9000 --directory .",
-    "build:dev": "NODE_ENV=development TYPESCRIPT_LOADER=esbuild-loader webpack",
-    "build:prd": "NODE_ENV=production webpack"
+    "watch": "vite",
+    "build:vscode": "webpack"
   },
   "devDependencies": {
     "@types/plotly.js": "^2.29.2",
     "@types/react": "^18.2.64",
     "@types/react-dom": "^18.2.21",
     "@types/react-router-dom": "^5.3.3",
+    "@vitejs/plugin-react": "^4.2.1",
     "compression-webpack-plugin": "^11.1.0",
     "esbuild-loader": "^4.0.3",
-    "ts-loader": "^9.5.1",
-    "typescript": "^5.4.2",
+    "vite": "^5.1.5",
     "webpack": "^5.90.3",
     "webpack-cli": "^5.1.4"
   },

standalone_app/vite.config.js

@@ -0,0 +1,18 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [react()],
+  define: {
+    'IS_VSCODE': JSON.stringify(false),
+  },
+  optimizeDeps: {
+    exclude: ['@sqlite.org/sqlite-wasm'],
+  },
+  server: {
+    fs: {
+        // Allow serving wasm files in node_modules
+        allow: ['..'],
+    },
+  },
+});

standalone_app/webpack.config.js

@@ -1,101 +1,48 @@
 const webpack = require('webpack');
 const path = require('path');
+const CompressionPlugin = require("compression-webpack-plugin");
 
-const mode = process.env.NODE_ENV === 'production' ? 'production' : 'development';
-const isDev = mode === 'development';
-const PUBLIC_PATH = process.env.PUBLIC_PATH ?? '/public/';
-if (!PUBLIC_PATH.endsWith('/')) {
-    PUBLIC_PATH += '/';
-}
-
-const typeScriptLoader = process.env.TYPESCRIPT_LOADER === "esbuild-loader" ? {
-    test: /\.tsx?$/,
-    exclude: [/node_modules/],
-    loader: 'esbuild-loader',
-    options: {
-        loader: 'tsx',
-        tsconfigRaw: require('./tsconfig.json')
-    }
-} : {
-    test: /\.tsx?$/,
-    exclude: [/node_modules/],
-    loader: 'ts-loader',
-    options: {
-        configFile: __dirname + '/tsconfig.json',
-        transpileOnly: isDev,
-        happyPackMode: true
-    }
-}
-
-var config = [
-    {
-        mode,
-        experiments: {
-            syncWebAssembly: true,
-            asyncWebAssembly: true,
-        },
-        entry: [__dirname + '/src/browser_app_entry.tsx'],
-        output: {
-            path: __dirname + '/public/',
-            filename: 'bundle.js',
-            publicPath: PUBLIC_PATH
-        },
-        module: {
-            rules: [{ oneOf: [typeScriptLoader] }]
-        },
-        resolve: {
-            extensions: ['.ts', '.tsx', '.js']
-        },
-        plugins: [
-            new webpack.DefinePlugin({'IS_VSCODE': JSON.stringify(false)})
-        ]
+module.exports = {
+    mode: "production",
+    devtool: 'source-map',
+    experiments: {
+        syncWebAssembly: true,
+        asyncWebAssembly: true,
     },
-    {
-        mode,
-        experiments: {
-            syncWebAssembly: true,
-            asyncWebAssembly: true,
-        },
-        entry: [__dirname + '/src/vscode_entry.tsx'],
-        output: {
-            path: path.resolve(__dirname, '../vscode/assets/'),
-            filename: 'bundle.js',
-            publicPath: '/'
-        },
-        module: {
-            rules: [
-                { oneOf: [typeScriptLoader] },
-                {
-                    test: /\.wasm$/,
-                    type: "asset/inline",
-                },
-            ]
-        },
-        resolve: {
-            extensions: ['.ts', '.tsx', '.js']
-        },
-        plugins: [
-            new webpack.DefinePlugin({'IS_VSCODE': JSON.stringify(true)})
-        ]
-    },
-];
-
-if (isDev) {
-    config[0].devtool = 'source-map';
-    config[0].cache = {
+    cache: {
         type: 'filesystem',
         buildDependencies: {
             config: [__filename],
         }
-    }
-    console.log('= = = = = = = = = = = = = = = = = = =');
-    console.log('DEVELOPMENT BUILD');
-    console.log(process.env.TYPESCRIPT_LOADER === 'esbuild-loader' ? 'esbuild-loader' : 'ts-loader');
-    console.log('= = = = = = = = = = = = = = = = = = =');
-} else {
-    const CompressionPlugin = require("compression-webpack-plugin");
-    config[0].plugins.push(new CompressionPlugin())
-    config[1].plugins.push(new CompressionPlugin())
-}
-
-module.exports = config;
+    },
+    entry: [__dirname + '/src/vscode_entry.tsx'],
+    output: {
+        path: path.resolve(__dirname, '../vscode/assets/'),
+        filename: 'bundle.js',
+        publicPath: '/'
+    },
+    module: {
+        rules: [
+            { oneOf: [{
+                test: /\.tsx?$/,
+                exclude: [/node_modules/],
+                loader: 'esbuild-loader',
+                options: {
+                    loader: 'tsx',
+                    tsconfigRaw: require('./tsconfig.json')
+                }
+            }] },
+            {
+                test: /\.wasm$/,
+                type: "asset/inline",
+            },
+        ]
+    },
+    resolve: {
+        extensions: ['.ts', '.tsx', '.js']
+    },
+    plugins: [
+        new webpack.DefinePlugin({ 'IS_VSCODE': JSON.stringify(true) }),
+        new CompressionPlugin()
+    ]
+};